Vue3.0虽然优秀；但生态环境还不成熟，我们生产中遇到的许多问题还无法解决。因此本教程以Vue2.0为准：
创建项目
假设项目名为example，创建项目。
vue create example
方向键操作，Enter键选择Manually select features。
❯ my-vue-cli ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) Manually select features
方向键操作，空格键选择；选择完后，按Enter键进行下一步。
选择标准如下：
? Check the features needed for your project: ◉ Choose Vue version ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◉ Unit Testing ◉ E2E Testing
插件用途说明：
| 插件 | 说明 |
|---|---|
| Choose Vue version | 选择Vue |
| Babel | JavaScript编译器（选择ES6语法） |
| Router | Vue路由 |
| Vuex | Vue数据仓库 |
| CSS Pre-processors | 动态css（如scss） |
| Linter / Formatter | 代码风格标准 |
| Unit Testing | 单元测试 |
| E2E Testing | E2E测试 |
Unit Testing和E2E Testing不在开发阶段一使用，如果开发时间足够则启用测试。
TypeScript在Vue3成熟以后再采用，在Vue2.0中支持性不好，不如不用。
控制台选择Vue2.x版本，按Enter键进行下一步：
? Choose a version of Vue.js that you want to start the project with (Use arrow keys) ❯ 2.x 3.x (Preview)
不采用Vue Router的history模式，因为本项目不进行多余的配置。
输入n，按Enter键进行下一步：
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
动态css选择Sass/SCSS (with dart-sass)（默认），这是当前最受欢迎也是最好的一款动态css编译器。
直接按Enter键进行下一步：
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus
代码风格选择ESLint with error prevention only（默认）。因为当你编写的代码不符合标准的开发风格时，报错才能在开发阶段解决问题。
直接按Enter键进行下一步：
Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier
选择在保存时进行风格检查（默认），直接按Enter键进行下一步：
Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) ❯◉ Lint on save ◯ Lint and fix on commit
单元测试插件选择Mocha + Chai（默认），同样是最流行的，直接按Enter键进行下一步：
Pick a unit testing solution: (Use arrow keys) ❯ Mocha + Chai Jest
E2E测试插件选择Cypress (Chrome only)（默认，仅谷歌浏览器调试）,同样是最流行的，直接按Enter键进行下一步：
Pick an E2E testing solution: (Use arrow keys) ❯ Cypress (Chrome only) Nightwatch (WebDriver-based) WebdriverIO (WebDriver/DevTools based)
配置文件选择在单独的文件中配置（默认），直接按Enter键进行下一步：
Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json
保存当前的选择为一个“future”，这样以后创建项目就不用再次选来选去的了：
输入y同意，然后输入名称为“vue2-standard”：
Save this as a preset for future projects? (y/N) y Save preset as: vue2-standard
等待安装完成
加入国际化插件
国际化就是使得项目具备切换各国语言的能力，使用Vue I18n插件创建：
cd example vue add i18n
安装标准：
? The locale of project localization. zh ? The fallback locale of project localization. zh ? The directory where store localization messages of project. It's stored under `src` directory. locales ? Enable locale messages in Single file components ? No
Enable locale messages in Single file components是否在vue文件中使用i18n节点，具体来说就是以下风格：
<i18n>
{
"en": {
"hello": "hello world!"
},
"ja": {
"hello": "こんにちは、世界！"
}
}
</i18n>
<template>
<div id="app">
<label for="locale">locale</label>
<select v-model="locale">
<option>en</option>
<option>ja</option>
</select>
<p>message: {{ $t('hello') }}</p>
</div>
</template>
<script>
export default {
name: 'app',
data () { return { locale: 'en' } },
watch: {
locale (val) {
this.$i18n.locale = val
}
}
}
</script>
这种风格比较适合vue3.0，在Vue2.0中我们将国际化配置统一放到一个文件里。
点击咨询 