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中我们将国际化配置统一放到一个文件里。