Vue3 Vite + Ts Element-Plus コンポーネントオンデマンドのインポート方法

プロジェクトフレームワーク: Vite + Ts + Element-Plus

Vite で使用する Vue3 には Element-Plus コンポーネントライブラリを使用する必要があります
。Vue2 を使用する場合は、Element コンポーネントライブラリを使用します。

Element-Plus をインストールする

プロジェクトのルートディレクトリで、npm コマンドを使用して以下をインストールします。

npm install element-plus --save

または略記：

npm i element-plus -S

「install」は「i」、「--save」は「-S」と省略でき、他の依存パッケージをインストールする場合にも省略できます。
-S は、依存パッケージ情報をインストールして「package.json」ファイルの「dependencies」構成に追加することを意味し、「dependencies」は、プロジェクトの公式環境 (オンライン環境) が実行されるときに使用されるものを記録します。

-D "package.json" ファイルの "devDependencies" 構成に依存パッケージ情報をインストールして追加します.
一部の依存関係は、公式環境ではインストールする必要がありません. それらは開発環境でのみ使用され、インストールできます. 使用「-D」、「devDependencies」は開発環境で使用するものを記録

-S または -D がない場合は、直接 "npm install *some dependency" になります。これは、"npm install *some dependency -S" と同等であり、インストール情報をインストールして、"dependencies" 構成に記録します。「package.json」ファイル。

インストール後、次のように、「package.json」ファイルの「dependencies」構成の下に「element-plus」インストールパッケージ情報が表示されます。

ここに画像の説明を挿入

unplugin-vue-components と unplugin-auto-import の 2 つのプラグインをインストールします。

使用済みの Element-Plus コンポーネントを自動的にインポートする場合は、2 つの追加プラグイン unplugin-vue-components と unplugin-auto-import をインストールし、次のコマンドを使用してインストールする必要があります
。

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

-D は開発環境にインストールされ、正式な環境には必要ありません

vite.config.ts ファイルの自動インポート設定を構成する

次のコードをファイルに追加します。

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()],
    }),
  ],
})

写真のように:

ここに画像の説明を挿入

要素プラスコンポーネントの使用

次のように、コンポーネントをページで直接使用します。

<template>
  <div class="home">
    <el-button type="primary">Primary</el-button>
  </div>
</template>

プロジェクトを実行すると、インポートされたボタンコンポーネントが表示されます。

ここに画像の説明を挿入
コンポーネントがページで使用された後、コンポーネントは自動的にインポートされ、使用されたコンポーネントのインポート情報は「components.d.ts」ファイルで確認できます。

ここに画像の説明を挿入

element-plus の公式ドキュメントには、さらにさまざまなインポート方法があります。

https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5