imwty

专注大前端Web应用开发实践

0%

Nuxt3实战系列之集成ElementUI

发表于 更新于
Nuxt框架由于做了一些封装处理，已经将入口文件完全隐藏了，因此对于一些新手小白来说，怎么在Nuxt中引入一些第三方库就成了个麻烦事。ElementPlus UI 本身支持服务端渲染，本文将主要概述如何在Nuxt3中集成ElementPlus。

Nuxt框架由于做了一些封装处理，已经将入口文件完全隐藏了，因此对于一些新手小白来说，怎么在Nuxt中引入一些第三方库就成了个麻烦事。ElementPlus UI 本身支持服务端渲染，本文将主要概述如何在Nuxt3中集成ElementPlus。

如何引入？

  1. 先安装Element Plus

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # 选择一个你喜欢的包管理器

    # NPM
    $ npm install element-plus --save

    # Yarn
    $ yarn add element-plus

    # pnpm
    $ pnpm install element-plus

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

    1
    2
    # 选择合适的包管理器，npm/yarn/pnpm
    pnpm i @element-plus/nuxt -D

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

    1
    2
    3
    4
    5
    6
    export default defineNuxtConfig({
      modules: [
        '@element-plus/nuxt'
      ],
      elementPlus: { /** Options */ }
    })

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

使用进阶

1. 如何做全局配置

@element-plus/nuxt 中提供了一些配置参数，我们只需要在nuxt.config.ts中定义elementPlus参数即可，比如配置主题

1
2
3
4
5
6
7
8
export default defineNuxtConfig({
  modules: [
    '@element-plus/nuxt'
  ],
  elementPlus: {
    themes: ['dart']
  }
})

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

2.如何全局引入element ui 图标？

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

1
2
3
4
5
6
7
<script lang="ts" setup>
import { Document } from '@element-plus/icons-vue'
</script>

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

但是如果我们很多地方都要用到图标，且有时候需要使用动态引入的时候，这样手动import就比较麻烦了，那么如何全局引入图标呢？在Nuxt3中，我们可以创建一个plugin来完成。笔者的做法是在plugins目录中创建一个global.ts文件，用于全局引入一些组件。

1
2
3
4
5
6
7
8
9
10
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)
  }
})

示例参考

本文的示例程序笔者已经上传至Github, 有需要的小伙伴可以克隆参考。另外，笔者后续会在该项目上使用Nuxt3完成一个基础版本的Admin系统并完成RBAC权限分配相关的功能。源码仓库如下：
https://github.com/tianyuwu/nuxt3-admin-starter