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

本文目錄一覽：

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

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

鏈接：

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

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

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

（填寫合法 賬號和密碼 就可以訪問）

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

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

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

attributes屬性說明

事件名稱

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

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

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

三，multiContent.vue 該頁面為遞歸的所有children的Li的顯示，以及選中點擊事件

接下來就到需要引用的頁面了。

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

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

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

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

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

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

按照上面的配置，蹬~蹬~蹬~，之前頁面內(nèi)使用的組件就不報錯了，因為我這個demo是寫在vue-cli的vue-electron的模板下的，所以這里配置文件不一樣，請關(guān)注重點！

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

參考文檔：

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

項目需求：

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

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

table按照tableData這個數(shù)組的長度來生成多少行，按照有多少個el-table-column來生成多少列。

template slot-scope="scope"

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

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

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

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

mention！此時的filters方法，而不是filter。important：該方法與methods并列，否則報錯！

1.vue 項目搭建，基于element UI的pc端框架

vue list

vue init webpack 項目名稱

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項目 UI框架介紹（第六天上）

1.什么是elementUI?

ElementUI是餓了么前端團隊推出的一款基于Vue的桌面端UI框架

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

2.elementUI使用

3.elementUI優(yōu)化

默認情況下無論我們有沒有使用到某個組件, 在打包的時候都會將elementUI中所有的組件打包到我們的項目中

這樣就導(dǎo)致了我們的項目體積比較大, 用戶訪問比較慢

4.如何優(yōu)化

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

沒有用到的組件不會被打包

1.什么是MintUI?

MintUI是餓了么前端團隊推出的一款基于Vue的移動端U框架

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

2.mintUI使用

3.注意點: MintUI和ElementUI的第一個不同, 就是在MintUI中需要通過Vue.component來告訴Vue我們需要使用

1.什么是Vant?

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

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

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

那么如何將一個組件封裝成一個插件呢？

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

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

2.什么時候需要定義插件?

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

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

3.如果自定義一個插件?

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