Nuxt3實戰系列之整合ElementPlusUI

imwty發表於2023-03-08
UXUI

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（郵箱）

相關文章