用vue-cli3从0开始搭建一个多入口，国际化的前端项目

大家好，我是Frank。最近公司准备开发一个功能，由于功能复杂，且需要多端协同开发，所以，单拎出来新建了一个git项目。项目中用到的技术也是大家耳熟能详的，比如，vue-cli3、vie-router、vue-i18n、element-ui、dayjs、eslint、stylelint等等。

0. 项目初始化

首先，创建一个新的Vue项目：

vue create my-project

选择默认预设。

1. 多入口配置

为了支持多入口，我们需要在 vue.config.js 文件中添加以下配置：

module.exports = {
  chainWebpack: (config) => {
    config.entry('app').clear()
    config.entry('app').add('./src/main.js').end()
    config.entry('admin').add('./src/admin.js').end()
  }
}

这将创建两个入口点：app 和 admin。app 入口点将用于构建主网站，而 admin 入口点将用于构建管理面板。

2. 国际化配置

为了支持国际化，我们需要在 src 目录下创建一个 i18n 文件夹。在这个文件夹中，我们需要创建一个 index.js 文件，内容如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const messages = {
  en: {
    message: 'Hello, world!'
  },
  zh: {
    message: '你好，世界！'
  }
}

const i18n = new VueI18n({
  locale: 'en',
  messages
})

export default i18n

这将创建一个 VueI18n 实例，并将其导出。接下来，我们需要在 main.js 文件中导入和使用这个实例：

import Vue from 'vue'
import App from './App.vue'
import i18n from './i18n'

Vue.config.productionTip = false

new Vue({
  i18n,
  render: (h) => h(App)
}).$mount('#app')

这将使我们的项目能够支持国际化。

3. 第三方库集成

接下来，我们需要集成一些第三方库。首先，安装 element-ui：

npm install element-ui

然后，在 main.js 文件中导入和使用 element-ui：

import Vue from 'vue'
import App from './App.vue'
import i18n from './i18n'
import ElementUI from 'element-ui'

Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  i18n,
  render: (h) => h(App)
}).$mount('#app')

这将使我们的项目能够使用 element-ui 组件。

接下来，安装 dayjs：

npm install dayjs

然后，在 main.js 文件中导入和使用 dayjs：

import Vue from 'vue'
import App from './App.vue'
import i18n from './i18n'
import ElementUI from 'element-ui'
import dayjs from 'dayjs'

Vue.use(ElementUI)

Vue.config.productionTip = false

Vue.prototype.$dayjs = dayjs

new Vue({
  i18n,
  render: (h) => h(App)
}).$mount('#app')

这将使我们的项目能够使用 dayjs 库。

4. 代码风格检查

为了确保我们的代码风格一致，我们需要安装 eslint 和 stylelint：

npm install eslint stylelint

然后，在项目根目录下创建一个 .eslintrc.js 文件，内容如下：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': 'off',
    'no-debugger': 'off'
  }
}

在项目根目录下创建一个 .stylelintrc.js 文件，内容如下：

module.exports = {
  extends: 'stylelint-config-standard',
  rules: {
    'no-descending-specificity': null,
    'font-family-no-missing-generic-family-keyword': null
  }
}

在项目根目录下创建一个 .prettierrc.js 文件，内容如下：

module.exports = {
  printWidth: 120,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  trailingComma: 'es5'
}

5. 项目打包和部署

为了打包我们的项目，我们需要在 package.json 文件中添加以下脚本：

{
  "scripts": {
    "build": "vue-cli-service build",
    "start": "vue-cli-service serve"
  }
}

然后，我们可以使用以下命令打包我们的项目：

npm run build

这将在 dist 目录下生成一个构建好的项目。

为了部署我们的项目，我们需要将 dist 目录中的文件复制到我们的 web 服务器上。我们可以使用以下命令来做到这一点：

scp -r dist/* user@example.com:/var/www/html/my-project

6. 总结

现在，我们已经成功地使用vue-cli3构建了一个多入口、国际化的前端项目。我们使用了vue-router路由系统、vue-i18n国际化库、element-ui组件库、dayjs日期库、eslint和stylelint代码风格检查工具、nginx web服务器以及git版本控制系统。我们还学习了如何打包和部署我们的项目。