vue2 vs vue3 -- vue与脚手架之间的关系（从新建环境开始）vue2、vue3手脚架搭建一个项目实操

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框架的工具，俗称脚手架。

1. vue/cli 是旧版一直使用的，是指版本号在3.0以下的版本，老版本的vue2 就是用这个。
2. @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包版本有关。

1. 跟不同版本脚手架生成的项目解构无关。
2. 跟不同版本脚手架生成的代码无关（代码只是用了最基础的，并且vue3 做了兼容了）。
3. 跟用webpack还是用vue.config.js配置项目无关。