• 在此只關注v3的安裝及使用，如果想了解v2可移步到其官網：https://element.eleme.io/#/zh-CN/component/installation
• v3官網：https://element-plus.org/zh-CN/guide/installation.html
• 使用element ui時2和vue3的區別
• 安裝命令

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.'
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中規定標籤的寫法，正常編寫程式碼

vue檔案使用icon圖示

<el-icon :size="size" :color="color"> <edit></edit> </el-icon>
或
PkDXi<edit></edit>
<add-location/>
//向量圖
<i class="iconfont icon-huyan"></i>PkDXi;
//引入需要使用的icon(svg)
import {Edit,AddLocation} from '@element-plus/icons-vue'
components:{ Edit,AddLocation }

專案中引入向量圖

下載

• 使http://www.cppcns.com用

將這六個檔案拷貝到專案中，在main.js中引入後再進行使用

到此這篇關於vue3.0安裝Element ui及向量圖使用的文章就介紹到這了,更多相關vue3.0安裝Element ui內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！