二话不说，先放效果图：

效果图

先介绍一下这个试水的小项目，就是上次搞那个express文件路由：express-dir-route的产物，用于展示和测试文件路由的一个界面。
功能十分简单，就是左侧是一个树形图，选中树形图可以在右侧查看路由的详细信息，并且给出测试接口和测试结果面板。
目前这个express-dir-route已经扔到了npm上去了，这是它的github地址

关于Vue-cli

Vue-cli是vue官方搞出来的，基于webpack的vue单文件构建工具。
一个大界面可以用无数个小小.vue文件组成，这个工具利用好，在切图前，先按照功能划分出一个个组件，每一个组件就是一个.vue文件，然后你会发现按照这个流程开发，写一个大界面就像搭积木一样，十分简单、而且易于维护，更适合多人开发。
然后我是用微软的vscode进行开发，在插件里面搜索vue，可以找到一个让.vue文件高亮的插件，安装后：

代码高亮的vue文件

关于文件结构

功能十分简单，结构也十分明了，因此我分成了五个.vue文件：

• 左侧树形菜单：leftSide.vue
• 右侧详情界面：rightMain.vue
• 路由详细信息：mainSection.vue
• 测试接口界面：test.vue
• 测试结果界面：result.vue

如图所示

文件结构

当然这些都是不断实践不断增删之后的结果，一切都按照需要的来，怎么方便怎么简单就按照怎样来。

关于ElementUI

ElementUI的主页以及文档;
ElementUI是饿了么前端开源的一个基于Vue的前端框架，已经帮我们封装好了一系列功能性的组件，比如栅格系统、表格、表单、树形菜单、通知等。对于搞后台管理界面的项目，特别是不需要考虑兼容ie8、ie9以下的项目、ElementUI是一个不错的选择。
而且ElementUI的文档写得十分详尽，参照demo可以很快上手。
如第一张图所示，我这个界面总共用了ElementUI五个组件：

• table组件
• tree组件
• 消息提示message组件
• input输入框组件
• button按钮组件

一些踩到的坑

• 为什么我上面把我用到的组件都详细列出来呢？因为ElementUI是支持全部引入和按需引入的。这里我建议大家使用按需引入，也就是需要什么组件就引入什么：

  
  
  按需引入

小贴士：
如果你按照ElementUI官方文档去npm install babel-plugin-component -D，那么按需引入才是绿色注释里面的写法。不然的话如上图所示，一个个引入。
按需引入的好处不言而喻，将会大大减少你的代码体积！而且跟上面一样，引入代码高亮包highlightjs和编译md包marked也用这类写法：

按需引入

特别是highlight.js，你直接import，它会将一堆乱七八糟你不需要的代码高亮样式、规则也打包进来。

• 虽然是单文件开发，但是要记得，css的样式都是打包在一起的，换句话说，就是.vue文件的style标签里面样式都是全局的。建议大家使用less或者sass这些预编译语言去写样式，如果你还是坚持使用css请切记，不要随便在任何一个.vue文件内写诸如:

<template>
    <h1>hello world</h1>
</template>
<style>
    h1{
        font-size:18px;
        color:#66ccff;
    }
</style>
<script>
    /**/
</script>

这类看起来好像只作用于本文件里的h1标签的样式，实际上，你一打包，可能你这个样式就会覆盖掉别的文件里面的h1样式或者被覆盖掉。正确的做法是在style标签里面添加scoped属性：

<template>
    <h1 class="demo_h1">hello world</h1>
</template>
<style scoped>
    h1{
        font-size:18px;
        color:#66ccff;
    }
</style>
<script>
    /**/
</script>

这里感谢@蓝狐锅锅dalao的指导，在.vue文件里面的style标签里添加scoped属性将会让此处的style变为私有

亦或是使用class类名：

<template>
    <h1 class="demo_h1">hello world</h1>
</template>
<style scoped>
   .demo_h1{
        font-size:18px;
        color:#66ccff;
    }
</style>
<script>
    /**/
</script>

• webpack打包方面，虽然vue-cli的webpack.config.js里面提供了这样的写法：

生产环境下打包

module.exports={
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  /*省略一堆。。。*/
   devtool: '#source-map',
   plugins: [
       new ExtractTextPlugin("[name].css"),
       new webpack.optimize.CommonsChunkPlugin({ name: 'vue', minChunks: 2 }),
       new webpack.DefinePlugin({
           'process.env': {
               NODE_ENV: '"production"'
           }
       }),
       new webpack.optimize.UglifyJsPlugin({
           sourceMap: true,
           comments: false,
           compress: {
               warnings: false
           }
       }),
       new webpack.LoaderOptionsPlugin({
           minimize: true
       }),
   ]
}

我这样写之后，打包完项目大小从5m多的js文件压缩到了200多kb。。。问我那压掉的4m多是啥？我可以明确地告诉你，一堆恶心的base64码。
也希望能有人能告诉我，if里面的配置为啥不起作用？？？

打完包后的大小

• vue-cli的打包是打包到一个文件中去的，连同css样式也会打包进去，这里我们要分开打包，所以webpack的配置可以这样弄：

module.exports={
  entry: {
    main: './src/main.js',
    vue: ['vue', 'vue-resource']
},
output: {
    path: path.resolve(__dirname, './doc/dist'),
    publicPath: '/doc/dist/',
    filename: '[name].js'
},
module: {
    rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                    loaders: {
                            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
                            // the "scss" and "sass" values for the lang attribute to the right configs here.
                            // other preprocessors should work out of the box, no loader config like this nessessary.
                            'css': ExtractTextPlugin.extract('css-loader'),
                            'scss': 'vue-style-loader!css-loader!sass-loader',
                            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
                    }
                    // other vue-loader options go here
            }
    }, {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
    }, {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader' })
    }, {
            test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
            loader: 'file-loader'
    }, {
            test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
            loader: 'file-loader',
            query: {
                    name: '[name].[ext]?[hash]'
            }
    }]
},
plugins:[
    new ExtractTextPlugin("[name].css"),
    /*省略其他插件...*/
]
/*省略其他配置...*/
}

利用插件extract-text-webpack-plugin对css进行打包，将其打包到一个css文件上，然后将vue和vue-resource这类摘出来独立打包。

写在最后

最后我发现基本上大篇幅在说Vue-cli，但是真的ElementUI没有啥可以讲的，就照着文档对着组件输入props或者调用method，很简单。
当然在使用这五个组件的过程中还是觉得有些缺陷，不过也不多：

• 第一个是table组件，ElementUI的table组件虽说提供了一个固定行或者固定列的功能，但是在实际使用中，如果这个table组件的宽度是定死的还好，一旦你的需求里有table要自适应，那么在宽度的变动，比如说我这个项目的隐藏侧栏，右侧界面宽度发生变化，table底部的滑动条不停的出现消失，导致table在这宽度变化的过程中出现抖动，很影响体验。
• 第二个是tree组件，虽然提供了一个filter的方法，即使是查看了它的issues之后，我还是很纳闷这个方法要怎么调用，希望能够在文档中给出一个demo。。。