vue3.0安裝Element?ui及矢量圖使用方式
更新時間：2021年12月23日 14:29:25 作者：希兒
這篇文章主要介紹了vue3.0安裝Element?ui及矢量圖使用,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
- 在此只關注v3的安裝及使用，如果想了解v2可移步到其官網：https://element.eleme.io/#/zh-CN/component/installation
- v3官網：https://element-plus.org/zh-CN/guide/installation.html
- 使用element ui時vue2和vue3的區(qū)別
- 安裝命令
main.js中引入文件有所不同
使用icon時v2不需要安裝，v3需安裝
v2和v3在vue文件中使用icon時編寫方式有所不同
icon在v2中使用的是字體，v3中使用的是svg
安裝Element ui
- 使用npm安裝
npm install element-plus --save
icon圖標需安裝
npm install @element-plus/icons-vue
- 使用
在main.js中全局轉入
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ī)定標簽的寫法，正常編寫代碼
vue文件使用icon圖標
<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 }
項目中引入矢量圖
下載
- 使用
將這六個文件拷貝到項目中，在main.js中引入后再進行使用
到此這篇關于vue3.0安裝Element ui及矢量圖使用的文章就介紹到這了,更多相關vue3.0安裝Element ui內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue恢復初始數據this.$data,this.$options.data()解析
這篇文章主要介紹了vue恢復初始數據this.$data，this.$options.data()解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細介紹了如何利用Vue模擬實現element-ui的分頁器效果，文中的示例代碼講解詳細，感興趣的小伙伴可以動手嘗試一下2022-11-11
這篇文章主要為大家詳細介紹了vue版日歷組件的實現方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家介紹了vue使用Swiper踩坑及解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了vue之el-tree懶加載數據并且實現樹的過濾問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
element-ui中的select,checkbox等組件的change方法的回調函數只有當前選擇的val,如果想再傳入自定義參數怎么辦,本文給大家分享select的change方法如何傳遞多個參數,感興趣的朋友一起看看吧2024-02-02
vue2.0 獲取從http接口中獲取數據,組件開發(fā),路由配置方式
今天小編就為大家分享一篇vue2.0 獲取從http接口中獲取數據,組件開發(fā),路由配置方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue跳轉外部鏈接始終有l(wèi)ocalhost的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue后臺返回base64圖片無法顯示的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
在正式使用Vue進行移動端頁面開發(fā)前,需要做一些前置工作,下面這篇文章主要給大家介紹了關于vue開發(fā)移動端h5環(huán)境搭建的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08