【Vue】VueCli项目创建说明

时间:2021-2-20 作者:admin

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。