vue項目如何引入element?ui、iview和echarts
vue引入element ui、iview和echarts
記性不好，每次引入都要重新搜一遍，今天把幾個自己整理一下。全部引入，沒搞按需引入。
1.vue項目引入elementui
控制臺輸入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項目中引入iview
控制臺輸入npm install iview -s
import iView from 'iview' // 引入ivew庫 import 'iview/dist/styles/iview.css' // 使用CSS Vue.use(iView)
3.vue項目中引入echarts
控制臺輸入npm install echarts -s
import * as echarts from 'echarts' // 導入echarts Vue.prototype.$echarts = echarts // 并設置對應的屬性
4.main.js文件代碼截圖
5.echarts在引入后
需要使用echarts的頁面，還需要import一下
<script> import * as echarts from 'echarts' </script>
6.引入之后就可以使用他們的組件了
iview與elementui對比
表格
合并單元格
elementui中的table表格組件包含行列的合并單元格；iview的table表格組件只提供了表頭的合并單元格；如果表格涉及合并單元格建議使用elementui。（iview 4.0.0 之后設置屬性 span-method 可以指定合并行或列的算法。）
左表頭固定，可以左右滑動時
iview給表格綁定高后，數(shù)據(jù)少會有空白；但是綁定max-height后，左右滑動的左邊這一塊，會被遮蓋導致劃不動
elemeui可以完美的解決數(shù)據(jù)多和少的時候的左右滑動，表格多的時候建議使用elementui
風格
ivew的整體風格比較清新，適合后臺管理系統(tǒng)
按需引入
兩者都可以按需引入
表單驗證
ivew的表單驗證樣式；
elementui帶驗證表單
iview帶驗證表單
下拉選擇器
iview的下拉選擇器select的option是渲染在組件內部，和elementui的渲染在body不一樣。如果頁面有幾百個selcet，會造成嚴重的卡頓，這種時候建議選擇elementui。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue.js 利用v-for中的index值實現(xiàn)隔行變色
這篇文章主要介紹了Vue.js 利用v-for中的index值實現(xiàn)隔行變色效果，首先定義好樣式，利用v-for中的index值，然后綁定樣式來實現(xiàn)隔行變色,需要的朋友可以參考下2018-08-08
組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。這篇文章主要介紹了vue.js 中的組件，需要的朋友參考下2018-02-02
這篇文章主要介紹了如何修改Vue打包后文件的接口地址配置的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了vue事件處理原理及過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-03-03
Vite3 Svelte3構建Web應用報錯process is not def
這篇文章主要介紹了Vite3 Svelte3構建Web應用報錯：'process is not defined'解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
Vue使用Tinymce富文本自定義toolbar按鈕的實踐
本文主要介紹了Vue使用Tinymce富文本自定義toolbar按鈕，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要給大家介紹的是vue-cli 介紹與安裝，vue-cli是和vue進行深度組合的工具，可以快速幫我們創(chuàng)建vue項目，并且把一些腳手架相關的代碼給我們創(chuàng)建好。真正使用vue開發(fā)項目，都是用vue-cli來創(chuàng)建項目的，下面文章詳細內容,需要的朋友可以參考一下2021-10-10
利用Vue模擬實現(xiàn)element-ui的分頁器效果
這篇文章主要為大家詳細介紹了如何利用Vue模擬實現(xiàn)element-ui的分頁器效果，文中的示例代碼講解詳細，感興趣的小伙伴可以動手嘗試一下2022-11-11
這篇文章主要介紹了vue2.x對象單層劫持的原理實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
這篇文章主要介紹了Vue 自定義指令實現(xiàn)元素拖動,在使用自定義指令之前，先對自定義指令有一定的了解，主要從自定義指令定義范圍，鉤子函數(shù)方面入手，需要的朋友可以參考下2022-01-01