nodejs下载地址https://nodejs.org/en/download/
历史版本下载地址https://nodejs.org/en/download/releases/
(由于新版本node已经弃用 --global
, --local
)
打开node安装目录,编辑npm.cmd,将prefix --g
修改为prefix --location=global
在node的安装目录创建两个文件夹
node_cache
(缓存文件夹)
node_global
(全局模块存放文件夹)
设置node缓存文件夹npm config --location=global set cache "C:\Program Files\nodejs\node_cache"
设置node全局模块文件夹npm config --location=global set prefix "C:\Program Files\nodejs\node_global"
配置node全局模块环境变量(由于 node 全局模块大多数都是可以通过命令行访问的,所以把(node_global)的路径添加进环境变量)
cmd中输入sysdm.cpl
打开系统属性
新增变量NODE_PATH
国内访问不通畅,可以更改cnmp(淘宝镜像,大约10分钟同步一次官方镜像。有办法解决访问问题的可以忽略这一步)
npm install --location=global cnpm --registry=https://registry.npm.taobao.org
至此node安装完成
npm install vue --location=global
如安装cnpm可使用cnpm安装cnpm install vue --location=global
安装vue命令行工具,即vue-cli 脚手架
npm install vue-cli --location=global
如安装cnpm可使用cnpm安装cnpm install vue-cli --location=global
安装完成
使用模板创建项目
在想要创建项目的位置,地址栏输入cmd回车
CHCP 65001
(更改cmd当前编码为UTF8,解决cmd控制台乱码情况)
vue init webpack-simple demo
(demo即为项目名称),然后有提示就一路回车就行,目录下新增名为demo的项目
内部文件夹说明
安装工程依赖模块
定位到demo的工程目录下,安装该工程依赖的模块,这些模块将被安装在:demo\node_module目录下,node_module文件夹会被新建,而且根据package.json的配置下载该项目的modules
cd demo
npm install
用nodejs运行一下该项目,测试一下能否启动
npm run dev
运行完后会自动打开网页
如若没有自动打开网页,在浏览器地址栏输入http://localhost:8080/查看是否运行成功。
至此NODEJS+VUE环境搭建完成