系列上一篇：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个想法