1. node.js 下载安装
nodejs官网下载链接：https://nodejs.org/zh-cn/download
推荐带TLS标识的长期维护的版本，选择版本后，这里我们直接使用prebuilt的msi安装包安装。
下载好打开安装包，选择自己要安装的路径，其他都默认配置即可。安装时会有 “是否需要自动安装工具” 的提示框，可以不勾选，后期需要再单独安装。
安装路径在后续设置环境变量时需要用到，我的安装路径放在D:\app\nodejs目录。
2. 查看 node.js 是否安装成功
安装node.js时会自动安装 npm， 我们查看一下 node 和 npm 的版本。
输入cmd打开命令提示符窗口, 输入 node -v 和 npm -v 查看安装的版本号。
node -v
- 1
npm -v
- 1
3. 配置 npm 下载的默认安装、缓存环境
主要配置 1. npm 下载的全局模块所在路径 和 2. 缓存 cache 的路径。
(1) 添加文件夹
在 node.js 的安装路径下增加两个文件夹， “ node_cache ” (用于存放缓存资源) 和 " node_global "（用于存放下载安装的全局模块）。
我存放在 D:\app\nodejs 目录下，大家根据前面安装的实际路径来。
(2) 设置系统环境变量
修改环境变量，
系统搜索 “查看高级系统设置” - “环境变量” - “系统变量” - “新建”
变量名： NODE_PATH
变量值： D:\app\nodejs\node_modules （修改成自己的nodejs路径）
- 1
- 2
- 3
如果系统环境变量无法新建、编辑、删除，一定要通过“ 查看高级系统设置 ”进入该页面。
修改系统环境变量 Path
编辑Path，确保D:\app\nodejs存在，并新增
D:\app\nodejs\node_global（修改成自己的nodejs路径）
- 1
- 2
- 3
(3) 修改下载模块的存放路径
默认的存放路径为 C:\Users\用户名\AppData\Roaming\npm，容易占满
C盘空间。建议修改。
输入cmd打开命令提示符窗口, 配置相应路径（按实际情况修改为自己的路径）
npm config set prefix "D:\app\nodejs\node_global"
npm config set cache "D:\app\nodejs\node_cache"
- 1
- 2
配置完成后，查看修改是否成功
npm config get prefix
npm config get cache
- 1
- 2
4. npm 镜像源配置
原npm下载速度较慢，需要设置镜像。用以下命令配置阿里的 cnpm 命令行工具，后续可以使用 cnpm install 命令来代替 npm install， 加快下载速度。
(1) 输入cmd打开命令提示符窗口,
npm install -g cnpm --registry=http://registry.npmmirror.com
- 1
（以前的 https://registry.npm.taobao.org/ 镜像网站已停止维护，请使用上面最新的镜像）
(2) 如果配置报错
检查是否有权限编辑该文档，并使用管理员模式运行命令提示符窗口。显示下面窗口则表示安装成功。
(3) 查看镜像配置是否成功
npm config get registry （返回阿里的镜像地址即可）
cnpm -v （返回cnpm的版本号）
- 1
- 2
5. 安装 vue-cli 工具
输入cmd打开命令提示符窗口, 配置相应路径（按实际情况修改为自己的路径）
cnpm install -g @vue/cli
- 1
提示安装成功即可。
6. VSCode 配置
到这一步，基本配置都已经完成，我们可以尝试来新建项目并打开网页了。
(1) 安装插件
安装 vue-official （官方推荐） 和 vetur 插件。
(2) 新建并允许 vue 项目
在 VS Code 中打开 terminal，进入项目准备存放的文件夹。
创建 vue3.0 项目 （项目名中不要出现中文和大写字母）
vue create 项目名
- 1
出现提示选择默认的 vue3 即可。
根据提示进入项目文件夹，运行即可。
cd helloworld
npm run serve
- 1
- 2
7. 大功告成
不出意外的话，这里可以成功打开 VSCode 中给出的地址，显示以下界面了！
https://cn.vuejs.org/guide/quick-start
后续就可以根据官方文档学习提升了~
评论记录：
回复评论：