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页面: