「这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」
大家好，我是 摸鱼小公举，真正的强者，不会怨天尤人，如果想不被别人看轻，你就只有付出比别人多十倍百倍的努力，才能站的比别人更高。上一篇文章是 js 去重的十种方法 ；今天我们来学习一下Vue Cli2与Vue Cli3以及Vue Cli4的区别以及用法。
Vue Cli2
1.全局安装vue-cli
cnpm install -g vue-cli (这种安装vue-cli写法默认安装的是vue-cli2.x)
2.检测vue版本
vue -V
3.全局安装webpack
cnpm install -g webpack
4.全局安装webpack的本地webserver
cnpm install -g webpack-dev-server
5.构建项目
vue init webpack demo
6.启动项目
npm run dev
7.构建的项目目录如下
Vue Cli3
1.安装3.0的包
npm install -g @vue/cli@3.12.1 //由于现在最新版本是4.0,所以要指定版本号安装
2.检查是否是3.0版本
vue -V
3.创建新项目
vue create my-project
4.启动项目
npm run serve
5.构建的项目目录如下
总结vue Cli2与vue Cli3的区别
两个项目文件目录也差别很大
(1)， 2.0的安装没有 vue.config.js ,而配置文件放在了config文件目录里面，也多了个build的文件夹；
(2)，3.0的安装项目时自动下载node-model，没有build和config的文件夹，多了EsLint和vuex的选项；还有,构建项目和启动项目的命令不一样,而且3.0的项目目录比较简洁。
Vue Cli4
安装4.0的包
npm install -g @vue //不用指定版本号这样安装的是最新版本
其它步骤是跟3.0的步骤是一样
构建的项目目录如下
总结3.0版本和4.0版本的区别
(1)，创建项目时手动设置 router和store;这两个的目录的路径都不一样了,4.0是有router和store文件夹的扩展性强一些
(2)，babel.config.js 的 presets 的配置从 @vue/app 变成了@vue/cli-plugin-babel/preset
(3)，package.json的依赖升级，"@vue/cli-plugin-babel", "@vue/cli-plugin-eslint", "@vue/cli-service"由 v3 的版本升级到了 v4，core-js由2.0升级到3.0。
结语：
这篇文章是网上看了一些文章总结出来的，只是说了一些比较明显的区别，其实对于脚手架我也不是很懂它的原理，感兴趣的朋友可以自己去研究一下。好了文章到此就结束了，欢迎大家( 点赞+评论+关注 ) 有问题可以来互相交流一下。希望这篇文章对大家有帮助,也希望大家多多支持我，今天是我参与2022首次更文挑战的第13天，加油！
