集成element-plus

安装引入

1、先安装Element Plus

npm install element-plus --save

2、安装Nuxt官方专门针对引入Element Plus 开发的模块

npm i @element-plus/nuxt -D

3、在nuxt.config.ts中配置modules参数

export default defineNuxtConfig({
  modules: [
    '@element-plus/nuxt'
  ],
  elementPlus: { /** Options */ }
})

至此，已经引入成功，且所有Element Plus 组件也都可以直接自动导入。

所有的配置参数可以点击查看官方文档

如何全局引入element ui 图标 Element Plus UI 的图标并未在nuxt3中做自动导入，所以使用的时候，需要手动从@element-plus/icons-vue中导入, 如下：

<script lang="ts" setup>
import { Document } from '@element-plus/icons-vue'
</script>

<template>
   <el-icon><Document /></el-icon>
</template>

因为使用到的图标的地方会非常多，所以这里创建plugins目录中创建一个global.ts文件，用于全局引入一些组件。

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

export default defineNuxtPlugin(async (NuxtApp) => {
  // nuxtApp包含的属性可看文档 https://nuxt.com/docs/guide/going-further/internals

  // 全局组件引入
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    NuxtApp.vueApp.component(key, component)
  }
})

再次在页面中查看

<script lang="ts" setup>
</script>

<template>
   <el-icon><Document /></el-icon>
</template>