二話不說(shuō)，先放效果圖：

效果圖

先介紹一下這個(gè)試水的小項(xiàng)目，就是上次搞那個(gè)express文件路由：express-dir-route的產(chǎn)物，用于展示和測(cè)試文件路由的一個(gè)界面。
功能十分簡(jiǎn)單，就是左側(cè)是一個(gè)樹形圖，選中樹形圖可以在右側(cè)查看路由的詳細(xì)信息，并且給出測(cè)試接口和測(cè)試結(jié)果面板。
目前這個(gè)express-dir-route已經(jīng)扔到了npm上去了，這是它的github地址

關(guān)于Vue-cli

Vue-cli是vue官方搞出來(lái)的，基于webpack的vue單文件構(gòu)建工具。
一個(gè)大界面可以用無(wú)數(shù)個(gè)小小.vue文件組成，這個(gè)工具利用好，在切圖前，先按照功能劃分出一個(gè)個(gè)組件，每一個(gè)組件就是一個(gè).vue文件，然后你會(huì)發(fā)現(xiàn)按照這個(gè)流程開發(fā)，寫一個(gè)大界面就像搭積木一樣，十分簡(jiǎn)單、而且易于維護(hù)，更適合多人開發(fā)。
然后我是用微軟的vscode進(jìn)行開發(fā)，在插件里面搜索vue，可以找到一個(gè)讓.vue文件高亮的插件，安裝后：

代碼高亮的vue文件

關(guān)于文件結(jié)構(gòu)

功能十分簡(jiǎn)單，結(jié)構(gòu)也十分明了，因此我分成了五個(gè).vue文件：

• 左側(cè)樹形菜單：leftSide.vue
• 右側(cè)詳情界面：rightMain.vue
• 路由詳細(xì)信息：mainSection.vue
• 測(cè)試接口界面：test.vue
• 測(cè)試結(jié)果界面：result.vue

如圖所示

文件結(jié)構(gòu)

當(dāng)然這些都是不斷實(shí)踐不斷增刪之后的結(jié)果，一切都按照需要的來(lái)，怎么方便怎么簡(jiǎn)單就按照怎樣來(lái)。

關(guān)于ElementUI

ElementUI的主頁(yè)以及文檔;
ElementUI是餓了么前端開源的一個(gè)基于Vue的前端框架，已經(jīng)幫我們封裝好了一系列功能性的組件，比如柵格系統(tǒng)、表格、表單、樹形菜單、通知等。對(duì)于搞后臺(tái)管理界面的項(xiàng)目，特別是不需要考慮兼容ie8、ie9以下的項(xiàng)目、ElementUI是一個(gè)不錯(cuò)的選擇。
而且ElementUI的文檔寫得十分詳盡，參照demo可以很快上手。
如第一張圖所示，我這個(gè)界面總共用了ElementUI五個(gè)組件：

• table組件
• tree組件
• 消息提示message組件
• input輸入框組件
• button按鈕組件

一些踩到的坑

• 為什么我上面把我用到的組件都詳細(xì)列出來(lái)呢？因?yàn)镋lementUI是支持全部引入和按需引入的。這里我建議大家使用按需引入，也就是需要什么組件就引入什么：

  
  
  按需引入

小貼士：
如果你按照ElementUI官方文檔去npm install babel-plugin-component -D，那么按需引入才是綠色注釋里面的寫法。不然的話如上圖所示，一個(gè)個(gè)引入。
按需引入的好處不言而喻，將會(huì)大大減少你的代碼體積！而且跟上面一樣，引入代碼高亮包highlightjs和編譯md包marked也用這類寫法：

按需引入

特別是highlight.js，你直接import，它會(huì)將一堆亂七八糟你不需要的代碼高亮樣式、規(guī)則也打包進(jìn)來(lái)。

• 雖然是單文件開發(fā)，但是要記得，css的樣式都是打包在一起的，換句話說(shuō)，就是.vue文件的style標(biāo)簽里面樣式都是全局的。建議大家使用less或者sass這些預(yù)編譯語(yǔ)言去寫樣式，如果你還是堅(jiān)持使用css請(qǐng)切記，不要隨便在任何一個(gè).vue文件內(nèi)寫諸如:

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

這類看起來(lái)好像只作用于本文件里的h1標(biāo)簽的樣式，實(shí)際上，你一打包，可能你這個(gè)樣式就會(huì)覆蓋掉別的文件里面的h1樣式或者被覆蓋掉。正確的做法是在style標(biāo)簽里面添加scoped屬性：

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

這里感謝@藍(lán)狐鍋鍋dalao的指導(dǎo)，在.vue文件里面的style標(biāo)簽里添加scoped屬性將會(huì)讓此處的style變?yōu)樗接?/p>

亦或是使用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里面提供了這樣的寫法：

生產(chǎn)環(huán)境下打包

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
       }),
   ]
}

我這樣寫之后，打包完項(xiàng)目大小從5m多的js文件壓縮到了200多kb。。。問我那壓掉的4m多是啥？我可以明確地告訴你，一堆惡心的base64碼。
也希望能有人能告訴我，if里面的配置為啥不起作用？？？

打完包后的大小

• vue-cli的打包是打包到一個(gè)文件中去的，連同css樣式也會(huì)打包進(jìn)去，這里我們要分開打包，所以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對(duì)css進(jìn)行打包，將其打包到一個(gè)css文件上，然后將vue和vue-resource這類摘出來(lái)獨(dú)立打包。

寫在最后

最后我發(fā)現(xiàn)基本上大篇幅在說(shuō)Vue-cli，但是真的ElementUI沒有啥可以講的，就照著文檔對(duì)著組件輸入props或者調(diào)用method，很簡(jiǎn)單。
當(dāng)然在使用這五個(gè)組件的過程中還是覺得有些缺陷，不過也不多：

• 第一個(gè)是table組件，ElementUI的table組件雖說(shuō)提供了一個(gè)固定行或者固定列的功能，但是在實(shí)際使用中，如果這個(gè)table組件的寬度是定死的還好，一旦你的需求里有table要自適應(yīng)，那么在寬度的變動(dòng)，比如說(shuō)我這個(gè)項(xiàng)目的隱藏側(cè)欄，右側(cè)界面寬度發(fā)生變化，table底部的滑動(dòng)條不停的出現(xiàn)消失，導(dǎo)致table在這寬度變化的過程中出現(xiàn)抖動(dòng)，很影響體驗(yàn)。
• 第二個(gè)是tree組件，雖然提供了一個(gè)filter的方法，即使是查看了它的issues之后，我還是很納悶這個(gè)方法要怎么調(diào)用，希望能夠在文檔中給出一個(gè)demo。。。