本篇文章給大家談?wù)別lementui項(xiàng)目模板，以及element ui模板對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、實(shí)戰(zhàn)項(xiàng)目：基于Vue第三方庫(kù)element-ui實(shí)現(xiàn)的金融后臺(tái)管理系統(tǒng)
• 2、vue-element-ui-Cascader 級(jí)聯(lián)選擇器支持多選---折騰記
• 3、關(guān)于element-ui的按需引入配置
• 4、關(guān)于vue中的過(guò)濾器使用--結(jié)合element-ui的table項(xiàng)
• 5、1.vue 項(xiàng)目搭建，基于element UI的pc端框架
• 6、Vue項(xiàng)目 UI框架介紹（第六天上）

實(shí)戰(zhàn)項(xiàng)目：基于Vue第三方庫(kù)element-ui實(shí)現(xiàn)的金融后臺(tái)管理系統(tǒng)

鏈接：

項(xiàng)目是 vue2.0 + element-ui + node+mongodb 構(gòu)建的 后臺(tái)管理系統(tǒng) ，所有的數(shù)據(jù)都是從服務(wù)器實(shí)時(shí)獲取的真實(shí)數(shù)據(jù)，具有真實(shí)的注冊(cè)、登錄、數(shù)據(jù)顯示、新增數(shù)據(jù)、修改數(shù)據(jù)、刪除數(shù)據(jù)等功能。

前端 ： vue2 + vuex + vue-router + webpack2.0 + ES6/7 + less + element-ui

服務(wù)端 ：nodejs + express + mongodb

（填寫(xiě)合法 賬號(hào)和密碼 就可以訪問(wèn)）

vue-element-ui-Cascader 級(jí)聯(lián)選擇器支持多選---折騰記

最新版本的element已經(jīng)有級(jí)聯(lián)多選功能了

吐槽一下，程序猿最不愿聽(tīng)到的話之一，（人家某某網(wǎng)站就做出來(lái)了，你怎么做不出來(lái)，簡(jiǎn)直喪心病狂）我最近一直在開(kāi)發(fā)基于vue-elementui的pc端項(xiàng)目，就碰到了來(lái)自產(chǎn)品的這句話，都有種拿起顯示器了。不過(guò)吐槽歸吐槽，項(xiàng)目還是要寫(xiě)的。。。。。。在本項(xiàng)目中產(chǎn)品提的一個(gè)需求，就是人家某某網(wǎng)站上有的，而element-ui上沒(méi)有，那就是Cascader 級(jí)聯(lián)選擇器，element-ui只支持單選，于是就開(kāi)始了折騰，再折騰了快一周的時(shí)間吧，還是沒(méi)搞出來(lái)，最后由于項(xiàng)目著急上線，只能暫時(shí)先放棄，所以就先擱置了，后來(lái)幸得于空，于是乎又是開(kāi)始折騰，畢竟也是自己的問(wèn)題。哎，不說(shuō)了，show time.

attributes屬性說(shuō)明

事件名稱(chēng)

options 菜單配置，就是完全按照elementui Cascader 的options的格式

一，index.vue 此頁(yè)面為主要出口文件，會(huì)發(fā)射出一個(gè)得到選中后的item的方法以及數(shù)組。

二，MulCheckCascader.vue //此頁(yè)面為基礎(chǔ)模板，會(huì)在該頁(yè)面引用遞歸出來(lái)的多選的item的字模板，并且該頁(yè)面會(huì)接受引用頁(yè)面?zhèn)鬟^(guò)來(lái)的數(shù)據(jù)，方便靈活控制尺寸，數(shù)據(jù)，是否禁用等的狀態(tài)。

三，multiContent.vue 該頁(yè)面為遞歸的所有children的Li的顯示，以及選中點(diǎn)擊事件

接下來(lái)就到需要引用的頁(yè)面了。

這個(gè)插件到此也就完成了，終于解決了這個(gè)深坑，希望能幫助到小伙伴們，有什么不足的大家多多提出寶貴的意見(jiàn)，共同探討，進(jìn)步。

關(guān)于element-ui的按需引入配置

前言：因?yàn)閯傞_(kāi)始搭建項(xiàng)目框架的時(shí)候比較急，那時(shí)候確認(rèn)要使用element-ui框架，就直接去官網(wǎng)照著安裝全局引入，最近項(xiàng)目結(jié)束后，發(fā)現(xiàn)首頁(yè)的加載速度有點(diǎn)小慢，就準(zhǔn)備將項(xiàng)目?jī)?nèi)的所有引入的element-ui組件全部歸類(lèi)出來(lái)，按需引入！怕忘記自己的這一套引入方式，因此記錄，廢話不多說(shuō)，上菜！

目錄結(jié)構(gòu)我就上傳了，本框架使用的是vue版本的，未轉(zhuǎn)換為ts版本！

先創(chuàng)建一個(gè)companyImport.js,將element-ui的樣式及所使用的組件全部引入，格式如下

