【Vue 学习系列 - 01】- 环境搭建(Win7)

时间:2021-10-03 16:26:24

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