安装
先安装element-plus
npm i element-plus --save // 其他包管理器自行查询
安装Nuxt针对引入element-plus开发的模块,注意这里一定要装此模块,否则在使用ElementPlusIcons时会报错
pnpm i @element-plus/nuxt -D
配置nuxt.config.js
export default defineNuxtConfig({
modules: [
'@element-plus/nuxt',
],
elementPlus: { /** Options */ }
})
至此已成功引入element-plus的所有组件
使用element-plus-icons
自动导入全部icons需在plugins/目录中创建一个plugin文件进行全局引入
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>
进行引入