vue-cli创建项目及父子模块
目录1.创建项目1.1 以管理身份打开cmd,进入项目将要放置的路径1.2 创建 vue init webpack 项目名称1.3 将项目在WebStorm中打开并启动2 入门2.1 父子页面2.1.1 APP.vue与HelloWorld关联2.1.2 APP.vue与hello2关联,在index.js中设置2.1.2 APP.vue与index关联3.vue-rouyer配置子路由3.1 导
·
目录
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页面:
更多推荐
已为社区贡献1条内容
所有评论(0)