安裝
先安裝element-plus
npm i element-plus --save // 其他包管理器自行查詢
安裝Nuxt針對引入element-plus開發(fā)的模塊西壮,注意這里一定要裝此模塊艰山,否則在使用ElementPlusIcons時(shí)會報(bào)錯(cuò)
pnpm i @element-plus/nuxt -D
配置nuxt.config.js
export default defineNuxtConfig({
modules: [
'@element-plus/nuxt',
],
elementPlus: { /** Options */ }
})
至此已成功引入element-plus的所有組件
使用element-plus-icons
自動導(dǎo)入全部icons需在plugins/目錄中創(chuàng)建一個(gè)plugin文件進(jìn)行全局引入
import * as ElementPlusIcons from '@element-plus/icons-vue'
export default defineNuxtPlugin((nuxtApp) => {
for(const [key, component] of Object.entries(ElementPlusIcons)) {
nuxtApp.vueApp.component(key, component)
}
})
如想做按需引入,也可以在需要使用的地方
<script setup>
import { Lock } from '@element-plus/icons-vue'
</script>
進(jìn)行引入