Element UI をインストールして vue3.0 でベクター グラフィックスを使用する方法

• ここでは、v3 のインストールと使用にのみ焦点を当てます。v2 について学びたい場合は、公式 Web サイトに移動してください: https://element.eleme.io/#/zh-CN/component/installation
• v3 公式サイト: https://element-plus.org/zh-CN/guide/installation.html
• 要素 ui を使用する場合の vue2 と vue3 の違い
• インストールコマンド

v2のアイコンはフォントを使用し、v3のアイコンはsvgを使用します。

要素UIのインストール

• npmを使用してインストールする

npm インストール element-plus --save

アイコンアイコンをインストールする必要があります

npm をインストール @element-plus/icons-vue

• 使用

main.js にグローバル転送する

'element-plus' から elementPlus をインポートします
'element-plus/dist/index.css' をインポートします。
'@/assets/css/index.scss' をインポートします。
//外部ベクターグラフィックを導入する import '@/assets/iconfont/iconfont.css'
const app = createApp(App);
app.config.globalProperties.axios = axios;
アプリ
.use(要素プラス)
.mount('#app');

Element UIで指定されているラベルの書き方に従って、普通にコードを記述します。

vueファイルはアイコンアイコンを使用します

<el-icon :size="サイズ" :color="色"> <編集></編集> </el-icon>
または <編集></編集>
<場所を追加/>
//ベクターイラスト<i class="iconfont icon-huyan"></i>
//使用する必要があるアイコン（svg）を導入します
'@element-plus/icons-vue' から {Edit,AddLocation} をインポートします。
コンポーネント:{ 編集、場所の追加 }

プロジェクトにベクターグラフィックスを導入する

ダウンロード

• 使用

これら6つのファイルをプロジェクトにコピーし、使用する前にmain.jsにインポートします。

これで、vue3.0 での Element UI のインストールとベクター グラフィックスの使用に関するこの記事は終了です。vue3.0 での Element UI のインストールに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。