vue3.0 で要素を使用するための完全な手順

vue3.0 で要素を使用するための完全な手順

序文:

vue3.0の要素フレームワークを使用します。要素はvue2.0をサポートしており、vue3.0をサポートするバージョンはelement-plusと呼ばれます。

公式サイト入口:ここをクリックして入場

1. 個人的な問題と解決策:

発生した問題:

cnpm i element-plus -Sを使用してバージョンを直接インストールしました。理由はわかりませんが、エラー図1、バージョンモデル図2が報告され続け、私のコードは図3を使用しています。

解決:

package.json の element-plus のバージョンを以下の文に変更したところ、問題は解決しました (最新バージョンの問題かどうかはまだ検証中です)

"要素プラス": "^1.0.1-alpha.19",

2. 特定の用途

1. グローバル紹介:

cnpm i element-plus -Sをインストールします。

main.js に追加:

'element-plus/lib/theme-chalk/index.css' をインポートします。
'element-plus' から ElementPlus をインポートします
 
const app = createApp(App)
app.use(ElementPlus)
app.use(store).use(router).mount('#app')

ページ上での通常の使用

2. オンデマンドインポート:

(1) cnpm i element-plus -Sをインストールする

(2)新しいフォルダpluginsを追加し、新しい設定ファイルelement.jsを作成します。

輸入 {
 // エルアラート、
 エルアサイド、
 // ElAutocomplete、
 // エラバター、
 // エルバックトップ、
 // エルバッジ、
 // エルブレッドクラム、
 // Elブレッドクラムアイテム、
 エルボタン、
 // ElButtonGroup、
 // エルカレンダー、
 // エルカード、
 // エルカルーセル、
 // ElCarouselItem、
 // エルカスケーダー、
 // ElCascaderPanel、
 // Elチェックボックス、
 // Elチェックボックスボタン、
 // ElCheckboxGroup、
 // エルコル、
 // エルコラプス、
 // ElCollapseItem、
 // ElCollapseTransition、
 // ElColorPicker、
 エルコンテナ、
 // ElDatePicker、
 // エルダイアログ、
 // エルディバイダー、
 // エルドローワー、
 エルドロップダウン、
 Elドロップダウンアイテム、
 Elドロップダウンメニュー、
 // エルフッター、
 エルフォーム、
 ElFormItem、
 エルヘッダー、
 // エルアイコン、
 // エルイメージ、
 エル入力、
 // ElInputNumber、
 // エルリンク、
 エルメイン、
 エルメニュー、
 エルメニュー項目、
 ElMenuItemGroup、
 // Elオプション、
 // ElOptionGroup、
 // ElPageHeader、
 // ページネーション、
 ElPop確認、
 // エルポポバー、
 エルポッパー、
 // エルプログレス、
 // エルラジオ、
 // ラジオボタン、
 // エルラジオグループ、
 // エルレート、
 // エルロウ、
 // エルスクロールバー、
 // ElSelect、
 // エルスライダー、
 // エルステップ、
 // エルステップス、
 Elサブメニュー、
 // エルスイッチ、
 エルタブペイン、
 エルタブ、
 // エルテーブル、
 // ElTableColumn、
 // エルタイムライン、
 // Elタイムラインアイテム、
 Elツールチップ、
 // エルトランスファー、
 // エルツリー、
 // エルアップロード、
 // 無限スクロール、
 // ElLoading、
 // エルメッセージ、
 エルメッセージボックス、
 エル通知
} 'element-plus' より
'element-plus/lib/locale/lang/zh-cn' から lang をインポートします。
'element-plus/lib/locale' からロケールをインポートします。
 
