同一设备安装不同版本的Vue脚手架

背景介绍：

因不同时期项目维护需要，需安装使用多个版本的 vue 脚手架。安装多版本Vue-CLI，即在电脑上同时安装多个版本的Vue-CLI。那么为什么要安装多个版本呢?原因是Vue-cli3.0版本与之前的版本有了较大不同，当你要处理3.0之前的项目，又想使用之后的版本处理新的项目的时候就会遇到多版本管理的问题。所以。就会有这样的需求了，来吧，搞起~

安装2.x 版本脚手架
npm install vue-cli -g
或者 cnpm install vue-cli -g //全局安装

这个是常规操作，就不细说了~
安装3.x 及以上版本脚手架
2.1 安装（非全局安装）
在任意目录新建一个文件夹，然后使用命令行进入创建好的文件夹（注意，最好不要有中文）
执行如下命令：
npm install @vue/cli
或者 cnpm install @vue/cli ，
安装完成后会出现如下文件或文件夹，示意图：
到这里，我们的设备上就已经有两个不同版本的Vue脚手架了，一个是全局的2.下版本的，一个是在指定文件夹下的3.x(或更高)版本的。
其实现在我们要做的就是把这两个版本区分开，嘿嘿，说到这有小伙伴可能已经知道怎么做了，接下来就见证奇迹吧~
2.2 安装完成后修改文件
node_modules/.bin文件夹下，找到vue.cmd和vue两个文件，更名为vue4.cmd 和 vue4(也就是脚本命令名称，配置系统变量后cmd中输入vue4就是执行的这里的脚本)可根据个人喜好进行修改。
配置系统环境变量
这里的环境变量名可根据个人喜好进行命名。
变量值为第二步新建的文件夹下的node_modules.bin

然后把新建的环境变量添加到系统环境变量的pat下
双击Path,点击新建，输入刚才填写的环境变量名称，名称前后加上百分（这是重点），如图所示：

好了，到这里设置就完成了，来看看效果吧~

ok,完成了，现在我们的设备上就已经有了这两个版本的Vue 脚手架了，当然，也可以添加多个，这就根据个人需要了~
使用的话，跟原来基本没有区别，比如用2.x 版本就执行 vue init webpack vue2-test 就可以创建名为 vue2-test 的vue 项目啦，
然后vue3.x 的话执行 vue4 create vue4-test 就可以创建名为 vue4-test 的vue 项目啦，ok,大功告成，妈妈再也不用担心我的头发咯~

同一设备安装不同版本的Vue脚手架相关推荐

查看vue版本和vue脚手架版本
打开cmd控制台: 输入vue --version(俩个-)或 vue -V(第二个V要大写)查看vue脚手架版本: 输入npm list vue -g 查看vue版本和vue脚手架版本:
7004.vue脚手架快速生成项目
文章目录 1 Vue脚手架可以快速生成Vue项目基础的架构. 1.1 安装3.x版本的Vue脚手架: 1.2基于3.x版本的脚手架创建Vue项目: 1.3 分析Vue脚手架生成的项目结构 2 vue脚 ...
Vue笔记_03_使用Vue脚手架
Vue笔记_03_使用Vue脚手架第三章使用Vue脚手架初始化脚手架说明具体步骤项目文件分析 pack-lock-json assets文件夹 components文件夹 main.js ...
webpack搭建vue脚手架
之前搞过的webpack版本搭建vue脚手架项目,今天分享一下! 在读这篇文章之前你可能需要了解一些webpack的配置才行否则可能看不懂部分配置首先我们的项目的src目录结构如下基本上与vue ...
vue-cli2.x旧版本卸载不掉的问题解决方案（亲测+踩坑）附Vue脚手架安装教程
旧版本卸载问题说明 vue2.x脚手架旧版本卸载不掉的问题:(卸载命令运行后输入vue --version仍一直显示旧版本) 问题解释首先明确一点,卸载不掉肯定说明你的电脑中至少有两个地方存在脚手 ...
查看vue的版本命令，以及vue脚手架的版本命令
查看vue版本的命令: [ 害我找了半天!!! 谁不知道-version啊,一天天净发些没用的 ] npm list vue 脚手架版本命令,这个大家倒是都知道 vue -V 或者 vue --ve ...
查看vue,vue脚手架的版本和npm和node的版本
1.查看vue版本号,只能在具体项目中查看vue版本号,所以在进入某一个项目中的命令行窗口输入该命令:npm list vue 2.查看vue脚手架的版本号,脚手架安装在全局中,所以在命令行窗口输入该 ...
Vue教程3【使用Vue脚手架】render ref props minin scoped $emit $bus 消息订阅发布动画
npm全局安装切换淘宝npm镜像 npm config set registry https://registry.npm.taobao.org全局安装 npm install -g @vue/cl ...
Vue 脚手架CLI 初始化项目
1 介绍 CLI是Command-Line Interface,翻译为命令行界面,但是俗称脚手架. Vue CLI是一个官方发布vue.js项目脚手架使用vue-cli可以快速搭建vue开发环境以及 ...

同一设备安装不同版本的Vue脚手架

背景介绍：

同一设备安装不同版本的Vue脚手架相关推荐

最新文章

热门文章