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(邮箱)