Nuxt框架由于做了一些封装处理,已经将入口文件完全隐藏了,因此对于一些新手小白来说,怎么在Nuxt中引入一些第三方库就成了个麻烦事。ElementPlus UI
本身支持服务端渲染,本文将主要概述如何在Nuxt3中集成ElementPlus
。
如何引入?
- 先安装
Element Plus
# 选择一个你喜欢的包管理器
# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus
- 安装Nuxt官方专门针对引入
Element Plus
开发的模块
# 选择合适的包管理器,npm/yarn/pnpm
pnpm i @element-plus/nuxt -D
- 在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)
}
})
开发遇到问题怎么办?别着急,点击 这个链接或者关注公众号【过目笔记】,就可以同时拥有包括ChatGPT在内的多个AI大模型助手帮你排忧解难!
示例参考
本文的示例程序笔者已经上传至Github, 有需要的小伙伴可以克隆参考。另外,笔者后续会在该项目上使用Nuxt3完成一个基础版本的Admin系统并完成RBAC权限分配相关的功能。源码仓库如下:
github.com/tianyuwu/nu…
结语
欢迎批评指正,或者与我交流探讨前端技术~
联系我:imwty2023(微信),iwhitney@163.com(邮箱)