Vue系统环境搭建与配置(windows)
一、安装nodejs
node中文官方网站
选择官网最新的长期支持版本
二、安装nodeJS,个人建议不要安装在系统盘,之后一直默认点next直到安装完成。
三、设置nodejs prefix(全局)和cache(缓存)路径
1、在nodejs安装路径下,新建node_global和node_cache两个文件夹
2.设置设置缓存文件夹和全局模块存放路径
下面几步一定要以管理员身份运行!
下面几步一定要以管理员身份运行!
下面几步一定要以管理员身份运行!
2.1右击开始菜单,选择管理员运行
2.2设置缓存文件夹
npm config set cache "D:\vueProject\nodejs\node_cache
2.3设置全局模块存放路径
npm config set prefix "D:\vueProject\nodejs\node_global"
设置完成,之后npm install全局安装的模块都会存储在D:\vueProject\nodejs\node_global目录下
安装完成后检查C盘用户文件下的.npmrc文件,部分用户查看不到可以打开显示隐藏项目的开关
看到如图所示即表示配置成功
四、node自身的npm install收到科学上网的限制,下载安装速度较慢,可安装淘宝镜像(cnpm)替代npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后,一定要配置cnpm权限,否则会提示"npm\cnpm.ps1,因为在此系统上禁止运行脚本",很多博文没有提到,这点很重要
设置权限,输入A将权限改为[A]全是
set-ExecutionPolicy RemoteSigned
查询权限是否配置成功,如果是RemoteSigned则完成 否则重新配置即可
get-ExecutionPolicy
五、设置环境变量(非常重要)
说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径
1、鼠标右键"此电脑",选择“属性”菜单,在弹出的“系统”对话框中左侧选择“高级系统设置”,弹出“系统属性”对话框。
2、修改系统变量PATH
3、新增系统变量NODE_PATH
五、安装Vue
cnpm install vue -g
六、安装vue命令行工具,即vue-cli 脚手架
cnpm install vue-cli -g
七、VUE项目的创建
vue init webpack mytest
初始化完成后的项目目录结构如下:
3、安装工程依赖模块
定位到mytest的工程目录下,安装该工程依赖的模块,这些模块将被安装在:mytest\node_module目录下,node_module文件夹会被新建,而且根据package.json的配置下载该项目的modules
cd mytest
cnpm install
4、运行该项目,测试一下该项目是否能够正常工作,这种方式是用nodejs来启动。
cnpm run dev
复制http://localhost:8080打开网址