vue-cli2和vue-cli3的区别

た入场券 2022-10-09 03:05 69阅读 0赞

**vue-cli官网：**[https://cli.vuejs.org/zh/guide/browser-compatibility.html][https_cli.vuejs.org_zh_guide_browser-compatibility.html]

**目录：**

1.  vue-cli2和vue-cli3比较
2.  vue cli2升级到vue cli3
3.  在全局vue2的基础上安装vue3（同时存在两个版本）

##  ##

## 一.vue-cli2和vue-cli3比较 ##

两个版本的最基本的目录

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70][]

vue-cli3比vue-cli2少了build、config、static目录，多了public目录

配置文件的话，基本无变化

区别：

1.  创建项目方式：
    
    1.  2.0的安装：vue init webpack projectname
    2.  3.0的安装：vue create projectname
2.  文件夹目录
3.  启动方式：至于为什么会变，看一下package.json
    
    1.  2.0是通过:npm run dev  
        启动流程：[npm run dev启动过程][npm run dev]
    2.  3.0是：npm run serve  
        启动流程：[https://blog.csdn.net/luckybeggar/article/details/103716708][https_blog.csdn.net_luckybeggar_article_details_103716708]
4.  vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)
5.  vue-cli 3版本没有static文件夹，本地文件应放在哪儿，如何引用[https://blog.csdn.net/weixin\_37806077/article/details/102514115][https_blog.csdn.net_weixin_37806077_article_details_102514115]  
    原来放在static下的文件，现在应该放在public文件夹下

## 二. vue cli2升级到vue cli3 ##

1.  先升级npm的版本：npm install -g npm     参数-g：全局安装
2.  卸载之前的vue cli 2.9.6：npm uninstall vue-cli -g
3.  下载最新的vue cli版本：npm install -g @vue/cli版本号  
    注意，这个版本号一定要跟，如果不跟，那么就是安装vue-cli 的最新版本。 目前 （2018-08-19） 其最新版本是 3.0.1。  
    例：npm install -g @vue/cli@3.0.1

## 三. 在全局vue2的基础上安装vue3（同时存在两个版本） ##

1.[https://blog.csdn.net/Jioho\_chen/article/details/90455778][https_blog.csdn.net_Jioho_chen_article_details_90455778]

2.[https://blog.csdn.net/weixin\_44599809/article/details/103882772][https_blog.csdn.net_weixin_44599809_article_details_103882772]

3.[https://blog.csdn.net/lb1135909273/article/details/100132670?utm\_medium=distribute.pc\_relevant\_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel\_param&depth\_1-utm\_source=distribute.pc\_relevant\_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel\_param][https_blog.csdn.net_lb1135909273_article_details_100132670_utm_medium_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param_depth_1-utm_source_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param]

局部安装：

![2021062315381877.png][]

验证是否成功：

![20210623153829547.png][]

创建项目：

![20210623153843367.png][]

[https_cli.vuejs.org_zh_guide_browser-compatibility.html]: https://cli.vuejs.org/zh/guide/browser-compatibility.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70]: /images/20221005/c718a02dce1a4463a7b9af9104ee7d54.png
[npm run dev]: https://www.cnblogs.com/zeroes/p/vue-run-dev.html
[https_blog.csdn.net_luckybeggar_article_details_103716708]: https://blog.csdn.net/luckybeggar/article/details/103716708
[https_blog.csdn.net_weixin_37806077_article_details_102514115]: https://blog.csdn.net/weixin_37806077/article/details/102514115
[https_blog.csdn.net_Jioho_chen_article_details_90455778]: https://blog.csdn.net/Jioho_chen/article/details/90455778
[https_blog.csdn.net_weixin_44599809_article_details_103882772]: https://blog.csdn.net/weixin_44599809/article/details/103882772
[https_blog.csdn.net_lb1135909273_article_details_100132670_utm_medium_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param_depth_1-utm_source_distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param]: https://blog.csdn.net/lb1135909273/article/details/100132670?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param
[2021062315381877.png]: /images/20221005/9779b4be3460405592cc874b47d16382.png
[20210623153829547.png]: /images/20221005/dd59cab7c65e4398919be7d439035592.png
[20210623153843367.png]: /images/20221005/8d08d34b07c745228bf2196695a69089.png