欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評(píng)論