系列上一篇:Webstorm IDE 的 es6 环境设置
前面的内容我们已经把项目创建好,并且把 IDE 也设置顺当了,现在我们开始编码。
我们可以看到目前的项目文件结构大概就是这个样子。
在这一篇里面,我直接将构造一个全功能的项目架构信息以及步骤列在这里。
1. 修改 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>地主淘后台管理</title>
<meta id="viewport" name="viewport"
content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body class="app {{routeBodyClass}}">
<router-view></router-view>
</body>
</html>
相比默认的版本,由于我们要启用 vue-router
,因此我们把 body 里面的所有内容换成了 <router-view>
,这样的话我们启动 vue-router
后,相关的视图就会注入在这里。
另外,注意我们在 body
的 class
里面加入了 {{routeBodyClass}}
,这段对应我们在入口 App.vue
里面填写的一个计算属性(后面会详述)。
routeBodyClass() {
return `app-${this.$route.name.replace(/_/g, '-')}`;
},
这用于将我们当前路由名称产生一个名称附着在 body 上面,这样我们可以用一个分级管理的样式去改变整个页面的外观。
例如,我们目前有一个页面路由名称是:shop_goods_detail
,那么我们的 body
就会有一个 app-shop-goods-detail
这样的 class
。
然后我们可以通过这样来定义我们的样式:
body[class*=app-shop] {
// 应用在所有 shop 路由对应下属的页面
}
body[class*=app-shop-goods] {
// 应用在所有 shop_goods 路由对应下属的页面
}
body.app-shop-goods-detail {
// 应用在 shop_goods_detail 这个页面
}
此外,我们还加了一个 viewport
,如果是移动端的项目,这很重要。
2. 重构我们的组件文件架构
【转载请附】愿以此功德,回向 >>
原文链接:http://www.huangwenchao.com.cn/2016/10/vuejs-practise-3.html【Vuejs SPA 项目实践(三):路由系统、Vuex和页面架构的建立】
《Vuejs SPA 项目实践(三):路由系统、Vuex和页面架构的建立》有1个想法