webpack+vue項目實戰（三，配置功能操做頁和組件的按需加載）

1.前言

上篇文章（webpack+vue項目實戰（二，開發管理系統主頁面）），實現了，側邊欄的一個操做，點擊側邊欄的一些操做，最重要的就是路由的切換。看了上一篇的夥伴也不難發現，除了點擊側邊欄‘首頁’以外，點擊其它的都是白色的一片。緣由我想你們都知道，就是由於對應的組件文件沒有。而今天，就是要作那個對應的組件文件。

2.使用element-ui開發功能操做頁面

element-ui是什麼就很少解釋了，就是一個基於vue開發的一個組件庫。裏面有不少能夠用的組件，樣式也不錯。
好，介紹就到這，下面開始頁面的佈局。我是按照本身的想法弄的，畢竟，後臺的管理系統，不會有什麼設計圖，效果圖的，能用就好，練習的小夥伴也能夠發揮本身的想象。

開始動手了，首先我就挑一個‘回款管理’這個模塊吧！首頁在目錄上創建回款模塊的這個組件。

看到這個目錄，你們不要懵了哦，仍是以前那個目錄，只是如今這裏是在編輯器截圖而已。沒有改變，你們回想一下就知道了。

而後下一步就是配置這個文件的路由了！從上一篇文章知道回款模塊對應的url是‘/cash/cashList’。(下面的圖片截圖就是snav-component.vue這個文件，對應的就是menus這個數組變量，就是側邊欄數據)

而後去到router.js配置回款模塊的組件。

而後，在瀏覽器上，點擊回款管理的模塊，仍是白色的一片，沒有東西。由於cashList.vue這個文件沒有任何東西。
如今加上‘回款管理’，檢驗下，發現就正常，已經找到了這個組件。

路由怎麼找到這個組件的。第一篇已經說，路由匹配到了url，index.html中的<router-view></router-view>就輸出相對應的組件的內容。（在這裏栗子這裏，url是/cash/cashList，天然而然，輸出的組件就是cashList.vue。內容也就是這個組件文件裏面包含的內容，還沒理清關係的夥伴，如今複習下）

首頁是頭部，代碼就是這麼幾行，樣式我很少說了，都很簡單。按鈕仍是element-ui提供的組件。

<div class="cash-title">
    <span>回款管理</span>
</div>
<div class="cash-search">
    <span class="fs14 mr15">篩選:</span>
    <el-button type="primary" size="small" icon="search"></el-button>
    <el-button type="danger" size="small">重置</el-button>
</div>

而後就是列表。代碼比較多，可是不少都是重複的，這個基本都是element-ui提供的組件。el-table這個組件，你們能夠看下官網的具體使用，也比較簡單。

<div class="cash-table">
    <el-table :data="cashList" border style="width: 100%" highlight-current-row>
        <el-table-column label="編號" width="180">
            <template scope="scope">
                <a href="javascript:;">{{scope.row.cashId}}</a>
            </template>
        </el-table-column>
        
        <el-table-column label="客戶名稱" width="200">
            <template scope="scope">
                <span>{{ scope.row.custoName }}</span>
            </template>
        </el-table-column>
        ....
    </el-table>
</div>

cashList這個數據是我模擬的。我也發兩個，讓你們能夠進行測試下！你們也能夠隨意的模擬一下這個數據！

[
    {
        "cashId": "M2017062900049001",
        "ordId": "O2017062900075030",
        "cashType": 0,
        "payChannel": null,
        "payType": null,
        "cashStatus": 0,
        "custoName": "UFO",
        "userName": "陳",
        "userMobile": "16936025651",
        "merchandisers": "文",
        "cashAmount": 1832500,
        "cashDate": 1498718850000,
        "cashAccountType": 0,
        "payNo": null
    },
    {
        "cashId": "M2017062900049002",
        "ordId": "O2017062900075031",
        "cashType": 0,
        "payChannel": null,
        "payType": null,
        "cashStatus": 0,
        "custoName": "UFO",
        "userName": "天使",
        "userMobile": "13926085651",
        "merchandisers": "樂",
        "cashAmount": 1832500,
        "cashDate": 14987188558400,
        "cashAccountType": 0,
        "payNo": null
    }]

發現是否是一下的功夫，就把排版給搞定了(有些小細節仍是得本身動手，這個小夥伴本身動手操做吧)！這是固然的，由於樣式和組件的操做，element-ui都提供了，咱們須要作的，就是套一下數據。

3.其它頁面

而後，其它的功能頁面呢，也是這樣作！好比我挑一個‘開票管理’頁面吧！也是一樣的操做！

步驟1，建立文件invoiceList.vue

步驟2，在router.js中引入組件，配置路由

這個path的值怎麼獲得的？以前說過，看snav-component.vue。獲得對應的url。而後用這個url去router.js中配置。如今算是一個複習，小夥伴們記住了！（若是須要添加新頁面，在snav-component.vue，沒有記錄過的頁面，那麼就得在snav-component.vue加上頁面所對應的各類信息，而後再配置路由！）

步驟3，整理invoiceList.vue代碼
爲了方便看到測試結果，我把cashList.vue整個文件的內容，直接複製粘貼到剛剛新建的invoiceList.vue裏面，除了一個標題，其它都不改！

步驟4，看結果，在回款管理和開票管理來回切換，是否是就是正常顯示了！

還有一些頁面，我就不操做了！也是按照這個步驟，依葫蘆畫瓢！

4.按需加載

你們有沒有想到這個問題。好比，一開始訪問，只顯示和輸出了'首頁'的的組件（welcome.vue）。可是實際上，'回款管理'和'開票管理'的組件文件也是加載了。由於在router.js文件裏面import進來的時候，引入的都加載了！

如今只是三個文件，狀況還好。編譯後打包的大小，index.js仍是84.3k,(vendors.js是公用模塊，好比vue,vue-router這些文件,其它是熱刷新的文件。)

可是，若是之後須要引進100個，1000個組件文件呢！這下index.js的大小沒法預估！。因此下面引用按需加載來處理。寫法沒有什麼區別

而後查看結果。是否是小不少了，而後invoiceList.js和cashList.js是按需加載的，就是須要的時候才加載。這樣至少在體驗上是更好了！

魔法註釋的做用就是，好比前面用了/*webpackChunkName: "cashList"*/相應的文件，編譯出來就是命名爲'cashList.js'，不加就是‘1.js或者2.js，3.js’.

相關資料 路由懶加載，異步組件，代碼分離

5.未完待續

今天，到此爲止了。今天主要是利用vue-router實現了在單頁面不一樣的組件切換的一個功能，以及element-ui的簡單應用！這個也是單頁面應用的一個小模板或者模型了！若是想在項目上加其餘頁面，也是按照上面所說的方法！
按照步驟處理就好！今天作好的功能操做頁，好比‘回款管理’，‘開票管理’頁面，是一寫很簡單的展現頁面。
下篇文章或許會提到一些頁面上的一些操做開發。也會提到怎麼利用vue-resource來跟後臺進行數據的交互操做，前端又應該怎麼把數據展現在頁面上。

6.往期佔坑

若是看着有點懵的話，建議再看下我以前發的兩篇文章
webpack+vue項目實戰（一,搭建運行環境和相關配置）
webpack+vue項目實戰（二，開發管理系統主頁面）