vue項(xiàng)目如何引入element?ui、iview和echarts
vue引入element ui、iview和echarts
記性不好，每次引入都要重新搜一遍，今天把幾個(gè)自己整理一下。全部引入，沒搞按需引入。
1.vue項(xiàng)目引入elementui
控制臺(tái)輸入npm install element-ui -s
main.js文件中輸入
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
2.vue項(xiàng)目中引入iview
控制臺(tái)輸入npm install iview -s
import iView from 'iview' // 引入ivew庫 import 'iview/dist/styles/iview.css' // 使用CSS Vue.use(iView)
3.vue項(xiàng)目中引入echarts
控制臺(tái)輸入npm install echarts -s
import * as echarts from 'echarts' // 導(dǎo)入echarts Vue.prototype.$echarts = echarts // 并設(shè)置對(duì)應(yīng)的屬性
4.main.js文件代碼截圖
5.echarts在引入后
需要使用echarts的頁面，還需要import一下
<script> import * as echarts from 'echarts' </script>
6.引入之后就可以使用他們的組件了
iview與elementui對(duì)比
表格
合并單元格
elementui中的table表格組件包含行列的合并單元格；iview的table表格組件只提供了表頭的合并單元格；如果表格涉及合并單元格建議使用elementui。（iview 4.0.0 之后設(shè)置屬性 span-method 可以指定合并行或列的算法。）
左表頭固定，可以左右滑動(dòng)時(shí)
iview給表格綁定高后，數(shù)據(jù)少會(huì)有空白；但是綁定max-height后，左右滑動(dòng)的左邊這一塊，會(huì)被遮蓋導(dǎo)致劃不動(dòng)
elemeui可以完美的解決數(shù)據(jù)多和少的時(shí)候的左右滑動(dòng)，表格多的時(shí)候建議使用elementui
風(fēng)格
ivew的整體風(fēng)格比較清新，適合后臺(tái)管理系統(tǒng)
按需引入
兩者都可以按需引入
表單驗(yàn)證
ivew的表單驗(yàn)證樣式；
elementui帶驗(yàn)證表單
iview帶驗(yàn)證表單
下拉選擇器
iview的下拉選擇器select的option是渲染在組件內(nèi)部，和elementui的渲染在body不一樣。如果頁面有幾百個(gè)selcet，會(huì)造成嚴(yán)重的卡頓，這種時(shí)候建議選擇elementui。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue 如何獲取視頻第一幀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue中在echarts里設(shè)置的定時(shí)器清除不掉問題及解決
這篇文章主要介紹了vue中在echarts里設(shè)置的定時(shí)器清除不掉問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue 路由懶加載，當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript 包會(huì)變得非常大，影響頁面加載，這便是vue 路由懶加載，接下來隨小編一起進(jìn)入文章了解更多詳細(xì)內(nèi)容吧2021-10-10
這篇文章主要給大家介紹了關(guān)于vue中axios封裝使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue3-vue-router創(chuàng)建靜態(tài)路由和動(dòng)態(tài)路由方式
這篇文章主要介紹了vue3-vue-router創(chuàng)建靜態(tài)路由和動(dòng)態(tài)路由方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家介紹了Vue中AXIOS的封裝，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要為大家詳細(xì)介紹了Vue2中多種常用全局自定義指令的封裝,包括一鍵復(fù)制,一鍵長(zhǎng)按,圖片懶加載等功能,感興趣的小伙伴可以了解下2025-02-02
如何寫好一個(gè)vue組件,老夫的一年經(jīng)驗(yàn)全在這了（推薦）
這篇文章主要介紹了如何寫好一個(gè)vue組件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue3?響應(yīng)式系統(tǒng)實(shí)現(xiàn)?computed
這篇文章主要介紹了?Vue3?響應(yīng)式系統(tǒng)實(shí)現(xiàn)?computed，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下2022-06-06
vue表單驗(yàn)證rules及validator驗(yàn)證器的使用方法實(shí)例
在vue開發(fā)中,難免遇到各種表單校驗(yàn),下面這篇文章主要給大家介紹了關(guān)于vue表單驗(yàn)證rules及validator驗(yàn)證器使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07