vue3+vite のインストールと構成要素プラス

 エレメントプラスの構成

1. インストール

yarn add element-plus @element-plus/icons-vue

2. オンデマンドでプラグインをインポートする

yarn add unplugin-vue-components unplugin-auto-import -D

3. vite.config.ts を設定する

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

4. main.tsに導入

注: オンデマンドでインポートする場合、element-plus を main.ts に導入する必要はありません。プラグインは自動的にマウントおよび処理され、グローバルに直接使用できます。

main.ts の element-plus スタイルとアイコンを紹介します。

import * as ElementPlusIconsVue from '@element-plus/icons-vue'; //引入图标
import 'element-plus/dist/index.css'; //引入样式

//...

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

4.vueコンポーネントでの使用
 

 <el-tag class="count-tag" @click="counterAddAdd">count is {
   
   { counter }}</el-tag>