vue項(xiàng)目如何引入element?ui、iview和echarts
vue引入element ui、iview和echarts
記性不好，每次引入都要重新搜一遍，今天把幾個(gè)自己整理一下。全部引入，沒(méi)搞按需引入。
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庫(kù) 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的頁(yè)面，還需要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不一樣。如果頁(yè)面有幾百個(gè)selcet，會(huì)造成嚴(yán)重的卡頓，這種時(shí)候建議選擇elementui。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js 利用v-for中的index值實(shí)現(xiàn)隔行變色
這篇文章主要介紹了Vue.js 利用v-for中的index值實(shí)現(xiàn)隔行變色效果，首先定義好樣式，利用v-for中的index值，然后綁定樣式來(lái)實(shí)現(xiàn)隔行變色,需要的朋友可以參考下2018-08-08
組件（Component）是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。這篇文章主要介紹了vue.js 中的組件，需要的朋友參考下2018-02-02
這篇文章主要介紹了如何修改Vue打包后文件的接口地址配置的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了vue事件處理原理及過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-03-03
Vite3 Svelte3構(gòu)建Web應(yīng)用報(bào)錯(cuò)process is not def
這篇文章主要介紹了Vite3 Svelte3構(gòu)建Web應(yīng)用報(bào)錯(cuò)：'process is not defined'解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vue使用Tinymce富文本自定義toolbar按鈕的實(shí)踐
本文主要介紹了Vue使用Tinymce富文本自定義toolbar按鈕，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要給大家介紹的是vue-cli 介紹與安裝，vue-cli是和vue進(jìn)行深度組合的工具，可以快速幫我們創(chuàng)建vue項(xiàng)目，并且把一些腳手架相關(guān)的代碼給我們創(chuàng)建好。真正使用vue開(kāi)發(fā)項(xiàng)目，都是用vue-cli來(lái)創(chuàng)建項(xiàng)目的，下面文章詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-10-10
利用Vue模擬實(shí)現(xiàn)element-ui的分頁(yè)器效果
這篇文章主要為大家詳細(xì)介紹了如何利用Vue模擬實(shí)現(xiàn)element-ui的分頁(yè)器效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手嘗試一下2022-11-11
這篇文章主要介紹了vue2.x對(duì)象單層劫持的原理實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
關(guān)于Vue 自定義指令實(shí)現(xiàn)元素拖動(dòng)的詳細(xì)代碼
這篇文章主要介紹了Vue 自定義指令實(shí)現(xiàn)元素拖動(dòng),在使用自定義指令之前，先對(duì)自定義指令有一定的了解，主要從自定義指令定義范圍，鉤子函數(shù)方面入手，需要的朋友可以參考下2022-01-01