0.查看环境

0.1 node -v

0.2 npm -v

0.3 使用淘宝镜像

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

0.4 cnpm -v

0.5 全局安装vue-cli

npm install --global vue-cli

1.创建项目

1.1 以管理身份打开cmd，进入项目将要放置的路径

1.2 创建 vue init webpack 项目名称

创建完成之后的目录

1.3 将项目在WebStorm中打开并启动

2 父子页面

2.1APP.vue与HelloWorld关联

APP.vue是helloWorld的父页面，在index.js中设置
APP.vue:
页面路由

HelloWorld页面

index.js：

运行：

2.2 APP.vue与hello2关联，在index.js中设置

hello2页面：

index.js:

运行：http://localhost:8080/#/

运行：http://localhost:8080/#/hello

2.3 APP.vue与index关联

3.vue-rouyer配置子路由

3.1 导航

index.vue:
路径根据index.js配置为准

index,js:

运行：

点击触发：

3.2 将hi1和hi2加入到hi模板中,单页面中的2个子页面

1.创建hi,Hi1和Hi2页面
hi页面：

hi1页面：

hi2页面：

配置：

运行：

点击去hi1页面：

点击去hi2页面：