vue项目搭建以及环境变量的设置
一、安装node.js
1、官网地址:https://nodejs.org/zh-cn/
1、node安装后的设置(node_global和node_cache)
详细地址:https://blog.csdn.net/scorpio_meng/article/details/83314675
二、接下来就该设置nodejs prefix(全局)和cache(缓存)路径
1、在node的安装路径下创建两个文件夹:node_global和node_cache
2、设置选择缓存文件夹
npm config set cache "D:\Program Files\nodejs\node_cache"
设置全局模块存放路径
npm config set prefix "D:\Program Files\nodejs\node_global"
设置成功后,D:\Program Files\nodejs\node_global里会存放用命令npm install XXX -g安装以后的模块。
三、安装npm (或者安装cnpm,使用淘宝镜像)
因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,所以乐于分享的淘宝团队干了这事。来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”
执行命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
四、设置环境变量
1)鼠标右键"此电脑",选择“属性”菜单,在弹出的“系统”对话框中左侧选择“高级系统设置”,弹出“系统属性”对话框。
2)修改系统变量PATH
3)新增系统变量NODE_PATH
五、安装vue
执行命令:cnpm install vue -g
六、安装vue命令行工具,即vue-cli脚手架
执行命令:cnpm install vue-cli -g
七、创建新项目
1、打开开始菜单,输入 CMD,或使用快捷键 win+R,输入 CMD,敲回车,弹出命令提示符。打开你将要新建的项目目录
2、根据模版创建新项目
执行命令:vue init webpack 项目名称(使用英文)
3、初始化完成后的项目目录结构如下:
4、安装工程依赖模块
定位到mytest的工程目录下,安装该工程依赖的模块,这些模块将被安装在:mytest\node_module目录下,node_module文件夹会被新建,而且根据package.json的配置下载该项目的modules
执行命令:cnpm install
5、运行该项目,测试一下该项目是否能够正常工作,这种方式是用nodejs来启动
执行命令:cnpm run dev
项目启动成功如下图所示: