vue3.0安裝Element?ui及矢量圖使用方式
更新時(shí)間：2021年12月23日 14:29:25 作者：希兒
這篇文章主要介紹了vue3.0安裝Element?ui及矢量圖使用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
- 在此只關(guān)注v3的安裝及使用，如果想了解v2可移步到其官網(wǎng)：https://element.eleme.io/#/zh-CN/component/installation
- v3官網(wǎng)：https://element-plus.org/zh-CN/guide/installation.html
- 使用element ui時(shí)vue2和vue3的區(qū)別
- 安裝命令
main.js中引入文件有所不同
使用icon時(shí)v2不需要安裝，v3需安裝
v2和v3在vue文件中使用icon時(shí)編寫(xiě)方式有所不同
icon在v2中使用的是字體，v3中使用的是svg
安裝Element ui
- 使用npm安裝
npm install element-plus --save
icon圖標(biāo)需安裝
npm install @element-plus/icons-vue
- 使用
在main.js中全局轉(zhuǎn)入
import elementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import '@/assets/css/index.scss'
//引入外部矢量圖
import '@/assets/iconfont/iconfont.css'
const app = createApp(App);
app.config.globalProperties.axios = axios;
app
.use(elementPlus)
.mount('#app');
按照Element ui中規(guī)定標(biāo)簽的寫(xiě)法，正常編寫(xiě)代碼
vue文件使用icon圖標(biāo)
<el-icon :size="size" :color="color"> <edit></edit> </el-icon>
或
<edit></edit>
<add-location/>
//矢量圖
<i class="iconfont icon-huyan"></i>
//引入需要使用的icon(svg)
import {Edit,AddLocation} from '@element-plus/icons-vue'
components:{ Edit, AddLocation }
項(xiàng)目中引入矢量圖
下載
- 使用
將這六個(gè)文件拷貝到項(xiàng)目中，在main.js中引入后再進(jìn)行使用
到此這篇關(guān)于vue3.0安裝Element ui及矢量圖使用的文章就介紹到這了,更多相關(guān)vue3.0安裝Element ui內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+js點(diǎn)擊箭頭實(shí)現(xiàn)圖片切換
這篇文章主要為大家詳細(xì)介紹了vue+js點(diǎn)擊箭頭實(shí)現(xiàn)圖片切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
淺談Vue CLI 3結(jié)合Lerna進(jìn)行UI框架設(shè)計(jì)
這篇文章主要介紹了淺談Vue CLI 3結(jié)合Lerna進(jìn)行UI框架設(shè)計(jì),在此之前先簡(jiǎn)單介紹一下Element的構(gòu)建流程，以便對(duì)比新的UI框架設(shè)計(jì)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
使用electron將vue-cli項(xiàng)目打包成exe的方法
今天小編就為大家分享一篇使用electron將vue-cli項(xiàng)目打包成exe的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue使用element-ui的el-date-picker設(shè)置樣式無(wú)效的解決
本文主要介紹了vue使用element-ui的el-date-picker設(shè)置樣式無(wú)效的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
詳解解決Vue相同路由參數(shù)不同不會(huì)刷新的問(wèn)題
這篇文章主要介紹了詳解解決Vue相同路由參數(shù)不同不會(huì)刷新的問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
這篇文章主要為大家詳細(xì)介紹了vue使用swiper.js重疊輪播組建樣式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
vue3通過(guò)render函數(shù)實(shí)現(xiàn)菜單下拉框的示例
本文主要介紹了vue3通過(guò)render函數(shù)實(shí)現(xiàn)菜單下拉框的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
解決前端調(diào)用后端接口返回200但數(shù)據(jù)返回的是html標(biāo)簽
這篇文章主要給大家介紹了關(guān)于如何解決前端調(diào)用后端接口返回200但數(shù)據(jù)返回的是html標(biāo)簽的相關(guān)資料,文中通過(guò)圖文將解決的過(guò)程介紹的非常詳細(xì),對(duì)同樣遇到這個(gè)問(wèn)題的朋友具有一定的參考解決價(jià)值,需要的朋友可以參考下2024-05-05
vue使用axios實(shí)現(xiàn)動(dòng)態(tài)追加數(shù)據(jù)
在vuejs中使用axios時(shí),有時(shí)候需要追加數(shù)據(jù),比如,移動(dòng)端下拉觸底加載,分頁(yè)加載,滑動(dòng)滾動(dòng)條等,下面小編就來(lái)為大家介紹一下如何使用使用axios實(shí)現(xiàn)動(dòng)態(tài)追加數(shù)據(jù)吧2023-10-10
vue實(shí)現(xiàn)簡(jiǎn)潔文件上傳進(jìn)度條功能
這篇文章主要介紹了vue實(shí)現(xiàn)簡(jiǎn)潔文件上傳進(jìn)度條功能,實(shí)現(xiàn)原理是通過(guò)performance.now()獲取動(dòng)畫(huà)的時(shí)間戳,用于創(chuàng)建流暢的動(dòng)畫(huà),結(jié)合示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06