vue2和vue3共存,并分别创建项目

有时候,不是因为你没有能力,也不是因为你缺少勇气,只是因为你付出的努力还太少,所以,成功便不会走向你。而你所需要做的,就是坚定你的梦想,你的目标,你的未来,然后以不达目的誓不罢休的那股劲,去付出你的努力,成功就会慢慢向你靠近。

导读:本篇文章讲解 vue2和vue3共存,并分别创建项目,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

首先我电脑之前重装了一次系统,因此之前全局安装的vue2的脚手架也不复存在(如果安装了全局脚手架的话,先卸载再往下进行),今天就在此电脑中配置vue2和vue3的全局脚手架,就可以实现在一台电脑中,既可以创建vue2的项目也可以创建vue3的项目,以备不时之需。

一.安装vue-cli脚手架

1)先创建两个文件夹vue2和vue3

vue2和vue3共存,并分别创建项目

2)进入vue3文件夹,在地址栏输入cmd回车

使用vue3必须把农庄@vue-cli版本在4.5.0以上,默认安装最新版本

输入npm install @vue/cli

注意:不要加-g,不然就是全局安装了

vue2和vue3共存,并分别创建项目

3) 安装vue2脚手架

这里需要安装指定版本的vue-cli

npm install vue-cli@2.9.6

4)查看是否安装成功

分别进入D:\vue\vue3\node_modules\.bin中vue命令脚本

vue2和vue3共存,并分别创建项目

把vue.cmd拖进cmd窗口 加上–version,查看版本号

vue2和vue3共存,并分别创建项目

查看vue2同理

vue2和vue3共存,并分别创建项目

二.修改名称

1)找到.bin文件夹下的vue 和vue.cmd ,分别改名vue2和vue2.cmd

vue2和vue3共存,并分别创建项目

2)找到.bin文件夹下的vue 和vue.cmd ,分别改名vue3和vue3.cmd

3)新建环境变量,把vue2和vue3的命令添加进去

vue2和vue3共存,并分别创建项目

4)添加vue2的环境变量

vue2和vue3共存,并分别创建项目

5)修改path变量

vue2和vue3共存,并分别创建项目

四.重启电脑就可以

配置环境变量的目的就是让Path找到vue所在的文件路径,前面修改的vue2,vue3,就决定了 全局使用的名称,可自行定义

五、配置完成后创建vue2和vue3项目

重启完成后

直接输入vue2 -V或者vue2 –version

vue2和vue3共存,并分别创建项目

1)再新建一个文件夹加vue3project

vue2和vue3共存,并分别创建项目
vue2和vue3共存,并分别创建项目

选择vue3回车

此时vue3项目就创建好了

2)创建vue2项目,使用vue2 init webpack XXX

vue2和vue3共存,并分别创建项目
vue2和vue3共存,并分别创建项目

六、对比vue2和vue3项目结构

vue3

vue2和vue3共存,并分别创建项目

vue2

vue2和vue3共存,并分别创建项目

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/149705.html

(1)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!