1. 下载和安装Node.js
Node.js官方中文网站:https://nodejs.org/zh-cn/
一定要下载正式版,稳定。
一路next到安装目录,选择安装目录(不建议放在C盘)。
默认选择全部,不用管。
编译工具,应该是用不到,不用勾选了,安装起来特别费时间,而且国内的网可能会导致下载失败。
直接一路Next到安装完毕即可。
扫描二维码关注公众号,回复:
9216366 查看本文章
在命令提示符中输入 node -v 和 npm -v 查看安装是否成功。
2. npm配置环境
① 打开Node.js安装目录,在安装目录中创建 node_global 和 node_cache 文件夹作为模块存放处和缓存。
② 设置模块存放文件夹和缓存文件夹。
// 设置缓存路径
npm config set cache "C:\Java\nodejs\node_cache"
// 设置模块存放路径
npm config set prefix "C:\Java\nodejs\node_global"
③ 由于npm会默认使用外国服务器的镜像,需要设置为国内镜像,使用的是淘宝镜像。
// 配置镜像站
npm config set registry=http://registry.npm.taobao.org
// 检查镜像站是否正常
npm config get registry
④ 安装cnpm,因为上面已经修改了默认镜像站,所以无需手动指向镜像站。
npm install -g cnpm
⑤ 配置环境变量。
// 在系统变量中 Path 条目新增路径
C:\Java\nodejs\node_global
// 新增系统变量 NODE_PATH
// 设置系统变量 NODE_PATH 路径
C:\Java\nodejs\node_modules
⑥ 重新打开命令提示符窗口,安装Vue-cli脚手架。执行完了第一条就执行第二条。
cnpm install @vue/cli -g
cnpm install @vue/cli-init -g
// 只要没有ERROR错误就是安装成功
// 检查Vue是否安装成功
vue --version
npm到此为止就算配置完毕了。
3. 命令行新建和打包项目
如果使用IDE,则无需以下操作。
① 因为创建项目命令会在当前工作路径创建项目,所以需要将工作路径跳转到创建项目的路径。
// 假设目标路径 C:\Java\workspace_vue
cd C:\Java\workspace_vue
// 创建项目,first_project是可以自定义的项目名
vue init webpack first_project
创建过程中会提示需要输入信息,如果没有特殊要求,一直按Enter键即可。