安裝

先安裝element-plus

npm i element-plus --save // 其他包管理器自行查詢

安裝Nuxt針對引入element-plus開發(fā)的模塊，注意這里一定要裝此模塊，否則在使用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/目錄中創(chuàng)建一個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>

進行引入