Vue3でelement-plusを使用する方法の詳細な説明

Vue3でelement-plusを使用する方法の詳細な説明

Vue3がリリースされてからしばらく経ちますが、elementもvue3と互換性のあるバージョンにアップデートしました。ここではelement-plusの使い方を簡単に紹介します。

1. インストール

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

2. main.jsにインポートする

'vue' から {createApp, Vue} をインポートします。
'element-plus' から ElementPlus をインポートします。
'element-plus/dist/index.css' をインポートします。
'./App.vue' からアプリをインポートします。

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

3. 使用

ここではボタンを使用します

<el-行>
  <el-button>デフォルトボタン</el-button>
  <el-button type="primary">プライマリボタン</el-button>
  <el-button type="success">成功ボタン</el-button>
  <el-button type="info">情報ボタン</el-button>
  <el-button type="warning">警告ボタン</el-button>
  <el-button type="danger">危険ボタン</el-button>
</el-row>

詳細については公式ドキュメントを参照してください

Vue3 で element-plus を使用する方法についての記事はこれで終わりです。Vue3 で element-plus を使用する方法についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue3でアイコンを使用する2つの例
  • Vue3 の element-plus で Icon アイコンをグローバルに使用するプロセスの詳細な説明

<<:  uni-app で scss を使用するサンプル コード

>>:  ARMアーキテクチャにおける関数呼び出しプロセスの簡単な分析

推薦する

VMware および CentOS システムのインストール方法 - ルート パスワードをリセットする

今日のタスク1. Linuxディストリビューションの選択2.vmwareが仮想マシン(centos)...

Ubuntu での CUDA と CUDNN のインストールとアンインストールの実装

目次序文グラフィックドライバーをインストールするCUDAをアンインストールするCUDAをインストール...

Vueのシンプルストアの詳しい説明

Vue におけるストアの最も単純な応用はグローバル ストレージです。ここでは、相互にジャンプするため...

vue3 でブロック崩しゲームを開発する方法をステップバイステップで教えます

序文vue3 を使った例をいくつか書いてみましたが、Vue3 のコンポジション API はよく設計さ...

Linux の高性能ネットワーク IO と Reactor モデルの分析

目次1. 基本概念の紹介2. ネットワークIOの読み取りと書き込みのプロセス3. 5つのLinuxネ...

MySQL コマンドライン操作中のエンコードの問題の詳細な説明

1. MySQLデータベースのエンコーディングを確認する mysql -u ユーザー名 -p パスワ...

MySQLはフィールドからカンマ区切りの値を取り出して新しいフィールドを形成します

1例: 図1のフィールドを図2に分割するには アカウントIDを選択、 サブストリングインデックス(サ...

CSS子要素選択親要素の実装

通常、CSS セレクターは上から下に選択し、親要素を介して子要素を選択します。では、子要素を介して親...

MySQL でテーブル データを削除した後もディスク領域がまだ占有されているのはなぜですか?

目次1.MySQLデータ構造2. テーブルファイルのサイズは変更されておらず、MySQLの設計に関連...

Linuxファイアウォールiptablesの詳細な紹介、設定方法と事例

1.1 iptablesファイアウォールの概要Netfilter/Iptables (以下、Ipta...

Mysql5.7.18 のインストールとマスタースレーブレプリケーションの詳細なグラフィック説明

CentOS6.7にmysql5.7.18をインストールする 1. /usr/localディレクトリ...

CSS3 での 2D および 3D 変換の実装

CSS3 は、要素の 2D 平面変換と視覚的な 3D 空間変換を実装します。2D 変換はより頻繁に使...

Tomcat サーバーが tomcat7w.exe を開けない場合の解決策

今日、Tomcat サーバーの設定時にちょっとした問題が発生したので、参考までにいくつかご説明したい...

UbuntuはPythonスクリプトのサンプルコードを定期的に実行する

オリジナルリンク: https://vien.tech/article/157序文この記事では、Ub...

HTML 挿入画像の例 (HTML 追加画像)

HTML に画像を挿入するには、画像を表示するための HTML タグが必要です。これは、img タ...