前言：

Vue官网：v3.cn.vuejs.org/

Vue cli：cli.vuejs.org/zh/guide/in…

由于本地环境中全局安装了vue2.x，且还有很多项目都是vue2.x，因此想兼容vue2.x与vue3.x的脚手架，这样可以灵活切换自如的玩耍。

在全局vue2的基础上安装vue3

1、之前vue2已经全局安装了 npm install vue-cli -g

2、在vue2的基础上开始安装vue3

在此之前vue2已经全局安装，因此vue3就不能全局安装了，找到E盘（你自己喜欢的任意盘符都可以的），新建文件夹vue3，在vue3文件夹下进行安装，执行命令：npm instll @vue/cli 【切记：不要全局安装】

由于npm instll xxx中，安装比较慢，遇到了bug：

解决方案：

• （1）清除缓存

npm cache clean --force

• （2）再次进行安装

npm install @vue/cli  

3、vue3添加到系统环境变量中

（1）前提需要修改vue3的名称，因为全局的vue命令已经被vue2占用了，直接改个vue3。

（2）新建系统变量，对应的输入变量名和文件目录；这里的目录就是我们安装vue的目录，而且找到.bin文件夹就可以了。

修改Path变量

最后，重启电脑就行了！

注意：修改环境变量后，要重启电脑才能生效。【重新打开一个cmd的新窗口】

（3）此刻cmd或cmder输入下图，表示已经vue2和vue3共存配置已经安装成功！

（4）使用vue3创建项目，cmd输入：vue3 create vue3-demo

注意：

• （1）vue3-demo 为项目名称，而且不能有大写字母，vue3Demo是错误的写法！导致创建不成功！

• （2）Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+，你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本）

Tips：

• 只要开发环境中的localhost中端口不一致，开启两个cmd终端同时运行项目，vue2.x的项目和vue3.x就可以同时开发，不会相互影响。

• vue2.x全局安装的，此前如何创建项目就如何创建新项目，不需要桥接。

番外：全局安装vue cli3和继续使用vue-cli2.x

前言：

若不想vue2和vue3的共存，然后又想要同时兼容两个脚手架的项目，那么咱们采用全局安装Vue cli3和继续使用Vue-cli2.x方案

详细步骤：

1、已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，需要先卸载它

npm uninstall vue-cli -g

2、安装vue cli3（@vue/cli），注意安装前需要注意对node版本的要求【Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。】

npm install -g @vue/cli

3、检测是否安装成功，查看版本

C:\Users\admin>vue -V
@vue/cli 4.5.13

4、vue cli3创建项目并运行

vue create hello-world // 创建项目
npm run serve // 运行ok 

这两个有什么区别呢？目录结构都是一样的。

Tips:

vue-cli2.x的旧项目依旧能够运行，可见vue cli3是兼容vue-cli2的。

5、目前全局的环境是vue cli3的天下了，若依旧想要创建一个有vue-cli2搭建的项目，该如何操作呢？

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project  // vue2.x完美创建项目
npm run dev // 运行ok

此刻也是完美兼容了vue2.x与vue3.x。

vue3.x创建项目详解，敬请下回分解......