IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 同一设备安装不同版本的Vue脚手架 -> 正文阅读

[JavaScript知识库]同一设备安装不同版本的Vue脚手架

背景介绍:

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

  1. 安装2.x 版本脚手架
    npm install vue-cli -g
    或者 cnpm install vue-cli -g //全局安装
    在这里插入图片描述
    这个是常规操作,就不细说了~
  2. 安装3.x 及以上版本脚手架
    2.1 安装(非全局安装
    在任意目录新建一个文件夹,然后使用命令行进入创建好的文件夹(注意,最好不要有中文)
    执行如下命令:
    npm install @vue/cli
    或者 cnpm install @vue/cli ,
    安装完成后会出现如下文件或文件夹,示意图: 在这里插入图片描述
    到这里,我们的设备上就已经有两个不同版本的Vue脚手架了,一个是全局的2.下版本的,一个是在指定文件夹下的3.x(或更高)版本的。
    其实现在我们要做的就是把这两个版本区分开,嘿嘿,说到这有小伙伴可能已经知道怎么做了,接下来就见证奇迹吧~
    2.2 安装完成后修改文件
    node_modules/.bin文件夹下,找到vue.cmdvue两个文件,更名为vue4.cmd 和 vue4(也就是脚本命令名称,配置系统变量后cmd中输入vue4就是执行的这里的脚本)可根据个人喜好进行修改。
    在这里插入图片描述
  3. 配置系统环境变量
    这里的环境变量名可根据个人喜好进行命名。
    变量值为 第二步新建的文件夹下的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,大功告成,妈妈再也不用担心我的头发咯~
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-04 19:23:37  更:2021-07-04 19:24:11 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年4日历 -2024/4/18 13:45:09-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码