Element Plus Nuxt
Element Plus 針對 Nuxt 的模組
特性
- 自動按需導入元件和樣式。
- 自動按需導入指令和樣式。
- 自動從 @element-plus/icons-vue 導入圖示。
- 自動導入 ElMessage、ElNotification 和其他方法。
- 自動將 ID_INJECTION_KEY 和 ZINDEX_INJECTION_KEY 注入到 Vue 中。
- 自動將 teleport 標記注入到最終頁面 HTML 中的正確位置。
安裝
!WARNING 由於 element-plus 內部使用的 dayjs 不是 JavaScript 模組，為了確保它可以啟動前轉換為 JavaScript 模組，您需要在專案的根目錄中新增一個
.npmrc檔案，並新增以下設定shamefully-hoist=true或單獨安裝
dayjs依賴。
npx nuxi@latest module add element-plus
# or
npm i element-plus @element-plus/nuxt -D
export default defineNuxtConfig({
modules: [
'@element-plus/nuxt'
],
elementPlus: { /** Options */ }
})
用法
<template>
<el-button @click="ElMessage('hello')">button</el-button>
<ElButton :icon="ElIconEditPen" type="success">button</ElButton>
<LazyElButton type="warning">lazy button</LazyElButton>
</template>
參考 Nuxt 文件 和 playground 用法。
選項
importStyle
- 類型：
'css' | 'scss' | boolean - 預設值：
css
使用元件導入樣式 css 或 sass(scss)，使用 false 停用自動導入樣式。
themes
- 類型：
array
需要自動導入樣式的主題列表。
例如：['dark']
icon
- 類型：
string | false - 預設值：
ElIcon
圖示前綴名稱，使用 false 停用自動導入圖示。
namespace
- 類型：
string - 預設值：
el
當您更改全域命名空間時，您也必須在此處更改它。
defaultLocale
- 類型：
string
替換預設語言環境，您可以在這裡找到語言環境列表
例如：'zh-cn'
globalConfig
- 類型：
object
設定全域配置，例如修改元件的預設 size 和 z-index。
例如：{ size: 'small', zIndex: 3000 }
injectionID
- 類型：
object - 預設值：
{ prefix: 1024, current: 0 }
自動將 ID_INJECTION_KEY 注入到 Vue 中。
injectionZIndex
- 類型：
object - 預設值：
{ current: 0 }
自動將 Z_INDEX_INJECTION_KEY 注入到 Vue 中。
appendTo
- 類型：
array
當您修改所有基於 ElTooltip 元件中的 append-to props 時，您需要在此處新增值。
components
- 類型：
array
如果有元件未從 Element Plus 自動導入，您需要在此處新增元件名稱。
例如：['ElSubMenu']
subComponents
- 類型：
object
子元件定義檔案位於其父元件中的元件地圖。
directives
- 類型：
object
如果有指令未從 Element Plus 自動導入，您需要在此處新增指令名稱。
imports
- 類型：
array
如果您希望從 Element Plus 新增自動導入內容，您可以在此處新增。
例如：
[
['useLocale', 'es/hooks/use-locale/index.mjs'],
[['castArray', 'unique'], 'es/utils/arrays.mjs']
],
noStylesComponents
- 類型：
array
當元件錯誤地載入樣式時，您需要在此處新增元件名稱。
include
- 類型：
array - 預設值：
[ /\.vue$/, /\.vue\?vue/, /\.vue\?v=/, /\.((c|m)?j|t)sx?$/]
包含需要自動導入樣式的文件。
exclude
- 類型：
array - 預設值：
[/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]
排除不需要自動導入樣式的文件。
範本
開發
- 執行
pnpm i安裝依賴。 - 執行
pnpm dev:prepare生成類型宣告。 - 執行
pnpm dev以開發模式啟動 playground。 - 執行
pnpm dev:build建置 playground。 - 執行
pnpm dev:start在本地預覽 playground。 - 執行
pnpm build建置此專案。