Vue CLI 3搭建

卸载旧版本

vue cli 升级到3后，package的名字从 vue-cli 改为了 @vue/cli，装了旧版本的，官方的建议是，把旧版本的卸载了，再安装新版本。 

卸载指令：npm uninstall vue-cli -g or yarn global remove vue-cli

安装

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

创建项目

vue create <projectName> 
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\duoyi\.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，就解决了上面遇到的问题了

---

原文