Vue 3 安装及环境配置

1.安装 Node.js

Node.js 官网：Download | Node.js

点击下载后

点击安装，安装路径按需

安装完成后如图所示

安装成功后在 CMD 控制台输入 node -v 和 npm -v 验证是否安装成功

node -v

npm -v

2.配置默认安装目录和缓存日志目录

创建默认安装目录和缓存日志目录（我的Node目录在D盘）

 

由于在执行全局安装语句时，安装的模块会默认安装到

C:\Users\用户名\AppData\Roaming\npm 目录下

执行命令，配置默认安装目录和缓存日志目录到刚才创建的文件夹

npm config set prefix "D:\Develop\Node\node_global"

npm config set cache "D:\Develop\Node\node_cache"

3.配置环境变量

按 win 键并输入“编辑系统环境变量”调出系统属性界面

在系统变量下新建 NODE_PATH 变量，输入默认安装目录 node_global 下的 node_modules 的路径

 

 

4.配置淘宝镜像

使用 NPM 来安装用的是国外的服务器，经常会出现超时错误，可以通过修改为国内的淘宝镜像来加速安装。

淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。

安装 cnpm

安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org

修改镜像网址（设定成自己喜欢的，一般为淘宝镜像https://registry.npmmirror.com）

npm config set registry https://registry.npmmirror.com

执行命令验证是否安装成功

cnpm config get registry

该问题是由于 cnpm 文件夹与 npm 文件夹不在同一文件夹下造成

cnpm 所在文件夹：D:\Develop\Node\node_global

npm 所在文件：D:\Develop\Node\node_modules

①.将 cnpm 文件夹移至 npm 文件夹所在 node_moudules 下

②.将 cnpm 和 cnpm.cmd 移至 npm 和 npm.cmd 所在目录下

再次执行命令验证

5.安装 vue 和脚手架

安装 vue.js

cnpm install vue -g

• 验证安装是否成功

cnpm info vue npm list vue

安装 webpack 模块

cnpm install webpack -g

安装 webpack-cli

cnpm install --global webpack-cli

6.安装vue-cli

cnpm install @vue/cli –g

7.创建 vue 3 项目

以管理员身份打开 cmd 控制台，进入想要创建项目的目录，开始创建项目

vue create [项目名称] 

进入项目目录，输入命令启动项目

npm run serve

打开浏览器访问: http://127.0.0.1:8080/