vue-cli创建项目及父子模块

1.创建项目

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

1.2 创建 vue init webpack 项目名称

vue-cli创建项目及父子模块

创建完成之后的目录
vue-cli创建项目及父子模块

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

vue-cli创建项目及父子模块

2 父子页面

2.1APP.vue与HelloWorld关联

vue-cli创建项目及父子模块
APP.vue是helloWorld的父页面,在index.js中设置
APP.vue:
页面路由
vue-cli创建项目及父子模块
HelloWorld页面
vue-cli创建项目及父子模块
index.js:
vue-cli创建项目及父子模块
运行:
vue-cli创建项目及父子模块

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

hello2页面:
vue-cli创建项目及父子模块
index.js:
vue-cli创建项目及父子模块
运行:http://localhost:8080/#/

vue-cli创建项目及父子模块

运行:http://localhost:8080/#/hellovue-cli创建项目及父子模块

2.3 APP.vue与index关联

vue-cli创建项目及父子模块
vue-cli创建项目及父子模块

3.vue-rouyer配置子路由

3.1 导航

index.vue:
路径根据index.js配置为准
vue-cli创建项目及父子模块
index,js:
vue-cli创建项目及父子模块
运行:
vue-cli创建项目及父子模块
点击触发:
vue-cli创建项目及父子模块
vue-cli创建项目及父子模块

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

1.创建hi,Hi1和Hi2页面
hi页面:
vue-cli创建项目及父子模块
hi1页面:
vue-cli创建项目及父子模块
hi2页面:
vue-cli创建项目及父子模块
配置:
vue-cli创建项目及父子模块
vue-cli创建项目及父子模块
vue-cli创建项目及父子模块

运行:
vue-cli创建项目及父子模块
点击去hi1页面:
vue-cli创建项目及父子模块
点击去hi2页面:
vue-cli创建项目及父子模块