vue-cli@3.0版本

刺骨的言语ヽ痛彻心扉 2021-08-19 17:47 334阅读 0赞

3.0版本区别于之前的2.0做了很大的调整，之前的2.0在下载安装时是这样的：

npm install -g vue-cli

那么现在的3.0是这样的：

npm install -g @vue/cli

其次，快速创建项目的命令也是不一样的，2.0：

vue init webpack map
    // 详见https://blog.csdn.net/qq_42345237/article/details/82194563

那么3.0版本初始化项目是这样的：

vue create projectName

回车以后会有一系列选项供你选择：  
![在这里插入图片描述][20190904234034197.png]  
默认配置，还是自己选择？  
默认就是选择babel和eslint，所以这里我们要选第二个。（手动选择功能）  
![在这里插入图片描述][20190904234118376.png]  
这里有9个选项，可以根据项目情况去选择相应的配置，按空格进行选择，选择完以后按回车进入下一步。  
![在这里插入图片描述][20190904234201276.png]  
因为上一步选择了css预处理器，所以这里提示选择使用哪一个，我们选择一个，然后按回车。  
![在这里插入图片描述][20190904234235381.png]  
紧接着就是选择ESlint，这里就选择图中的这个。  
![在这里插入图片描述][20190904234302593.png]  
选择在页面保存的时候就进行检测。  
![在这里插入图片描述][20190904234333626.png]  
那这些配置是放在相应的配置文件里还是放在package.json里？这里一般会放在相应的文件里。  
![在这里插入图片描述][20190904234424340.png]  
最后会提示你要不要去保存刚刚的预设，这里咱们不保存，因为下次新建项目的时候可能会有变动，如果现在保存，那下次新建项目，会按照这次预设的配置去创建项目。  
OK，现在就等待项目创建了。  
还有一点不同的是，在2.0的时候咱们启动项目一般是：

npm run dev

那么在3.0是这个样子的：

npm run serve

项目目录结构也是有所不同的：  
![在这里插入图片描述][20190904234555444.png]  
那我们安装一些插件的时候，输入的命令也是不一样的：

vue add 插件名

[20190904234034197.png]: /images/20210813/d79fbb70976a4b7b8315fc3ba63c3c59.png
[20190904234118376.png]: /images/20210813/d8cb278781c24ff79db2392b223df060.png
[20190904234201276.png]: /images/20210813/68a9117464184d71b4369a286a38ee2c.png
[20190904234235381.png]: /images/20210813/8e88d5a3a7744365b33d4fff9873f3d6.png
[20190904234302593.png]: /images/20210813/ea0d7296488e48deac79217786a6a03e.png
[20190904234333626.png]: /images/20210813/ea3ffd44ac2d4b5d83cdeb30dd0fa3c5.png
[20190904234424340.png]: /images/20210813/0037728033f1415ea29ce5911752033b.png
[20190904234555444.png]: /images/20210813/0d9693a255974615b22863000249e0a1.png