Vue CLI 3搭建项目详解

vue cli 3 介绍

上次用vue的时候，vue cli的版本还是2，对应指令还是 vue init < 模板名称 > < 项目名称 >

vue-cli提供的模板有：
webpack				一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
webpack-simple		一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。
browserify			一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
browserify-simple	一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。
simple*				一个最简单的单页应用模板。

最近用的时候，已经有vue cli 3了,大致跑了一下，问题还是不大的，但是还是踩了些坑，具体在文章后续会分享。

前期准备

卸载旧版本

vue cli 升级到3后，package的名字从 vue-cli 改为了 @vue/cli，装了旧版本的，官方的建议是，把旧版本的卸载了，再安装新版本。
卸载指令如下：
npm uninstall vue-cli -g or yarn global remove vue-cli

node版本

官方建议，node.js的版本，需要是8.9或者以上（建议是8.11.0+）

安装

安装指令如下：
npm install -g @vue/cli or yarn global add @vue/cli

创建项目

vue create

1. 选择features
   
   这里我选了第二个，手动选择需要的，个人选择了下图所示的内容。
   
2. 是否使用history路由，这里感觉必要性不大，所以就没用上,有兴趣的或者需要使用的，可以参考Routing with history.pushState
3. 选择css处理器，一般这里选第一个就可以了
   
4. 代码风格和eslint
   
   这里选的是eslint + standard config ， 个人比较习惯这种风格，具体怎么选择看个人习惯吧。
5. 选择lint
   
6. 选择lint的配置文件如何存放，这里我选了分别存到具体的config文件，而不是package，便于管理
   
7. 是否保存本次创建项目的配置项，用于下次快速创建项目
   
8. 然后就可以愉快地等待创建项目了
   

注意事项

vue cli配置文件

文件路径是：C:\Users\【用户名】\.vuerc
文件内容大致如下：

{
  "packageManager": "npm",
  "presets": {
    "vue_create_project": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "standard",
          "lintOn": [
            "save"
          ]
        }
      },
      "router": true,
      "routerHistoryMode": false,
      "vuex": true,
      "cssPreprocessor": "sass"
    }
  },
  "useTaobaoRegistry": false
}

解析

packageManager 用于指定安装包和运行时，使用的是npm还是yarn
presets 上述安装步骤中，第7步询问是否保存创建配置，用于下次快速创建项目

关于配置，不小心踩的坑

安装过程中，曾经询问过我是用npm还是yarn指定安装包和运行，但是，由于没细看，选了yarn，后续安装过程中一直报错，具体错误如下图：

多次卸载重装vue cli，但是并没有解决问题，也没有重新提醒我选择npm或者yarn。
想了想，那可能是配置文件的问题了，但是又不知道vue cli 3的配置文件存在哪，想了想，会不会和设置npm源一样，可以用npm config这类指令呢
于是，打开了cmd，输入了vue -h

看到了有vue config指令，输入后显示如下：

除了把配置文件打印出来，还把配置文件路径打印出来了，so，不用看了，多次卸载重装,但是依旧未果的原因，就是因为卸载重装不会删除配置文件，这里直接把packageManager改成npm，就解决了上面遇到的问题了

参考链接

Vue CLI 3官网
Vue CLI 3指引文档(中)
Vue CLI 3指引文档（英）
对vue cli 2 感兴趣的，可以访问 git 上 vuejs/vue-cli 项目文档