Vue3 は Element-Plus コンポーネント ライブラリを導入します。 vue-cli はオンデマンドで自動的にインポートします + ElementPlus のアイコンを導入します

1: Element-Plus コンポーネント ライブラリ vue-cli をインポートして、オンデマンドで自動的にインポートする

1. パッケージマネージャー (NPM、Yarn など) を使用して Element Plus をインストールします。

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

2. まず 2 つのプラグインをインストールし、次の手順を実行しunplugin-vue-componentsますunplugin-auto-import。

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

# Yarn
$ yarn add -D unplugin-vue-components unplugin-auto-import

3.次のようにコードvue.config.jsを追加しますplugins

const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const {
    
     ElementPlusResolver } = require("unplugin-vue-components/resolvers");

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

4. vue ページに以下を追加して、導入が成功したかどうかをテストします。

<template>
  <div>
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>
</template>

5. 実行中のプロジェクトを再起動し、次のようにブラウザのスクリーンショットをプレビューします。

2: elementPlus の Icon アイコンを導入します

1. プロジェクトターミナルで実行する

# NPM
$ npm install unplugin-icons -D

# Yarn
$ yarn add unplugin-icons -D

2. main.ts に Icon アイコンをすべて導入します

import * as ElementPlusIconsVue from "@element-plus/icons-vue";

const app = createApp(App);

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    
    
  app.component(key, component);
}
app.mount("#app");

3.vueページで使用する

 <el-icon><Expand /></el-icon>

注意点：

1. ElementPlus公式Webサイトアドレス：https://element-plus.org/zh-CN/guide/installation.html#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE% A1 %E7%90%86%E5%99%A8