然后進(jìn)入main.js文件中，將之前定義的文件引入，然后使用Vue.use(xxx)進(jìn)行全局聲明

按照上面的配置，蹬~蹬~蹬~，之前頁(yè)面內(nèi)使用的組件就不報(bào)錯(cuò)了，因?yàn)槲疫@個(gè)demo是寫(xiě)在vue-cli的vue-electron的模板下的，所以這里配置文件不一樣，請(qǐng)關(guān)注重點(diǎn)！

關(guān)于vue中的過(guò)濾器使用--結(jié)合element-ui的table項(xiàng)

參考文檔：

;depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

項(xiàng)目需求：

從接口中獲取數(shù)據(jù)，渲染顯示在表格中，且數(shù)據(jù)精度保留兩位小數(shù)。

在element-ui中表格的顯示中，插槽的具體使用。

table按照tableData這個(gè)數(shù)組的長(zhǎng)度來(lái)生成多少行，按照有多少個(gè)el-table-column來(lái)生成多少列。

template slot-scope="scope"

在el-table-column中使用自定義模板，實(shí)現(xiàn)對(duì)渲染數(shù)據(jù)的改變。

template中自定義列模板，自定義列的顯示內(nèi)容，可組合其他組件使用。

利用scope.row獲取該行中dataYoyYear所對(duì)應(yīng)的列值數(shù)據(jù)，進(jìn)而進(jìn)行修改。

拿到數(shù)據(jù)之后，就要結(jié)合vue的過(guò)濾器對(duì)數(shù)據(jù)進(jìn)行修改精度。

mention！此時(shí)的filters方法，而不是filter。important：該方法與methods并列，否則報(bào)錯(cuò)！

1.vue 項(xiàng)目搭建，基于element UI的pc端框架

vue list

vue init webpack 項(xiàng)目名稱(chēng)

npm install

npm run dev

npm i element-ui

import?ElementUI?from?'element-ui'

import?'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Vue項(xiàng)目 UI框架介紹（第六天上）

1.什么是elementUI?

ElementUI是餓了么前端團(tuán)隊(duì)推出的一款基于Vue的桌面端UI框架

大白話: 和Bootstrap一樣對(duì)原生的HTML標(biāo)簽進(jìn)行了封裝, 進(jìn)行了美化, 讓我們能夠?qū)Ｗ⒂跇I(yè)務(wù)邏輯而不是UI界面

2.elementUI使用

3.elementUI優(yōu)化

默認(rèn)情況下無(wú)論我們有沒(méi)有使用到某個(gè)組件, 在打包的時(shí)候都會(huì)將elementUI中所有的組件打包到我們的項(xiàng)目中

這樣就導(dǎo)致了我們的項(xiàng)目體積比較大, 用戶(hù)訪問(wèn)比較慢

4.如何優(yōu)化

為了解決這個(gè)問(wèn)題, elementUI推出了按需導(dǎo)入, 按需打包. 也就是只會(huì)將我們用到的組件打包了我們的項(xiàng)目中

沒(méi)有用到的組件不會(huì)被打包

1.什么是MintUI?

MintUI是餓了么前端團(tuán)隊(duì)推出的一款基于Vue的移動(dòng)端U框架

大白話:和Bootstrap一樣對(duì)原生的HTML標(biāo)簽進(jìn)行了封裝，讓我們能夠?qū)Ｗ⒂跇I(yè)務(wù)邏輯而不是UI界面

2.mintUI使用

3.注意點(diǎn): MintUI和ElementUI的第一個(gè)不同, 就是在MintUI中需要通過(guò)Vue.component來(lái)告訴Vue我們需要使用

1.什么是Vant?

在使用MintUI的過(guò)程中發(fā)現(xiàn)有很多的坑，所以個(gè)人不推薦在移動(dòng)端中選擇MintUIXant是有贊前端開(kāi)發(fā)團(tuán)隊(duì)又推出的一款 基于Vue的移動(dòng)端UI框架

大白話:和Bootstrap一樣對(duì)原生的HTML標(biāo)簽進(jìn)行了封裝，進(jìn)行了美化，讓我們能夠?qū)Ｗ⒂跇I(yè)務(wù)邏輯而不是UI界面

Vue.use只能use插件，不能use組件

那么如何將一個(gè)組件封裝成一個(gè)插件呢？

1.Vue.use()做了什么事情?

Vue.use的作用是注冊(cè)一個(gè)Vue插件(注冊(cè)組件), Vue.use必須在new Vue之前使用

2.什么時(shí)候需要定義插件?

當(dāng)某一個(gè)組件或者功能經(jīng)常需要被使用到時(shí), 我們就可以將這個(gè)組件或者功能定義成一個(gè)插件

例如: 網(wǎng)絡(luò)加載指示器

3.如果自定義一個(gè)插件?

關(guān)于elementui項(xiàng)目模板和element ui模板的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。