国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

endless_road / 1301人閱讀

摘要：但是實際上，回款管理和開票管理的組件文件也是加載了。所以下面引用按需加載來處理。是不是小很多了，然后和是按需加載的，就是需要的時候才加載。

1.前言

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

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

element-ui是什么就不多解釋了，就是一個基于vue開發的一個組件庫。里面有很多可以用的組件，樣式也不錯。
好，介紹就到這，下面開始頁面的布局。我是按照自己的想法弄的，畢竟，后臺的管理系統，不會有什么設計圖，效果圖的，能用就好，練習的小伙伴也可以發揮自己的想象。

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

看到這個目錄，大家不要懵了哦，還是之前那個目錄，只是現在這里是在編輯器截圖而已。沒有改變，大家回想一下就知道了。

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

然后去到router.js配置回款模塊的組件。

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

路由怎么找到這個組件的。第一篇已經說，路由匹配到了url，index.html中的就輸出相對應的組件的內容。（在這里栗子這里，url是/cash/cashList，自然而然，輸出的組件就是cashList.vue。內容也就是這個組件文件里面包含的內容，還沒理清關系的伙伴，現在復習下）

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


    回款管理

然后就是列表。代碼比較多，但是很多都是重復的，這個基本都是element-ui提供的組件。el-table這個組件，大家可以看下官網的具體使用，也比較簡單。


    
        
            
        
        
        
            
        
        ....

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項目實戰（二，開發管理系統主頁面）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83846.html

相關文章

  • webpack+vue項目實戰（五，監聽路由，實現同個頁面不同狀態的切換）

    摘要：好了，閑話不多說今天要說的時利用監聽路由的方式，實現同個頁面不同狀態的切換。只要等于，那么頁面就是待確認回款頁面進入待確認回款頁面中，回款狀態的篩選標簽要加上。 1.前言 今天發完這一篇，就要這個系列告一段落了！以后如果有什么要補充的會繼續補充！因為在后臺管理項目上，搭建的話，主要就是這樣了！還有的一些是具體到交互的處理，那個是要根據后端的需求，來進來比較細化的工作，我在這里就不說了！...

    guyan0319 評論0 收藏0

  • 實現element-ui的按需引入，按需打包加載

    摘要：簡單說明原理使用實現按需引入打包。這里采用多入口配置，實現各個功能模塊分別打包成一個文件，并使用將樣式進行抽離后，按入口進行打包為對應的文件。只要在指定入口名為。這個相關配置已經發布了包。 簡單說明原理： 使用babel-plugin-component實現按需引入、打包。將webpack配置成多入口，保證最終打包的目錄結構符合babel-plugin-component插件的要求，實...

    TesterHome 評論0 收藏0

  • webpack+vue項目實戰（四，前端與后端的數據交互和前端展示數據）

    摘要：簡單點說呢，就是與后端的數據交互和怎么把數據展示出來，用到的資源主要是和，其它參考插件使用。當時，加載中的提示就會出現。后端返回的數據如上圖，并不是所有的字段都是可以進行搜索的字段。 1.前言 今天要做的，就是在上一篇文章的基礎上，進行功能頁面的開發。簡單點說呢，就是與后端的數據交互和怎么把數據展示出來，用到的資源主要是element-ui和vue-resource，其它參考（vue-...

    Yumenokanata 評論0 收藏0

  • Vue組件庫開發總結

    摘要：組件庫開發總結由于工作需要，最近在學習怎么開發一個組件庫。按需打包的使用要使用按需打包，不僅組件庫的打包需要做處理，項目中也需要做處理。 Vue組件庫開發總結 由于工作需要，最近在學習怎么開發一個Vue組件庫。主要需要實現以下點：1.組件使用npm包引入2.實現按需引入及按需打包項目中許多實現是參考的element-ui，特別是webpack打包部分 組織項目 項目生成 項目生成是直接...

    longshengwang 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<