关于nuxt.js:Nuxt3实战系列之集成ElementPlusUI

Nuxt框架因为做了一些封装解决，曾经将入口文件齐全暗藏了，因而对于一些老手小白来说，怎么在Nuxt中引入一些第三方库就成了个麻烦事。ElementPlus UI 自身反对服务端渲染，本文将次要概述如何在Nuxt3中集成ElementPlus。

如何引入？

1.先装置Element Plus

# 抉择一个你喜爱的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

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

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

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

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

至此，曾经引入胜利，且所有Element Plus 组件也都能够间接主动导入。

应用进阶

1. 如何做全局配置

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

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

所有的配置参数能够点击查看官网文档

2.如何全局引入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>

然而如果咱们很多中央都要用到图标，且有时候须要应用动静引入的时候，这样手动import就比拟麻烦了，那么如何全局引入图标呢？在Nuxt3中，咱们能够创立一个plugin来实现。笔者的做法是在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)
  }
})

示例参考

本文的示例程序笔者曾经上传至Github, 有须要的小伙伴能够克隆参考。另外，笔者后续会在该我的项目上应用Nuxt3实现一个根底版本的Admin零碎并实现RBAC权限调配相干的性能。源码仓库如下：

https://github.com/tianyuwu/nuxt3-admin-starter

结语

博客原创地址：Nuxt3实战系列之集成ElementUI | imwty

欢送批评指正，或者与我交换探讨更多前端技术～

分割我：imwty2023（微信），mailto:iwhitney@163.com（邮箱）