Vue中正確使用Element-UI組件的方法實(shí)例
一、CDN
目前可以通過(guò) unpkg.com/element-ui 獲取到最新版本的資源，在頁(yè)面上引入 js 和 css 文件即可開(kāi)始使用。
<!-- 引入樣式 --> <link rel="stylesheet" > <!-- 引入組件庫(kù) --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
二、npm安裝
1、打開(kāi)終端（開(kāi)發(fā)工具中打開(kāi)或（win+r）后輸入cmd進(jìn)入）
2、進(jìn)入到對(duì)應(yīng)的項(xiàng)目中
例：
3、輸入vue add element后回車(chē)，等待一小會(huì)
4、它會(huì)提示你是全局引入（Fully import）還是按需引入（Import on demand）,選擇 Fully import 回車(chē)即可
5、然后會(huì)提示（輸入 N 回車(chē)即可）
6、然后會(huì)提示你選擇語(yǔ)言，選擇 zh-CN 回車(chē)即可
7、引入完成（在src目錄下會(huì)新增一個(gè)plugins文件夾和element.js文件）
三、測(cè)試是否成功引入
1、在main.js文件中引入element.js
import './plugins/element.js'
在.vue文件中輸入<el-button>el-button</el-button>最后 npm run serve 運(yùn)行項(xiàng)目，若結(jié)果顯示出下圖的按鈕效果則表示引入成功！
四、最后附上Element-UI組件庫(kù)的使用文檔地址
https://element.eleme.cn/#/zh-CN/component/installation
總結(jié)
到此這篇關(guān)于Vue中正確使用Element-UI組件的文章就介紹到這了,更多相關(guān)Vue使用Element-UI組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中對(duì)時(shí)間戳的處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue項(xiàng)目設(shè)置scrollTop不起作用(總結(jié))
這篇文章主要介紹了vue項(xiàng)目設(shè)置scrollTop不起作用(總結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
ant-design表單處理和常用方法及自定義驗(yàn)證操作
這篇文章主要介紹了ant-design表單處理和常用方法及自定義驗(yàn)證操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
最近有個(gè)項(xiàng)目需求就是在客戶(hù)端的右上角要實(shí)時(shí)展示提醒消息,下面這篇文章主要給大家介紹了關(guān)于Vue通知提醒框(Notification)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了解決.vue文件url引用文件的問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
這篇文章主要介紹了基于vue配置axios的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
這篇文章主要介紹了將Vue組件庫(kù)更換為按需加載的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
vue-next-admin項(xiàng)目使用cdn加速詳細(xì)配置
這篇文章主要為大家介紹了vue-next-admin項(xiàng)目使用cdn加速的詳細(xì)配置，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vue中內(nèi)置了很多的指令,但有時(shí)候這些指令并不能滿(mǎn)足我們,或者說(shuō)我們想為元素附加一些特別的功能,這時(shí)候我們就需要用到vue中一個(gè)很強(qiáng)大的功能了—自定義指令,這篇文章主要給大家介紹了關(guān)于vue中自定義指令（directive）的基本使用方法,需要的朋友可以參考下2021-09-09
vue學(xué)習(xí)筆記之vue1.0和vue2.0的區(qū)別介紹
今天我們來(lái)說(shuō)一說(shuō)vue1.0和vue2.0的主要變化有哪些？對(duì)vue相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2017-05-05