Vue 学习系列 - 01- 环境搭建（Win7）

Posted 2020-10-05 ㄌㄟ

1. 根据系统下载Node.js

下载地址：http://nodejs.cn/download

 

2. 安装Node.js

点击安装Node.js，在安装目录D:\Program Files\nodejs\下新建node_global和node_cache两个文件夹

设置global和cache

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

3. 安装cnpm

说明：由于许多npm包都是在国外，我们这里用到淘宝的镜像服务器，来对我们依赖的module进行安装，因此首先安装“中国的npm”——cnpm

安装命令：　

npm install -g cnpm --registry=https://registry.npm.taobao.org

　　

4. 环境变量设置

编辑用户变量“PATH”，在已有的变量后面加入英文“;”，然后添加“D:\Program Files\nodejs\node_global”
新增系统变量“NODE_PATH”，变量值为“D:\Program Files (x86)\Nodejs\node_global\node_modules”

 

5. 安装VUE
命令：npm install vue -g 或 cnpm install vue -g

 

6. 安装VUE命令行工具vue-cli

 

Vue-cli是VUE官方提供的一个命令行工具，使用vue-cli可以快速搭建大型单元应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。
命令：npm install vue-cli -g 或 cnpm install vue-cli -g

 

 

7. 创建工程

a. 新建一个基于webpack模板的工程
　在指定目录下，按住shift键同时右击鼠标在菜单中选择“Open command window here”,
　命令： vue init webpack mytest
　Project name：项目名称
　Project description：项目具体描述
　Author：作者
　Vue build：单个独立项目
　Install vue-router：Vue路由组件
　Use ESLint to lint you code：语法检查工具 ESLint
　Pick an ESLint preset：选择 ESLint 预设好的配置
　Setup unit tests with Karma + Mocha：安装单元测试工具 Karma + Mocha
　Setup e2e tests with Nightwatch：安装 Nightwatch 设置 e2e 测试
b. 定位到mytest文件夹
　命令：cd mytest
c. 安装该工程依赖的模块
　命令：npm install
d. 运行项目
　命令：npm run dev