test/element-plus

Fork 0

mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-14 17:31:02 +08:00

云游君 69b402d05e

docs: add format for vite-plugin-element-plus (#3095 )

2021-08-27 14:38:05 +08:00

8.2 KiB

Raw Blame History

すぐに始められる

ここでは、プロジェクトで 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(({ mode }) => {
  plugins: [
    vue(),
    VitePluginElementPlus({
      // コンポーネント名].scssのソースファイルを使用する必要がある場合は、以下のようにコメントアウトを解除する必要があります。
      // useSource: true
      // すべてのAPIについては、https://github.com/element-plus/vite-plugin-element-plus のドキュメントノートを参照してください。
      format: mode === 'development' ? 'esm' : 'cjs',
    }),
  ],
})

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`;
        },
      },
    ],
  ],
}

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'element-plus',
        // import component
        customName: name => {
          name = name.slice(3)
          return `element-plus/lib/components/${name}`
        },
        // import style
        customStyleName: name => {
          name = name.slice(3)
          // [name].scssファイルが必要な場合は、前の行のコードをコメントアウトし、次の行のコードをアンコメントする必要があります。
          // return `element-plus/lib/components/${name}/style`
          // [name].cssファイルが必要な場合は、次の行を返す必要があります。
          return `element-plus/lib/components/${name}/style/css`
        },
      },
    ],
  ],
}

8.2 KiB Raw Blame History Unescape Escape