懒加上没时间,终于要发第一篇有用的东西了,这一篇就写写正在做的数据统计系统~
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)
----
未完待续。