Vue3 はオンデマンドで Element Plus を使用します

Vue 3 のオンデマンド読み込みでは ElementUI-Plus を使用します。これは次の手順に従って設定できます。

1. ElementUI-Plus ライブラリをインストールします。 npm または Yarn を介して ElementUI-Plus パッケージをプロジェクトにインストールします。

npm install element-plus --save

2. main.js (またはメイン アプリケーション エントリ ファイル) で、必要に応じて必要なコンポーネントをインポートします。

import {
    
     createApp } from 'vue'
import {
    
     ElButton, ElInput } from 'element-plus'
import App from './App.vue'

const app = createApp(App)

// 注册需要的组件
app.component(ElButton.name, ElButton)
app.component(ElInput.name, ElInput)

app.mount('#app')

この例では、例として ElButton と ElInput の 2 つのコンポーネントのみを紹介しました。ニーズに応じて他のコンポーネントを導入できます。

3. 構成スタイルの導入: ElementUI-Plus コンポーネント ライブラリは、対応するスタイルをグローバルにインポートする必要があります。ElementUI-Plus スタイル ファイルを main.js にインポートすることも、必要に応じて別のスタイル ファイルにインポートすることもできます。

• すべてのスタイルをインポートします (推奨):

javascript
import 'element-plus/lib/theme-chalk/index.css'

• または、必要に応じていくつかのスタイルをインポートします (ボタンと入力ボックスのスタイルのみをインポートするなど)。

javascript
import 'element-plus/lib/theme-chalk/button.css'
import 'element-plus/lib/theme-chalk/input.css'

4. コンポーネントで ElementUI-Plus コンポーネントを使用します。

Vue 3 コンポーネントで ElementUI-Plus コンポーネントを使用できるようになりました。たとえば、App.vue コンポーネントで ElButton と ElInput を使用すると、次のようになります。

<template>
  <div>
    <el-button>点击</el-button>
    <el-input v-model="inputValue"></el-input>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      inputValue: ''
    }
  }
}
</script>