二話不說，先放效果圖：

效果圖

先介紹一下這個試水的小項目，就是上次搞那個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。。。