vue3项目搭建全过程-局部安装vue3.0(vue2.0与vue3.0共存)

小鱼儿心语:懂得珍惜把握每一个机会,就应该勤奋,勤奋并不需要有推动力,只要你能欣赏人生。你能欣赏日出日落。你懂得珍惜,你自然会勤奋,因为你不会也不希望错过生命送给你的每一个机会!只要你心存希望与信心。
一、创建vue3.0文件夹,并局部安装
vue3.0文件夹.png
  • 以下命令的操作最好以管理员得身份运行,避免安装失败!

先来全局查看一下vue2.0版本:


vue2.0版本查看.png

在vue3文件夹下执行命令 npm install @vue/cli(不加-g,代表是局部安装,反之npm install -g @vue/cli为全局安装)

npm install @vue/cli
二、查看是否安装成功

在vue3.0文件夹中找到路径 \node_modules.bin并且使用cmd打开并执行 (显示版本号即为安装成功)

vue -V
三、修改vue3.0文件夹中node_modules/.bin中vue和vue.cmd 的文件名称,修改为vue3和vue3.cmd,方便以后与vue2.0混淆
修改文件名称.png
四、修改环境变量(win10)

1、设置➡关于➡高级系统设置


修改环境变量.png

2、点击进入环境变量设置


修改环境变量1.png

3、配置系统变量
[图片上传中...(修改环境变量3.png-f3ad96-1677736751937-0)]

修改环境变量3.png

4、点击确定保存环境变量

五、开始创建vue3项目
  • 这里需要注意的一点是,由于vue-cli3.0是在局部文件夹内创建的,所以必须在.bin目录下才可以进行创建项目
  • 在.bin目录下我们将vue文件名改为vue3,所以输入命令时需要注意,vue3 create vue3-project 可以将vue3-project换成任何你想取的项目名
  • 将cmd以管理员身份运行哦~

出现三个选项,默认安装vue3即可

E:\vue3.0\vue3ts_components\node_modules\.bin>vue3 create vue3-project
vue3.png

耐心等待.png

创建项目成功.png
六、启动项目
  • 进入到项目中
cd ./vue3-project
  • 运行
npm run serve

启动成功.png

创建vue3项目完整详细的步骤就是这些啦,大家在执行过程中遇到什么问题随时留言给我哦~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容