資訊專欄INFORMATION COLUMN
摘要：但是實(shí)際上，回款管理和開票管理的組件文件也是加載了。所以下面引用按需加載來處理。是不是小很多了，然后和是按需加載的，就是需要的時(shí)候才加載。
1.前言
上篇文章（webpack+vue項(xiàng)目實(shí)戰(zhàn)（二，開發(fā)管理系統(tǒng)主頁(yè)面）），實(shí)現(xiàn)了，側(cè)邊欄的一個(gè)操作，點(diǎn)擊側(cè)邊欄的一些操作，最重要的就是路由的切換?？戳松弦黄幕锇橐膊浑y發(fā)現(xiàn)，除了點(diǎn)擊側(cè)邊欄‘首頁(yè)’之外，點(diǎn)擊其它的都是白色的一片。原因我想大家都知道，就是因?yàn)閷?duì)應(yīng)的組件文件沒有。而今天，就是要做那個(gè)對(duì)應(yīng)的組件文件。
2.使用element-ui開發(fā)功能操作頁(yè)面element-ui是什么就不多解釋了，就是一個(gè)基于vue開發(fā)的一個(gè)組件庫(kù)。里面有很多可以用的組件，樣式也不錯(cuò)。
好，介紹就到這，下面開始頁(yè)面的布局。我是按照自己的想法弄的，畢竟，后臺(tái)的管理系統(tǒng)，不會(huì)有什么設(shè)計(jì)圖，效果圖的，能用就好，練習(xí)的小伙伴也可以發(fā)揮自己的想象。
開始動(dòng)手了，首先我就挑一個(gè)‘回款管理’這個(gè)模塊吧！首頁(yè)在目錄上建立回款模塊的這個(gè)組件。
看到這個(gè)目錄，大家不要懵了哦，還是之前那個(gè)目錄，只是現(xiàn)在這里是在編輯器截圖而已。沒有改變，大家回想一下就知道了。
然后下一步就是配置這個(gè)文件的路由了！從上一篇文章知道回款模塊對(duì)應(yīng)的url是‘/cash/cashList’。(下面的圖片截圖就是snav-component.vue這個(gè)文件，對(duì)應(yīng)的就是menus這個(gè)數(shù)組變量，就是側(cè)邊欄數(shù)據(jù))
然后去到router.js配置回款模塊的組件。
然后，在瀏覽器上，點(diǎn)擊回款管理的模塊，還是白色的一片，沒有東西。因?yàn)?b>cashList.vue這個(gè)文件沒有任何東西。
現(xiàn)在加上‘回款管理’，檢驗(yàn)下，發(fā)現(xiàn)就正常，已經(jīng)找到了這個(gè)組件。
路由怎么找到這個(gè)組件的。第一篇已經(jīng)說，路由匹配到了url，index.html中的
就輸出相對(duì)應(yīng)的組件的內(nèi)容。（在這里栗子這里，url是/cash/cashList，自然而然，輸出的組件就是cashList.vue。內(nèi)容也就是這個(gè)組件文件里面包含的內(nèi)容，還沒理清關(guān)系的伙伴，現(xiàn)在復(fù)習(xí)下）
首頁(yè)是頭部，代碼就是這么幾行，樣式我不多說了，都很簡(jiǎn)單。按鈕還是element-ui提供的組件。
回款管理篩選:重置
然后就是列表。代碼比較多，但是很多都是重復(fù)的，這個(gè)基本都是element-ui提供的組件。el-table這個(gè)組件，大家可以看下官網(wǎng)的具體使用，也比較簡(jiǎn)單。
{{scope.row.cashId}} {{ scope.row.custoName }} ....
cashList這個(gè)數(shù)據(jù)是我模擬的。我也發(fā)兩個(gè)，讓大家可以進(jìn)行測(cè)試下！大家也可以隨意的模擬一下這個(gè)數(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)是不是一下的功夫，就把排版給搞定了(有些小細(xì)節(jié)還是得自己動(dòng)手，這個(gè)小伙伴自己動(dòng)手操作吧)！這是當(dāng)然的，因?yàn)闃邮胶徒M件的操作，element-ui都提供了，我們需要做的，就是套一下數(shù)據(jù)。
3.其它頁(yè)面然后，其它的功能頁(yè)面呢，也是這樣做！比如我挑一個(gè)‘開票管理’頁(yè)面吧！也是同樣的操作！
步驟1，創(chuàng)建文件invoiceList.vue
步驟2，在router.js中引入組件，配置路由
這個(gè)path的值怎么得到的？之前說過，看snav-component.vue。得到對(duì)應(yīng)的url。然后用這個(gè)url去router.js中配置?，F(xiàn)在算是一個(gè)復(fù)習(xí)，小伙伴們記住了！（如果需要添加新頁(yè)面，在snav-component.vue，沒有記錄過的頁(yè)面，那么就得在snav-component.vue加上頁(yè)面所對(duì)應(yīng)的各種信息，然后再配置路由?。?/strong>
步驟3，整理invoiceList.vue代碼
為了方便看到測(cè)試結(jié)果，我把cashList.vue整個(gè)文件的內(nèi)容，直接復(fù)制粘貼到剛剛新建的invoiceList.vue里面，除了一個(gè)標(biāo)題，其它都不改！
步驟4，看結(jié)果，在回款管理和開票管理來回切換，是不是就是正常顯示了！
還有一些頁(yè)面，我就不操作了！也是按照這個(gè)步驟，依葫蘆畫瓢！
4.按需加載大家有沒有想到這個(gè)問題。比如，一開始訪問，只顯示和輸出了"首頁(yè)"的的組件（welcome.vue）。但是實(shí)際上，"回款管理"和"開票管理"的組件文件也是加載了。因?yàn)樵?b>router.js文件里面import進(jìn)來的時(shí)候，引入的都加載了！
現(xiàn)在只是三個(gè)文件，情況還好。編譯后打包的大小，index.js還是84.3k,(vendors.js是公用模塊，比如vue,vue-router這些文件,其它是熱刷新的文件。)
但是，如果以后需要引進(jìn)100個(gè)，1000個(gè)組件文件呢！這下index.js的大小無法預(yù)估！。所以下面引用按需加載來處理。寫法沒有什么區(qū)別
然后查看結(jié)果。是不是小很多了，然后invoiceList.js和cashList.js是按需加載的，就是需要的時(shí)候才加載。這樣至少在體驗(yàn)上是更好了！
魔法注釋的作用就是，比如前面用了/*webpackChunkName: "cashList"*/相應(yīng)的文件，編譯出來就是命名為"cashList.js"，不加就是‘1.js或者2.js，3.js’.
5.未完待續(xù)相關(guān)資料 路由懶加載，異步組件，代碼分離
今天，到此為止了。今天主要是利用vue-router實(shí)現(xiàn)了在單頁(yè)面不同的組件切換的一個(gè)功能，以及element-ui的簡(jiǎn)單應(yīng)用！這個(gè)也是單頁(yè)面應(yīng)用的一個(gè)小模板或者模型了！如果想在項(xiàng)目上加其他頁(yè)面，也是按照上面所說的方法！
按照步驟處理就好！今天做好的功能操作頁(yè)，比如‘回款管理’，‘開票管理’頁(yè)面，是一寫很簡(jiǎn)單的展示頁(yè)面。
下篇文章或許會(huì)提到一些頁(yè)面上的一些操作開發(fā)。也會(huì)提到怎么利用vue-resource來跟后臺(tái)進(jìn)行數(shù)據(jù)的交互操作，前端又應(yīng)該怎么把數(shù)據(jù)展示在頁(yè)面上。
如果看著有點(diǎn)懵的話，建議再看下我之前發(fā)的兩篇文章
webpack+vue項(xiàng)目實(shí)戰(zhàn)（一,搭建運(yùn)行環(huán)境和相關(guān)配置）
webpack+vue項(xiàng)目實(shí)戰(zhàn)（二，開發(fā)管理系統(tǒng)主頁(yè)面）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83846.html
摘要：好了，閑話不多說今天要說的時(shí)利用監(jiān)聽路由的方式，實(shí)現(xiàn)同個(gè)頁(yè)面不同狀態(tài)的切換。只要等于，那么頁(yè)面就是待確認(rèn)回款頁(yè)面進(jìn)入待確認(rèn)回款頁(yè)面中，回款狀態(tài)的篩選標(biāo)簽要加上。 1.前言 今天發(fā)完這一篇，就要這個(gè)系列告一段落了！以后如果有什么要補(bǔ)充的會(huì)繼續(xù)補(bǔ)充！因?yàn)樵诤笈_(tái)管理項(xiàng)目上，搭建的話，主要就是這樣了！還有的一些是具體到交互的處理，那個(gè)是要根據(jù)后端的需求，來進(jìn)來比較細(xì)化的工作，我在這里就不說了！...
摘要：簡(jiǎn)單說明原理使用實(shí)現(xiàn)按需引入打包。這里采用多入口配置，實(shí)現(xiàn)各個(gè)功能模塊分別打包成一個(gè)文件，并使用將樣式進(jìn)行抽離后，按入口進(jìn)行打包為對(duì)應(yīng)的文件。只要在指定入口名為。這個(gè)相關(guān)配置已經(jīng)發(fā)布了包。 簡(jiǎn)單說明原理： 使用babel-plugin-component實(shí)現(xiàn)按需引入、打包。將webpack配置成多入口，保證最終打包的目錄結(jié)構(gòu)符合babel-plugin-component插件的要求，實(shí)...
摘要：簡(jiǎn)單點(diǎn)說呢，就是與后端的數(shù)據(jù)交互和怎么把數(shù)據(jù)展示出來，用到的資源主要是和，其它參考插件使用。當(dāng)時(shí)，加載中的提示就會(huì)出現(xiàn)。后端返回的數(shù)據(jù)如上圖，并不是所有的字段都是可以進(jìn)行搜索的字段。 1.前言 今天要做的，就是在上一篇文章的基礎(chǔ)上，進(jìn)行功能頁(yè)面的開發(fā)。簡(jiǎn)單點(diǎn)說呢，就是與后端的數(shù)據(jù)交互和怎么把數(shù)據(jù)展示出來，用到的資源主要是element-ui和vue-resource，其它參考（vue-...
摘要：組件庫(kù)開發(fā)總結(jié)由于工作需要，最近在學(xué)習(xí)怎么開發(fā)一個(gè)組件庫(kù)。按需打包的使用要使用按需打包，不僅組件庫(kù)的打包需要做處理，項(xiàng)目中也需要做處理。 Vue組件庫(kù)開發(fā)總結(jié) 由于工作需要，最近在學(xué)習(xí)怎么開發(fā)一個(gè)Vue組件庫(kù)。主要需要實(shí)現(xiàn)以下點(diǎn)：1.組件使用npm包引入2.實(shí)現(xiàn)按需引入及按需打包項(xiàng)目中許多實(shí)現(xiàn)是參考的element-ui，特別是webpack打包部分 組織項(xiàng)目 項(xiàng)目生成 項(xiàng)目生成是直接...
閱讀 2076·2023-04-26 02:15
閱讀 2324·2021-11-19 09:40
閱讀 1083·2021-10-27 14:13
閱讀 3357·2021-08-23 09:44
閱讀 3650·2019-12-27 12:24
閱讀 681·2019-08-30 15:53
閱讀 1200·2019-08-30 10:53
閱讀 2189·2019-08-26 12:14
