vue2 vs vue3 系列文章
可浏览博客主页的Vue专栏，会陆续添加相关文章，有问题或者可以优化的地方也希望大大门告知
共同进步 ：）
文章目录
简介
vue2 现在尤大已经不维护了，转向了vue3，并且vue3也是向下兼容的。但是有一些老的历史项目可能还是vue2的脚手架搭建的，所以咋们这边最好是了解一下，这边也做一系列文件，区分开vue2 与 vue3 的区别…
tips:面试官或许要问...
前言
vue2 与 vue3
vue2、vue3 是vue框架的版本，那如何搭建一个vue2或者一个vue3的框架出来呢？
这个时候就用到了vue-cli脚手架。
vue-cli 与 @vue-cli 有什么区别呢？
vue/cli 与 @vue/cli 是搭建vue框架的工具，俗称脚手架。
- vue/cli 是旧版一直使用的，是指版本号在3.0以下的版本，老版本的vue2 就是用这个。
- @vue/cli是新版，跟之前旧版区分开，但比如3.0这个版本，还是为vue2所用…
直到@vue/cli@4.5以上，才有了vue2，vue3两个选项…
总结：所以说vue框架版本，跟vue的脚手架版本没什么数字关联...
如何搭建
1. vue-cli（vue2）
# 卸载之前的版本，xxx为安装的包名，可能为vue-cli 或者 @vue/cli
# npm uninstall xxx -g
npm uninstall vue-cli -g
# 通过命令行查询可用的包的版本号（只能看3.0以下版本）
npm view vue-cli versions --json
# 安装，不加版本号，默认是最新的
# npm install vue-cli@2.9.5 -g
npm install vue-cli -g
# 查看vue版本
vue -V
下图说的就是不能用vue3了...
2. @vue-cli（v4.0.0版，已经只有vue2）
# 这边就以@vue-cli 4.0.0 版本为例子
# 先删除之前的，免得冲突...
npm uninstall -g vue-cli
# 安装 vue-cli 4.0.0
npm install -g @vue/cli@4.0.0
记得看红色框... 跟vue-cli 对比下...
3. @vue-cli（最新版，已经有vue3）
# 这边就以@vue-cli 最新版本为例子
# 先删除之前的，免得冲突...
npm uninstall -g @vue-cli
# 安装 vue-cli 不带版本号，默认是最新的
npm install -g @vue/cli@
@vue-cli（vue2版） 跟 @vue-cli（vue3版）没什么区别，不过也正常，都是@vue-cli…
tips：留意一下等下创建工程两者之间的区别
创建工程
1. vue-cli（vue2）
# 脚手架版本是3.0以下的 (2.9.5) 接近最新的了...
# 打开帮助手册
vue -h
# 创建基于webpack的vue工程
# vue init webpack xxx , xxx 为项目名
vue init webpack vueCli2.x
初始化的项目解构如下：
2. @vue-cli（v4.0.0版，已经只有vue2）
# 脚手架版本是4.0.0，改版本还是用vue2框架...
# 打开帮助手册
vue -h
# 创建项目，这边用a取代@符号，方便课程记忆对比而已...~
vue create a_vuecli2.x
初始化的项目解构如下：
目录结构是不是差很多，但是框架还是用了vue2的。
打包配置没有用webpack那几个又长又臭的文件了，这边简化成一个vue.config.js
3. @vue-cli（最新版，已经有vue3）
# 脚手架版本是最新的（v5.0.8），该版本的脚手架已经可以适配vue3的了，也向下做了兼容
# 打开帮助手册
vue -h
# 创建项目，这边用a取代@符号，方便课程记忆对比而已...~
# 都是@vue-cli，所以指令都是一样的
vue create a_vuecli3.x
这边有vue2 跟 vue3，做开发的用屁股想一下就知道是向下兼容了，这边就不做太多版本了，有兴趣的同学自己去尝试对比下…
从项目解构来讲，完全看不出vue2 跟vue3 有什么区别…
如何从项目中区分出vue2与vue3
1. 通过查看 package.json
2. 通过修改 HelloWorld.vue 文件
Vue2 template模板中只能有一个根元素，Vue3 template模板中允许有多个根元素。
总结
vue2 跟 vue3 只是vue框架本身的区别，跟package.json引入的vue包版本有关。
- 跟不同版本脚手架生成的项目解构无关。
- 跟不同版本脚手架生成的代码无关（代码只是用了最基础的，并且vue3 做了兼容了）。
- 跟用webpack还是用vue.config.js配置项目无关。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/66360.html
