7.3 KiB
すぐに始められる
ここでは、プロジェクトでElementPlusを使用する方法について説明します。
コンポーネントの使用
すべてのコンポーネントの完全導入
main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
オンデマンドでコンポーネントを導入
ElementPlus的なJS代弁者认为支持基于ESモジュール的树揺。
App.vue
<template>
<el-button>
私はElButtonです
</el-button>
</template>
<script>
import { defineComponent } from 'vue'
import { ElButton } from 'element-plus'
export default defineComponent({
name: 'app'
components: {
ElButton,
},
})
</script>
スタイルの紹介
スタイルの導入は、完全なスタイルファイルを直接導入することを強くお勧めします。アプリケーション全体のサイズが大きくなるように見えるかもしれませんが、 これによりパッケージングツールのプラグインを追加で導入する必要がなくなります（負担が少なくなります）。また、 CDNを使用することもできます。 a-cdn/) を使ってスタイルファイルを読み込むことで、アプリケーションの読み込みが速くなります。
JSの方法で紹介されました
import 'element-plus/dist/index.css'
HTMLヘッダで紹介
<!-- index.html -->
<head>
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
</head>
スタイルもオンデマンドで導入したい場合は、対応するツールが提供するプラグインを使って参照することができます。 よくあるご質問をご覧ください。
クイックビルドプロジェクトテンプレート
vue-cli@4.5 をご利用ください。
の新バージョンに対応したvue-cliプラグインを用意しました。 をベースにしたプロジェクトを素早く構築するために使用できるElement Plus pluginsを提供します。 Element Plusプロジェクト。
スターターキットの使い方
そのまま使える汎用的なプロジェクトテンプレートを提供し、さらには Viteテンプレートを使用しています。 のために Laravelをお使いの方は、対応するテンプレートも用意していますので、そのままダウンロードしてお使いいただけます。
グローバルコンフィギュレーション
Element Plusを導入する際に、グローバルコンフィギュレーションオブジェクトを渡すことができます。 このオブジェクトは現在、size と zIndex
フィールドをサポートしています。 サイズ
は、コンポーネントのデフォルトサイズを変更するために使用され、zIndexは、ポップアップボックスの初期z-indexを設定します（デフォルト値：2000）。
要求に応じて「エレメント・プラス」を以下のように導入します。
ElementPlusを完全紹介。
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import App from './App.vue';
const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 });
ElementPlusのオンデマンド導入。
import { createApp } from 'vue'
import { ElButton } from 'element-plus';
import App from './App.vue';
const app = createApp(App)
app.config.globalProperties.$ELEMENT = option
app.use(ElButton);
上記の設定により、プロジェクト内でsizeプロパティを持つすべてのコンポーネントのデフォルトサイズは「small」となり、ポップアップボックスの初期z-indexは3000となります。
Nuxt.jsを使う
また、Nuxt.jsを使って
スタートアップ
VueとElement Plusをベースにした開発環境が整ったところで、いよいよコードを書いてみましょう。 各コンポーネントの使用方法については、各コンポーネントのドキュメントを参照してください。
よくあるご質問
コンポーネントとスタイルを同時にオンデマンドで導入したいのですが、どのようにすればよいでしょうか？
viteでオンデマンドのローディングスタイル
ビルドパッケージングツールとしてviteを使用している場合は、オンデマンドでスタイルを読み込むために、まず vite-plugin-element-plus
をインストールする必要があります。
yarn add vite-plugin-element-plus -D
# または
npm install vite-plugin-element-plus -D
次に、vite.config.jsファイルに以下のコードを追加します。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VitePluginElementPlus from 'vite-plugin-element-plus'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
VitePluginElementPlus({
// コンポーネント名].scssのソースファイルを使用する必要がある場合は、以下のようにコメントアウトを解除する必要があります。
// useSource: true
// すべてのAPIについては、https://github.com/element-plus/vite-plugin-element-plus のドキュメントノートを参照してください。
}),
],
})
webpackによるオンデマンドでのスタイルの読み込み
ビルドパッケージングツールとしてwebpackを使用している場合は、必要に応じてスタイルを読み込むために、まずbabel-plugin-importをインストールする必要があります。
yarn add babel-plugin-import -D
# または
npm install babel-plugin-import -D
次に、以下のコードを babel.config.js ファイルに追加してください。
babel.config.js
module.exports = {
plugins: [
// ...others
[
"import",
{
libraryName: 'element-plus',
customStyleName: (name) => {
name = name.slice(3)
// [name].cssファイルが必要な場合は、次の行を返す必要があります。
return `element-plus/es/${name}/style/css`
// [name].scssファイルが必要な場合は、前の行のコードをコメントアウトし、次の行のコードをアンコメントする必要があります。
// return `element-plus/es/${name}/style`;
},
},
],
],
};