- 下载node.js
node.js下载 ,选择长期维护版 - 安装NODE,直接全部默认,不要安装在C盘
- 设置NODE
在nodejs安装路径下,新建node_global和node_cache两个文件夹,这是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以创建,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。一般放在了 node的安装目录下
创建完两个文件夹之后,打开cmd窗口
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
设置环境变量,关闭cmd窗口,“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”
在【系统变量】下新建【NODE_PATH】,输入【D:\Program Files\nodejs\node_modules】,将【用户变量】下的【Path】中的【C:\Users\用户名\AppData\Roaming\npm】修改为【D:\Program Files\nodejs\node_global】
更改npm的镜像以及安装cnpm,因为npm的原镜像是在国外,使用起来可能会很慢,所以需要更改到国内的淘宝镜像
npm config set registry https://registry.npm.taobao.org
查看命令为 npm config get registry
安装cnpm包管理器(可不安装,不建议使用cnpm)
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装VUE
npm install vue -g # -g 是全局安装的意思
安装完成后检查确保vue安装在了全局模块目录:
安装vue-cli(已废弃,vue-cli高版本已更名为@vue/cli)
npm install -g vue-cli(高版本已弃用)
npm install -g @vue/cli
安装webpack及webpack-cli
npm install -g webpack
npm install -g webpack-cli
创建新项目(已废弃,vue-cli创建项目的方法)
新建project文件夹,进入project目录下。通过webpack模板创建新项目,假设新项目名称为test01:vue init webpack test01
接下来的提示根据情况选择默认值或选择yes ,no
创建完成后如下图所示:
根据提示,进入test01目录,通过命令npm run dev启动示例,在浏览器中输入地址:http://localhost:8080,即可看到示例页面
Ctrl+C可停止服务器实例,至此 VUE环境已搭建完成
创建新项目(@vue/cli创建项目)
操作命令:vue create vue-test01 根据提示,一步步完成即可