Vue2 多入口工程，解锁应用组件化新模式

前端

2024-02-11 09:20:15

搭建 Vue2、Vue Router2、Webpack3 多入口工程，打造高效组件化应用

前言

在前端开发领域，多入口工程模式凭借其灵活性和可扩展性备受推崇。本文将深入探讨如何利用 Vue2、Vue Router2 和 Webpack3 构建多入口工程，帮助开发者创建高效且可维护的应用。

什么是多入口工程？

多入口工程允许一个项目包含多个入口文件，每个入口文件对应一个独立的模块或应用。这种模式非常适合大型项目或需要组件化开发的项目，可以显著提高代码复用性和性能。

搭建多入口工程

场景一：构建单页面应用

步骤 1：初始化项目

vue create my-project

步骤 2：安装依赖

npm install vue-router webpack webpack-dev-server --save-dev

步骤 3：创建子目录和文件

mkdir src/pages
mkdir src/components
touch src/pages/Home.vue
touch src/pages/About.vue

步骤 4：编写组件代码

Home.vue

<template>
  <div>
    <h1>首页</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

About.vue

<template>
  <div>
    <h1>关于</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

步骤 5：创建 main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './pages/Home.vue'
import About from './pages/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

步骤 6：创建 webpack.config.js

const path = require('path')

module.exports = {
  entry: {
    app: './main.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: './dist',
    port: 8080
  }
}

步骤 7：运行项目

npm run serve

访问 http://localhost:8080 即可查看项目。

场景二：构建组件库

步骤 1：初始化项目

vue create my-component-library

步骤 2：安装依赖

npm install webpack webpack-dev-server --save-dev

步骤 3：创建子目录和文件

mkdir src/components
mkdir src/utils
touch src/components/Button.vue
touch src/components/Input.vue

步骤 4：编写组件代码

Button.vue

<template>
  <button>
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'Button'
}
</script>

Input.vue

<template>
  <input>
    <slot></slot>
  </input>
</template>

<script>
export default {
  name: 'Input'
}
</script>

步骤 5：创建 index.js

import Button from './components/Button.vue'
import Input from './components/Input.vue'

export {
  Button,
  Input
}

步骤 6：创建 webpack.config.js

const path = require('path')

module.exports = {
  entry: {
    'my-component-library': './index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  library: 'my-component-library',
  libraryTarget: 'umd',
  devServer: {
    contentBase: './dist',
    port: 8080
  }
}