基于 Vue.js 的数据统计系统 (二)

上一篇介绍了基本的配置以及修改的内容，但是没有正式的说如何组织代码，这里明确一下，src目录里放着所有的非配置项内容，结构如下：

$ tree -L 1
.
├── _assets
├── _components
├── _directives
├── _less
├── _less-page
└── statistics

statistics是一个模块，统计系统的大部分功能是在这里完成，在该目录下有page.html以及entry.js来引入Vue.js所需要的插件、指令、components，并定义路由，最后webpack会根据模块名称编译并输出到static目录下的statistics.html、statistics.js、statistics.css三个文件
"_{{ name }}"命名的是公共组件（包括但不限于js），包含less，assets以及Vue.js的directives和components等内容

entry.js，相对简单，内容如下：

import Vue from 'vue'
import Router from 'vue-router'

import App from './app'
import PostsView from './PostsView'
import ChartView from './ChartView'
import PostView from './PostView'

import echarts from '../_directives/echarts'
import pikaday from '../_directives/pikaday'

import 'muicss/lib/css/mui.min.css'


// register directive
Vue.directive('echarts', echarts)
Vue.directive('pikaday', pikaday)

// install router
Vue.use(Router)

// routing
var router = new Router()

router.map({
  '/posts/:current': {
    component: PostsView
  },
  '/post/:pid': {
    component: PostView
  },
  '/chart/:cname': {
    component: ChartView
  }
})

router.beforeEach(function () {
  window.scrollTo(0, 0)
})

// 路由不存在时候会跳转到这里
router.redirect({
  '*': '/posts/1'
})

// 这里的#app是page.html中的元素id
// 所以App.vue中的template会替换#app的内容
router.start(App, '#app')

Vue.js的vue文件实际被vue-loader解析，所以大体结构是：






  @import '../../_less/v2/base';
  @import '../../_less/component/animation';
  .echart {
    padding: 1em 0;
    width: 100%;
    height: 100%;
    min-height: 700px;
  }

这部分套路是酱紫：

data () { return {} } 类似闭包的功能，这样组件被调用的时候，data是不共享的，当然你可以用 methods: {} 的形式来返回数据，文档里有提到过，这样的数据是被共享的，所以，建议呢，数据用 (){}，而方法用 {}，说的更明确一点就是不涉及数据变更的用对象，反之用func（js 万物皆对象这种鬼不用再说了，咱这不是为了讨论概念来的噻）

----

未完待续。

参考：