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

2023-03-01  本文已影响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项目完整详细的步骤就是这些啦,大家在执行过程中遇到什么问题随时留言给我哦~
上一篇 下一篇

猜你喜欢

热点阅读