Vue CLI 3搭建

蔚落 2022-02-26 01:04 173阅读 0赞

### 卸载旧版本 ###

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

![features][]

这里选了第二个，手动选择需要的，个人选择了下图所示的内容。   
![features][features 1]

2. 是否使用history路由，这里感觉必要性不大，所以就没用上,有兴趣的或者需要使用的，可以参考Routing with history.pushState   
3. 选择css处理器，一般这里选第一个就可以了   
 ![csså¤çå¨][css]  
4. 代码风格和eslint   
 ![ä»£ç é£æ ¼][70]  
这里选的是eslint + standard config ， 具体怎么选择看个人习惯吧。   
5. 选择lint

![lint][]

6. 选择lint的配置文件如何存放，这里我选了分别存到具体的config文件，而不是package，便于管理

![lintéç½®æä»¶åæ¾][lint 1]

7. 是否保存本次创建项目的配置项，用于下次快速创建项目

![æ¯å¦ä¿åéç½®é¡¹][70 1]

8. 然后就可以愉快地等待创建项目了

![è¿éåå¾çæè¿°][70 2]

## 注意事项 ##

### 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，后续安装过程中一直报错，具体错误如下图：

![è¿éåå¾çæè¿°][70 3]

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

![vue -h][]

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

![vue config][]

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

--------------------

[原文][Link 1]

[features]: /images/20220226/121a6e17273042b4b3284d9966c4c0dd.png
[features 1]: /images/20220226/b4cd21c45b544a17b5c8836c3351cde1.png
[css]: /images/20220226/2a99576514884e72ba80aa55e7e4ce69.png
[70]: /images/20220226/109e1e14d97c4d5db53c1920177cc6ee.png
[lint]: /images/20220226/4779d46098fd48db95a835d03a7fe30e.png
[lint 1]: /images/20220226/e455e012c35b4f23bc33d8973a2f7f54.png
[70 1]: /images/20220226/f09f42e72b24445a91f6ac469d72df62.png
[70 2]: /images/20220226/7dac555c7157473d95a01afacd307d2b.png
[70 3]: /images/20220226/7754089e378c4604b1d2950e4f003add.png
[vue -h]: /images/20220226/b50fc388716e4021a999d8b93abd40ba.png
[vue config]: /images/20220226/f2c8676005fc4232be0bc21a64afb2d5.png
[Link 1]: https://blog.csdn.net/zzsan/article/details/82667609