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

endless_road 發(fā)布于2019-08-20 17:46 / 1312人閱讀

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

1.前言

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

2.使用element-ui開發(fā)功能操作頁面

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

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

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

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

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

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

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

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


    回款管理


    篩選:
    
    重置

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

cashList這個數(shù)據(jù)是我模擬的。我也發(fā)兩個，讓大家可以進行測試下！大家也可以隨意的模擬一下這個數(shù)據(jù)！

[
    {
        "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
    }]

發(fā)現(xiàn)是不是一下的功夫，就把排版給搞定了(有些小細節(jié)還是得自己動手，這個小伙伴自己動手操作吧)！這是當然的，因為樣式和組件的操作，element-ui都提供了，我們需要做的，就是套一下數(shù)據(jù)。

3.其它頁面

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

步驟1，創(chuàng)建文件invoiceList.vue

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

這個path的值怎么得到的？之前說過，看snav-component.vue。得到對應的url。然后用這個url去router.js中配置。現(xiàn)在算是一個復習，小伙伴們記住了！（如果需要添加新頁面，在snav-component.vue，沒有記錄過的頁面，那么就得在snav-component.vue加上頁面所對應的各種信息，然后再配置路由！）

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

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

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

4.按需加載

大家有沒有想到這個問題。比如，一開始訪問，只顯示和輸出了"首頁"的的組件（welcome.vue）。但是實際上，"回款管理"和"開票管理"的組件文件也是加載了。因為在router.js文件里面import進來的時候，引入的都加載了！

現(xiàn)在只是三個文件，情況還好。編譯后打包的大小，index.js還是84.3k,(vendors.js是公用模塊，比如vue,vue-router這些文件,其它是熱刷新的文件。)

但是，如果以后需要引進100個，1000個組件文件呢！這下index.js的大小無法預估！。所以下面引用按需加載來處理。寫法沒有什么區(qū)別

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

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

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

5.未完待續(xù)

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

6.往期占坑

如果看著有點懵的話，建議再看下我之前發(fā)的兩篇文章
webpack+vue項目實戰(zhàn)（一,搭建運行環(huán)境和相關配置）
webpack+vue項目實戰(zhàn)（二，開發(fā)管理系統(tǒng)主頁面）

GPU云服務器云服務器 webpack按需加載 vue組件 vue組件開發(fā) vue父子組件通訊

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

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

webpack+vue項目實戰(zhàn)（五，監(jiān)聽路由，實現(xiàn)同個頁面不同狀態(tài)的切換）

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

guyan0319 2019-08-20 17:47 評論0 收藏0
實現(xiàn)element-ui的按需引入，按需打包加載

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

TesterHome 2019-08-23 10:41 評論0 收藏0
webpack+vue項目實戰(zhàn)（四，前端與后端的數(shù)據(jù)交互和前端展示數(shù)據(jù)）

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

Yumenokanata 2019-08-20 17:47 評論0 收藏0
Vue組件庫開發(fā)總結

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

longshengwang 2019-08-23 18:16 評論0 收藏0
webpack4大結局：加入騰訊IM配置策略，實現(xiàn)前端工程化環(huán)境極致優(yōu)化

摘要：或者的，都會對其進行分析。舒適的開發(fā)體驗，有助于提高我們的開發(fā)效率，優(yōu)化開發(fā)體驗也至關重要組件熱刷新熱刷新自從推出熱刷新后，前端開發(fā)者在開環(huán)境下體驗大幅提高。實現(xiàn)熱調試后，調試流程大幅縮短，和普通非直出模式調試體驗保持一致。 showImg(https://segmentfault.com/img/bVbtOR3?w=1177&h=635); webpack，打包所有的資源不知道不...

李增田 2019-08-30 11:09 評論0 收藏0