Element Plus Nuxt
Element Plus 的 Nuxt 模組
功能特色
- 自動按需導入元件和樣式。
- 自動按需導入指令和樣式。
- 自動從 @element-plus/icons-vue 導入圖示。
- 自動導入 ElMessage、ElNotification 和其他方法。
- 自動將 ID_INJECTION_KEY 和 ZINDEX_INJECTION_KEY 注入到 Vue 中。
- 自動將 teleport 標記注入到最終頁面 HTML 的正確位置。
安裝
!警告 因為 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建置此專案。