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

小鱼儿心语：懂得珍惜把握每一个机会，就应该勤奋，勤奋并不需要有推动力，只要你能欣赏人生。你能欣赏日出日落。你懂得珍惜，你自然会勤奋，因为你不会也不希望错过生命送给你的每一个机会！只要你心存希望与信心。

一、创建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项目完整详细的步骤就是这些啦，大家在执行过程中遇到什么问题随时留言给我哦~