エクスポートデフォルト(アプリ)=> {
 ロケールの使用(言語)
 app.use(エルボタン)
 app.use(ElNotification)
 app.use(ElContainer)
 app.use(エルアサイド)
 app.use(ElHeader)
 app.use(ElMain)
 app.use(ElDropdown)
 app.use(ElDropdownItem)
 app.use(ElDropdownMenu)
 app.use(ElTabPane)
 app.use(ElTabs)
 app.use(エルメニュー)
 app.use(ElMenuItem)
 app.use(ElMenuItemGroup)
 app.use(Elサブメニュー)
 app.use(エルツールチップ)
 app.use(ElPopper)
 app.use(ElPopconfirm)
 app.use(ElMessageBox)
 app.use(ElInput)
 app.use(ElForm)
 app.use(ElFormItem)
}

(3)main.jsでの設定

(4)通常の要素と同じように使用する

要約する

vue3.0 での要素の使用に関するこの記事はこれで終わりです。vue3.0 での要素の使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue-element-adminフレームワークを使用して、バックエンドからメニュー機能を動的に取得します。
  • Vue+elementUI コンポーネントは、折りたたみ可能な動的レンダリングのマルチレベル サイドバー ナビゲーションを再帰的に実装します。
  • プレーヤー機能を実現するためのvue + element uiのサンプルコード
  • Vue要素のバックグラウンド認証プロセスの分析
  • Vue ベースの要素ボタン権限実装ソリューション
  • Vue+element+oss はフロントエンドのフラグメントアップロードとブレークポイント再開を実現します
  • 要素 DateTimePicker+vue ポップアップボックスに時間のみが表示される問題を解決する
  • VueはElementUIのフォームサンプルコードを模倣する
  • Vue Elementのテーブルコンポーネントをカプセル化する方法
  • Vue Element フロントエンドアプリケーション開発 従来の Element インターフェースコンポーネント

<<:  Linux で txt を mysql にインポートする方法

>>:  MySQLが大量のデータを処理する際にクエリ速度を最適化するいくつかの方法

推薦する

JS ループで async と await を正しく使用する方法

目次概要(ループモード - 共通)配列と非同期メソッドを宣言して反復するforループで使用するマップ...

VMwareがモジュールディスクを早期に開けない場合の解決策の詳細な説明

VMWare (Virtual Machine ware) は、「仮想 PC」ソフトウェア会社です。...

vue3 の setUp とリアクティブ関数の使用方法の詳細な説明

1. いつsetUpを実行するかvue3 ではメソッドを正常に使用できるようになったことは誰もが知っ...

デザイン理論:計画、リソース、コミュニケーションの問題について

<br />多くの中小企業ではこの問題は発生しません。中小企業はデザイナーをサポートし、...

CentOS で yum を使用して rabbitmq-server をインストールする方法

RabbitMQをインストールする前にSocatをインストールする必要があります。そうしないと、Ra...

JavaScript配列をツリー構造に変換する方法

1. 需要バックエンドは、フロントエンドがツリー構造(重複データなし)に変換するためのデータを提供し...

mysql5.6 以前のデータベースで json をクエリする方法

MySQLにデータを保存するとき、乱雑であまり使用されないデータがJSONフィールドに投げ込まれるこ...

DPlayer.js ビデオ再生プラグインの使い方

DPlayer.jsビデオプレーヤープラグインは使いやすい主な用途: ビデオの再生、監視の開始、終了...

セマンティック HTML タグの紹介

ここ数年、ウェブサイト開発では DIV+CSS が非常に人気があり、当時は大きな騒動を引き起こしまし...

MySQLインデックスの詳細

1. インデックスの原則インデックスは、列内の特定の値を持つ行をすばやく見つけるために使用されます。...

5分でDockerをインストールする詳細な手順

CentOS に Docker をインストールするには、オペレーティング システムが CentOS ...

入力が正しいにもかかわらず、MySQL 8.0 でアクセスが拒否される問題を解決する

最近、MySQL を学び始めました。インストールはスムーズに進み、インターネット上の既成のチュートリ...

MySQL InnoDB ReplicaSet の簡単な紹介

目次01 InnoDBレプリカセットの紹介02 InnoDBレプリカセットの制限03 導入前に知って...

MySQLにおけるトランザクションの永続性実装原理の詳細な説明

序文データベース トランザクションに関して言えば、トランザクションの ACID 特性、分離レベル、解...