vue-cli2 与 vue-cli3 共存

摘要：介绍两种vue-cli2与vue-cli3共存的方案，推荐第二种。

---

一、环境变量区分

• 创建安装目录：
  选择一个目录，这里以 F:\Vue-cli 为例，在目录下创建 vue2 和 vue3 两个目录;
• 局部安装 vue-cli2：
  进入 vue2 目录下，执行 npm install vue-cli，重命名 ./node_modules/.bin 目录下的文件 vue 为 vue2，vue.cmd 为 vue2.cmd ;
• 局部安装 vue-cli3：
  进入 vue3 下目录，执行 npm install @vue/cli，重命名 ./node_modules/.bin 目录下的文件 vue 为 vue3，vue.cmd 为 vue3.cmd ;
• 配置环境变量：
  创建 vue2 系统变量，变量值为 F:\Vue-cli\vue2\node_modules.bin*，创建 *vue3 系统变量，变量值为 F:\Vue-cli\vue3\node_modules.bin，环境变量创建成功后要重启 cmd 命令窗;
• 测试指令：
  使用 vue-cli2 创建项目，指令为 vue init <template-name> <project-name>，使用 vue-cli3 创建项目，指令为 vue create <project-name>，两者互不影响。

二、使用桥接工具【推荐】

官方参考地址

• 全局安装 vue-cli3：
  执行 npm install -g @vue/cli;
• 全局安装桥接工具：
  执行 npm install -g @vue/cli-init;
• 测试指令：
  使用 vue-cli2 创建项目，指令为 vue init <template-name> <project-name>，使用 vue-cli3 创建项目，指令为 vue create <project-name>，两者互不影响。