2021-08-24 13:36:48 +08:00
|
|
|
|
# すぐに始められる
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
ここでは、プロジェクトでElementPlusを使用する方法について説明します。
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
## コンポーネントの使用
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
### すべてのコンポーネントの完全導入
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
> main.ts
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
```typescript
|
2020-11-23 16:28:06 +08:00
|
|
|
|
import { createApp } from 'vue'
|
2021-08-24 13:36:48 +08:00
|
|
|
|
import ElementPlus from 'element-plus'
|
|
|
|
|
|
import 'element-plus/dist/index.css'
|
|
|
|
|
|
import App from './App.vue'
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
|
|
|
|
|
const app = createApp(App)
|
2021-08-24 13:36:48 +08:00
|
|
|
|
|
2020-11-04 10:30:14 +08:00
|
|
|
|
app.use(ElementPlus)
|
|
|
|
|
|
app.mount('#app')
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
### オンデマンドでコンポーネントを導入
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
`ElementPlus`的なJS代弁者认为支持基于ESモジュール的[树揺](https://webpack.js.org/guides/tree-shaking/)。
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
> App.vue
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
```html
|
|
|
|
|
|
<template>
|
|
|
|
|
|
<el-button>
|
|
|
|
|
|
私はElButtonです
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import { defineComponent } from 'vue'
|
|
|
|
|
|
import { ElButton } from 'element-plus'
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
export default defineComponent({
|
|
|
|
|
|
name: 'app'
|
|
|
|
|
|
components: {
|
|
|
|
|
|
ElButton,
|
|
|
|
|
|
},
|
|
|
|
|
|
})
|
|
|
|
|
|
</script>
|
2020-11-04 10:30:14 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
### スタイルの紹介
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
スタイルの導入は、**完全なスタイルファイルを直接導入することを強くお勧めします**。アプリケーション全体のサイズが大きくなるように見えるかもしれませんが、
|
|
|
|
|
|
これによりパッケージングツールのプラグインを追加で導入する必要がなくなります（負担が少なくなります）。また、
|
|
|
|
|
|
[CDN](https://www.cloudflare.com/learning/cdn/what-is-)を使用することもできます。 a-cdn/)
|
|
|
|
|
|
を使ってスタイルファイルを読み込むことで、アプリケーションの読み込みが速くなります。
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
JSの方法で紹介されました
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
```typescript
|
|
|
|
|
|
import 'element-plus/dist/index.css'
|
2021-03-27 19:18:36 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
HTMLヘッダで紹介
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
```html
|
|
|
|
|
|
<!-- index.html -->
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
|
|
|
|
|
|
</head>
|
2020-11-04 10:30:14 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
スタイルもオンデマンドで導入したい場合は、対応するツールが提供するプラグインを使って参照することができます。 [よくあるご質問](/#/zh-cn/component/quickstart#yokuarugo-zhi-wen)をご覧ください。
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
## クイックビルドプロジェクトテンプレート
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
### vue-cli@4.5 をご利用ください。
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
の新バージョンに対応したvue-cliプラグインを用意しました。
|
|
|
|
|
|
をベースにしたプロジェクトを素早く構築するために使用できる[Element Plus plugins](https://github.com/element-plus/vue-cli-plugin-element-plus)を提供します。
|
|
|
|
|
|
Element Plusプロジェクト。
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
### スターターキットの使い方
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
そのまま使える汎用的な[プロジェクトテンプレート](https://github.com/element-plus/element-plus-starter)を提供し、さらには
|
|
|
|
|
|
Vite[テンプレート](https://github.com/element-plus/element-plus-vite-starter)を使用しています。
|
|
|
|
|
|
のために
|
|
|
|
|
|
Laravelをお使いの方は、対応する[テンプレート](https://github.com/element-plus/element-plus-in-laravel-starter)も用意していますので、そのままダウンロードしてお使いいただけます。
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
## グローバルコンフィギュレーション
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
Element Plusを導入する際に、グローバルコンフィギュレーションオブジェクトを渡すことができます。 このオブジェクトは現在、`size` と `zIndex`
|
|
|
|
|
|
フィールドをサポートしています。 サイズ
|
|
|
|
|
|
は、コンポーネントのデフォルトサイズを変更するために使用され、`zIndex`は、ポップアップボックスの初期z-indexを設定します（デフォルト値：2000）。
|
|
|
|
|
|
要求に応じて「エレメント・プラス」を以下のように導入します。
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
ElementPlusを完全紹介。
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
|
|
|
|
|
```js
|
2021-08-24 13:36:48 +08:00
|
|
|
|
import { createApp } from 'vue'
|
|
|
|
|
|
import ElementPlus from 'element-plus';
|
|
|
|
|
|
import App from './App.vue';
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
const app = createApp(App)
|
|
|
|
|
|
app.use(ElementPlus, { size: 'small', zIndex: 3000 });
|
2021-03-27 19:18:36 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
ElementPlusのオンデマンド導入。
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
```js
|
2020-11-23 16:28:06 +08:00
|
|
|
|
import { createApp } from 'vue'
|
2021-08-24 13:36:48 +08:00
|
|
|
|
import { ElButton } from 'element-plus';
|
2020-11-04 10:30:14 +08:00
|
|
|
|
import App from './App.vue';
|
|
|
|
|
|
|
2020-11-23 16:28:06 +08:00
|
|
|
|
const app = createApp(App)
|
2021-08-24 13:36:48 +08:00
|
|
|
|
app.config.globalProperties.$ELEMENT = option
|
|
|
|
|
|
app.use(ElButton);
|
2020-11-04 10:30:14 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
上記の設定により、プロジェクト内で`size`プロパティを持つすべてのコンポーネントのデフォルトサイズは「small」となり、ポップアップボックスの初期z-indexは3000となります。
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
## Nuxt.jsを使う
|
2020-11-23 16:28:06 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
また、[Nuxt.js](https://nuxtjs.org)を使って
|
2020-11-23 16:28:06 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
|
|
|
|
|
|
<iframe src="https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true" alt="nuxt-with-element on glitch" style="height: 100%; width: 100%; border: 0;"></iframe>
|
|
|
|
|
|
</div>
|
2020-11-23 16:28:06 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
## スタートアップ
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
VueとElement Plusをベースにした開発環境が整ったところで、いよいよコードを書いてみましょう。 各コンポーネントの使用方法については、各コンポーネントのドキュメントを参照してください。
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
## よくあるご質問
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
### コンポーネントとスタイルを同時にオンデマンドで導入したいのですが、どのようにすればよいでしょうか？
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
#### viteでオンデマンドのローディングスタイル
|
2020-11-23 16:28:06 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
ビルドパッケージングツールとして[vite](https://vitejs.dev)を使用している場合は、オンデマンドでスタイルを読み込むために、まず `vite-plugin-element-plus`
|
|
|
|
|
|
をインストールする必要があります。
|
|
|
|
|
|
|
|
|
|
|
|
```shell
|
|
|
|
|
|
yarn add vite-plugin-element-plus -D
|
|
|
|
|
|
# または
|
|
|
|
|
|
npm install vite-plugin-element-plus -D
|
2020-11-04 10:30:14 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
次に、`vite.config.js`ファイルに以下のコードを追加します。
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
```typescript
|
|
|
|
|
|
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 のドキュメントノートを参照してください。
|
|
|
|
|
|
}),
|
|
|
|
|
|
],
|
|
|
|
|
|
})
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
#### webpackによるオンデマンドでのスタイルの読み込み
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
ビルドパッケージングツールとしてwebpackを使用している場合は、必要に応じてスタイルを読み込むために、まず`babel-plugin-import`をインストールする必要があります。
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
```shell
|
|
|
|
|
|
yarn add babel-plugin-import -D
|
|
|
|
|
|
# または
|
|
|
|
|
|
npm install babel-plugin-import -D
|
|
|
|
|
|
```
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
次に、以下のコードを `babel.config.js` ファイルに追加してください。
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
> babel.config.js
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
```javascript
|
|
|
|
|
|
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`;
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
],
|
|
|
|
|
|
};
|
|
|
|
|
|
```
|
