インストール

npm install element-plus --save

フルインポート

パッケージは非常にかさばり、学習には適していますが、本番環境には適していません。

このメソッドは、vite および cli scaffolding によって作成された vue3 に適用されます。

// main.ts
import { createApp } from 'vue'
//引入element-plus
import ElementPlus from 'element-plus'
//引入element-plus相关样式
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
//挂载
app.use(ElementPlus)
app.mount('#app')

オンデマンドでインポート

使用するコンポーネントをインポートするには、追加のプラグインが必要です。

自動的にインポート

まず、 2 つのプラグインunplugin-vue-componentsとunplugin-auto-importをインストールする必要があります。

npm install -D unplugin-vue-components unplugin-auto-import

Vite プロジェクトでは

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

cli プロジェクト (webapck ベースのプロジェクト)

// vue.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
    configureWebpack: {
        plugins: [
            AutoImport({
              resolvers: [ElementPlusResolver()],
            }),
            Components({
              resolvers: [ElementPlusResolver()],
            }),
          ],
    }
}

手動でインポート

Element Plus は、ES Module に基づいてすぐに使用できる Tree Shakingを提供します。

ただし、スタイルをインポートするにはunplugin-element-plusをインストールする必要があります。設定方法についてはドキュメントを参照してください。

<template>
  <el-button>I am ElButton</el-button>
</template>
<script>
  import { ElButton } from 'element-plus'
  export default {
    components: { ElButton },
  }
</script>

// vite.config.ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  // ...
  plugins: [ElementPlus()],
})

Vue3にElement-plusを導入