初始化Vue项目步骤（包含nodejs安装）

一、安装 VS code

官方网址：

Visual Studio Code - Code Editing. Redefinedhttps://code.visualstudio.com/

 直接官方下载，安装即可。

二、nodejs：

1.安装

 官方地址：Node.js 中文网 (nodejs.cn)http://nodejs.cn/

在官方下载可维护版本，然后进行正常安装即可。 

在正常安装结束后，我们可以查询自己node是否安装成功。通过命令提示符

输入命令：

node -v 

npm -v 

 如图所示即为成功安装。

2.设置缓存地址：

我们需要到我们nodejs的安装文件目录中添加两个文件夹：node_cache和node_global

 之后我们打开命令模板（注意要以管理员的身份进入）进行查询全局保存和缓存的地址，查询命令为：

查询全局包存地址：
npm config get prefix
查询缓存地址：
npm config get cache

一般初始的时候我们的两个地址均会在：

 然后我们更改地址：更改的地址是（就是之前我们自己建立文件夹的目录地址）

 

 

 更改命令为：

修改全局包存地址：

npm config set prefix "F:\Software\nodejs\node_global"

修改缓存地址：

npm config set cache "F:\Software\nodejs\node_cache"

更改结果为：

 之后我们下载vue：

npm install -g vue

 此时我们需要配置环境变量：

1.此电脑----属性------高级系统设置-----环境变量----（用户变量path（环境变量的默认地址））-----更改成F:\Software\nodejs\node_global（即之前我们建立文件的地址）

2.在下方的系统变量中添加一个变量，防止找不到依赖，变量名一般为“NODE_PATH”，变量值：F:\Software\nodejs\node_global\node_modules（model_global下面的一层地址）

 

3.在系统变量中的path新加一个变量------"%NODE_PATH%"  

 

ps:如果网速不好的国内的镜像服务器：
1.查询
npm config get registry
修改镜像服务器：npm config set registry http://registry.npm.taobao.org

安装cnpm：
npm install cnpm 或者npm install -g --registry=http://registry.npm.taobao.org

三、vue

安装脚手架：
在cmd打开管理者运行中使用
npm install -g @vue/cli
查看版本
vue --version

如果创建脚手架出现问题的时候我们可以打开我们C盘

其中创建vue之前需要在C盘中用户中下的.npmrc文件删除掉
或者修改.vuerc文件：改为true

 
将安装nodejs文件的属性，安全中的user权限中完全控制勾住。
在安装node因为安装F盘会有权限的问题，

 创建vue项目：
①直接vue-cli创建：vue create 名称 选择vue3  

 

创建成功： 

②使用vite 创建文件vue3项目：
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

以上就是初始化一个vue项目的整个过程。