element-plus でオンデマンドインポートとグローバルインポートを実装する方法

npm をインストールして、vue-components をアンプラグインします。

// vite.config.ts
'unplugin-vue-components/vite' からコンポーネントをインポートします。
'unplugin-vue-components/resolvers' から { ElementPlusResolver } をインポートします。
​
エクスポートデフォルト{
  プラグイン: [
   // ...
   コンポーネント({
    リゾルバ: [ElementPlusResolver()],
  }）、
  ]、
}

// webpack.config.js
const コンポーネント = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
​
モジュール.エクスポート = {
  // ...
  プラグイン: [
   コンポーネント({
    リゾルバ: [ElementPlusResolver()],
  }）、
  ]、
}

//メイン.ts
'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
​
import { Edit,Search } from '@element-plus/icons' //アイコンは別途インポートする必要があり、必要に応じてアイコンをインポートします import { ElButton } from 'element-plus'; //必要に応じてインポートします
const app = createApp(App);
//コンポーネントを登録する app.component("edit", Edit)
app.component("検索", 検索)
app.component('エルボタン',エルボタン)
app.mount('#app');

<テンプレート>
    <h2>ホームページ</h2>
   <el-button type="primary" >プライマリボタン</el-button>
   <el-button type="success" >成功ボタン</el-button>
   <el-icon :size="20" :color="'blue'">
     <編集 />
   </el-icon>
   <el-icon :size="20">
     <検索></検索>
   </el-icon>
</テンプレート>
<スクリプト設定 lang="ts"> 
</スクリプト>

// tsconfig.json
{
  "コンパイラオプション": {
   // ...
   "types": ["要素プラス/グローバル"]
  }
}

npm インストール element-plus --save
＃ または
糸追加要素プラス
​
# アイコン依存ライブラリをインストールする npm install @element-plus/icons
＃ または
糸を追加 @element-plus/icons

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
'./store' から { store, key } をインポートします。
//ルーティングを挿入import router from './router';
​
// UI ライブラリをグローバルにインポートします import ElementPlus from 'element-plus'
'element-plus/dist/index.css' をインポートします。
​
const app = createApp(App);
app.use(ストア、キー);
app.use(ルーター);
app.use(ElementPlus);
app.mount('#app');

//特定のコンポーネントをインポートした後、直接 <template> を使用する
   <el-icon :size="20" :color="'blue'">
     <編集 />
   </el-icon>
</テンプレート>
<スクリプト設定 lang="ts">
   '@element-plus/icons' から { 編集 } をインポートします
</スクリプト>

<テンプレート>
    <h2>ホームページ</h2>
   <el-button type="primary" >プライマリボタン</el-button>
   <el-button type="success" >成功ボタン</el-button>
   <el-icon :size="20" :color="'blue'">
     <編集 />
   </el-icon>
   <el-icon :size="20">
     <検索></検索>
   </el-icon>
</テンプレート>
<スクリプト設定 lang="ts"> 
</スクリプト>