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

3,937 阅读1分钟
懒加上没时间,终于要发第一篇有用的东西了,这一篇就写写正在做的数据统计系统~

Vue.js 组件

  • "vue": "^1.0.15"
  • "vuex": "^1.0.0-rc.2"
  • "vue-resource": "^0.9.3"
  • "vue-router": "^0.7.13"
  • "vue-loader": "^8.0.0"

other

基本使用vue-cli init就全都有了,个人偏好加了less-loader, css-loader以及style-loader,然后差不多是酱紫:

.
├── README.md
├── build
│   ├── dev-server.js
│   ├── karma.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── dist
│   └── static
│       ├── statistics.417cbd195034f0a6c74fc9a9e56abe2c.css
│       ├── statistics.417cbd195034f0a6c74fc9a9e56abe2c.css.map
│       ├── statistics.6320c1bbd04a66c64ac1.js
│       ├── statistics.6320c1bbd04a66c64ac1.js.map
│       └── statistics.html
├── node_modules
├── package.json
├── src
│   ├── _assets
│   │   └── mtt.png
│   ├── _components
│   │   └── player.vue
│   ├── _directives
│   │   ├── echarts
│   │   │   ├── china.json
│   │   │   └── world.json
│   │   ├── echarts.js
│   │   └── pikaday.js
│   ├── _less
│   │   ├── component
│   │   │   ├── animation.less
│   │   │   ├── form.less
│   │   │   ├── normalize.less
│   │   │   ├── pager.less
│   │   │   ├── panel.less
│   │   │   ├── player.less
│   │   │   ├── post.less
│   │   │   ├── svgloader.less
│   │   │   └── timeline.less
│   │   └── v2
│   │       ├── base.less
│   │       ├── color.less
│   │       ├── fonts.less
│   │       └── utils.less
│   ├── _less-page
│   │   ├── error.less
│   │   └── global.less
│   └── statistics
│       ├── ChartView.vue
│       ├── PostView.vue
│       ├── PostsView.vue
│       ├── _component
│       │   ├── Chart.vue
│       │   └── Post.vue
│       ├── _store
│       │   ├── _api.js
│       │   ├── _chartData.js
│       │   ├── _chartList.js
│       │   ├── _chartSerializer.js
│       │   ├── actions.js
│       │   ├── getters.js
│       │   └── store.js
│       ├── app.vue
│       ├── backup
│       │   ├── PostsView.vue
│       │   └── echarts.vue
│       ├── entry.js
│       └── page.html
└── test
    └── unit
        ├── Hello.spec.js
        └── index.js

然后,小改动了一下page.html,来应对多个.html文件的处理,毕竟不是单独的spa应用






  
  _____   _   _   _____   __   _       ___   _____   _____   _____
  |_   _| | | | | /  _  \ |  \ | |     /   | |_   _| /  _  \ /  ___/
    | |   | |_| | | | | | |   \| |    / /| |   | |   | | | | | |___
    | |   |  _  | | | | | | |\   |   / / | |   | |   | | | | \___  \
    | |   | | | | | |_| | | | \  |  / /  | |   | |   | |_| |  ___| |
    |_|   |_| |_| \_____/ |_|  \_| /_/   |_|   |_|   \_____/ /_____/
    # mail: thonatos.yang@gmail.com
    # url: https://www.thonatos.com
  -->  
  
  
  
  
  
    
  
  {%=o.htmlWebpackPlugin.options.title%}    
  
  {% for (var css in o.htmlWebpackPlugin.files.css) { %}      
      
  {% } %}  


  
{% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %} {% } %}

接着,对应的build的conf文件也要改一下

// webpack.dev.conf.js

config.plugins = (config.plugins || []).concat([
  // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoErrorsPlugin(),
  // https://github.com/ampedandwired/html-webpack-plugin
  new HtmlWebpackPlugin({
    title: config.site.getName('Statistics'),
    filename: 'statistics.html',
    template: 'src/statistics/page.html',
    chunks: ['statistics']    
  })    
])

// 上面就是改动的地方了,如果有多个,就多写几个new HtmlWebpackPlugin()好了
// 其次是哪个config.site.getName是我自己写的一个function

基本的配置大概是这样了,接下来要写的就是具体的项目里用到的组件以及一些方法了

  • component
  • router (view/map)
  • directives 自定义指令
  • vuex (actions/getters/)
  • echarts (bar/line/pie/map)

----

未完待续。