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 node-linker=hoisted或者單獨安裝
dayjs依賴。
npx nuxi@latest module add element-plus
# or
npm i element-plus @element-plus/nuxt -D
配置
!警告 目前，該方法無法自動獲取上下文，你需要手動在選項中配置 installMethods。
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 可停用自動匯入圖示。
installMethods (安裝方法)
- 型別:
array
需要安裝的方法列表。
例如: ['ElLoading', 'ElMessage', 'ElMessageBox', 'ElNotification']
namespace (名稱空間)
- 型別：
string - 預設值:
el
當你更改全域性名稱空間時，這裡也必須更改。
defaultLocale (預設語言環境)
- 型別：
string
替換預設語言環境，你可以在這裡找到語言環境列表
例如: 'zh-cn'
快取
- 型別：
boolean - 預設值：
false
是否快取 element-plus 元件和指令。僅在開發模式下有效。
如果啟用此功能，你將在開發模式下獲得更快的載入速度。
themeChalk (主題粉筆)
- 型別:
object
配置用於生成自定義主題的 SCSS 變數。僅當 importStyle 為 scss 時有效。
例如:
{
$colors: {
primary: { base: 'rgba(107,33,168, 1)' }
},
dark: {
$colors: {
primary: { base: 'rgb(242, 216, 22)' }
}
}
}
globalConfig (全域性配置)
- 型別:
object
設定全域性配置，例如修改元件的預設 size 和 z-index。
例如: { size: 'small', zIndex: 3000 }
injectionID (注入 ID)
- 型別:
object - 預設值:
{ prefix: 1024, current: 0 }
自動將 ID_INJECTION_KEY 注入 Vue。
injectionZIndex (注入 Z-Index)
- 型別:
object - 預設值:
{ current: 0 }
自動將 Z_INDEX_INJECTION_KEY 注入 Vue。
appendTo (追加到)
- 型別:
array
當你修改所有基於 ElTooltip 元件的 append-to 屬性時，你需要在這裡新增值。
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']
],
baseImports (基本匯入)
- 型別:
array
無論是否停用 autoImports，都將匯入的匯入列表。
noStylesComponents (無樣式元件)
- 型別:
array
當元件錯誤地載入樣式時，你需要在這裡新增元件名稱。
包含
- 型別:
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構建此專案。