Element Plus Nuxt
Nuxt用Element Plusモジュール
機能
- コンポーネントとスタイルをオンデマンドで自動的にインポートします。
- ディレクティブとスタイルをオンデマンドで自動的にインポートします。
- @element-plus/icons-vueからアイコンを自動的にインポートします。
- ElMessage、ElNotification、その他のメソッドを自動的にインポートします。
- ID_INJECTION_KEYとZINDEX_INJECTION_KEYをVueに自動的に挿入します。
- 最終的なページ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'
cache
- 型:
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
- タイプ:
object - デフォルト:
{ prefix: 1024, current: 0 }
ID_INJECTION_KEYをVueに自動的に挿入します。
injectionZIndex
- タイプ:
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
コンポーネントが誤ってスタイルを読み込む場合、ここにコンポーネント名を追加する必要があります。
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を実行して開発モードでプレイグラウンドを開始します。pnpm dev:buildを実行してプレイグラウンドをビルドします。pnpm dev:startを実行してプレイグラウンドをローカルでプレビューします。pnpm buildを実行してこのプロジェクトをビルドします。