windows7系统搭建vue环境
2018-10-20 本文已影响0人
Dylan_Dong
- 一，安装node.js，去官网下载，建议不要安装在C盘，安装过程中可以选择安装路径，我的安装路径如图：
安装路径
安装成功后，在命令行输入node --version会显示当前安装的node.js版本 - 二，设置node.js prefix(全局)和cache(缓存)路径
新建node_global和node_cache两个文件夹，路径最好是英文，如图：
2.png
设置缓存文件夹：
npm config set cache "D:\DevelopmentPath\node_cache
设置全局模块存放路径：
npm config set prefix "D:\DevelopmentPath\node_global
设置成功后，之后用命令行npm install XXX -g安装的模块就在D:\DevelopmentPath\node_global里
在命令行输入npm --version,会输出当前的npm版本 - 三，基于node.js安装cnpm(淘宝镜像)
npm install -g cnpm --registry=https://registry.npm.taobao.org - 四，设置环境变量(非常重要)
说明：设置环境变量可以使得在任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径
1） 鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框
2） 修改系统变量path
系统变量1
系统变量2
3） 新增系统变量NODE_PATH
系统变量3
系统变量4
- 五，安装全局的webpack
npm install webpack –g - 六，安装vue脚手架vue-cli
npm install vue-cli –g
在命令行里输入vue --version,验证是否安装成功 - 七，找一个合适的位置存放你的vue工程，然后cd到该目录
- 八，创建项目
vue init webpack-simple 项目名
注：项目名不可以使用中文，也不能使用大写字母 - 九，将根目录切换到项目
cd 项目名，如：cd vue2demo - 十，安装项目依赖
npm install - 十一，安装 vue 路由模块vue-router和网络请求模块vue-resource
npm install vue-router vue-resource –save - 十二，启动项目
npm run dev
