Vuejs SPA 项目实践(三):路由系统、Vuex和页面架构的建立

系列上一篇: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 后,相关的视图就会注入在这里。

另外,注意我们在 bodyclass 里面加入了 {{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. 重构我们的组件文件架构


【转载请附】愿以此功德,回向 >>

原文链接:https://www.huangwenchao.com.cn/2016/10/vuejs-practise-3.html【Vuejs SPA 项目实践(三):路由系统、Vuex和页面架构的建立】

《Vuejs SPA 项目实践(三):路由系统、Vuex和页面架构的建立》有1个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注