es6+webpack+vue项目实践

最近开发一个铜盘功能，用了以上的技术栈开发。有一些心得可以记录下来。包括写的模块的经验。

构建

后台是用Java实现，使用velocity模板。目录结构

---webapp
|-----resource
|--------init            // 初始js文件
|--------src
|-----------business     // 业务vue组件
|-----------components   // 基础vue组件
|--------stylesheets
|-----------style.css    // 基础css样式
|-----WEB-INF
|--------view               // velocity
|-----------include         // 公用velocity模板
|-----------xxx.vm          // 业务velocity

以上是基础目录结构，现在开始构建前端环境。

配置npm

（以下配置行为的前提是该项目没有配置过）

执行 npm init 配置，按要求填写配置内容。生成pakcage.json。

安装库，包括：

(请不要复制)

vue库:
npm install vue, vue-hot-reload-api, vue-html-loader, vue-resource, vue-router, vue-style-loader

webpack库:
npm install webpack, webpack-dev-server

css库:
npm install style-loader, stylus, stylus-loader, css-loader

gulp库:
npm install gulp

es6支持库:
npm install babel-core, babel-loader, babel-plugin-transform-runtime, babel-preset-es2015, babel-runtime, es6-promise

jquery库:
npm install jquery

配置webpack

var vue = require('vue-loader');
var webpack = require('webpack');
var path = require('path');

var paths = {
    src: './resources/src/',
    dist: './resources/dist/'
};

module.exports = {
    entry: {
        'fileList': paths.src + 'business/fileList/app.js',
        'uploadFile': paths.src + 'business/uploadFile/app.js'
        // 'interface': paths.src + 'javascripts/interface.js'
    },
    output: {
        path: paths.dist + 'business',
        publicPath: paths.dist + 'business',
        filename: '[name].js'
    },
    resolve: {
        extensions: ['', '.js', '.vue', '.styl'],
        alias: {
              'src': path.resolve(__dirname, './resources')
        }
      },
      resolveLoader: {
        root: path.join(__dirname, 'node_modules'),
      },
    module: {
        loaders: [{
            test: /\.vue$/,
            loader: 'vue'
        }, {
            test: /\.js$/,
            exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
            loader: 'babel'
        }, {
            // edit this for additional asset file types
            test: /\.(png|jpg|gif)$/,
            loader: 'url',
            query: {
                // inline files smaller then 10kb as base64 dataURL
                limit: 10000,
                // fallback to file-loader with this naming scheme
                name: '[name].[ext]?[hash]'
            }
        }, {
            test: /\.styl$/,
            loader: 'style-loader!css-loader!stylus-loader'
        }]
    },
    babel: {
        presets: ['es2015'],
        plugins: ['transform-runtime']
    },
    // 如果要全部都用jQuery，就用插件的方法加载jQuery，代码在下面