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が大量のデータを処理する際にクエリ速度を最適化するいくつかの方法

推薦する

入力ボックスのオートコンプリート機能をオフにする

これで、autocomplete と呼ばれる input の属性を使用できるようになりました。オート...

Vueベースのカスタムコンポーネントを実装してアイコンを導入する

序文プロジェクト開発では、アイコンを使用する方法はたくさんあります。iconfont で適切なアイコ...

MySQLシリーズ マルチテーブル結合クエリ92および99構文例詳細チュートリアル

目次1. デカルト積現象2. 接続クエリの知識ポイントのまとめ1) 結合クエリとは何ですか? 2) ...

サーバーストレステストの概念と方法 (TPS/同時実行性)

目次1 ストレステストの指標1.1 秒あたり1.2 クォータ1.3 平均処理時間(RT) 1.4 同...

ドラミング効果を実現するJavascript

この記事では、ドラミング効果を実現するためのJavascriptの具体的なコードを参考までに紹介しま...

ウェブ理論: 考えさせない読書ノート

第 1 章<br /> Web ページをユーザーにとって使いやすいものにするための最も重...

写真のプレビューとアップロード機能を実現するhtml+css+js

はじめに: Web ページを作成するときに、画像をアップロードする必要がある場合がよくあります。画像...

Vue での親子コンポーネント通信と、sync を使用して親子コンポーネント データを同期する

目次序文子コンポーネントは親コンポーネントにデータを渡す1. 親コンポーネントから子コンポーネントに...

HTML ウェブページのメタビューポート属性の説明

HTML メタビューポート属性の説明ビューポートとはモバイル ブラウザは、Web ページを仮想の「ウ...

IE6 の歪み問題

質問: <form...> の下の <input type="hidde...

Navicat が MySQL に接続するときに発生する 1045 エラーの解決方法

ローカル データベースに接続すると、Navicat for MySQL は以下のように 1045 エ...

Linuxはiftopを使用してネットワークカードのトラフィックをリアルタイムで監視します

Linux は iftop を使用してネットワーク カードのトラフィックをリアルタイムで監視します。...

JavaScriptは行削除機能を備えたテーブルを動的に生成します

この記事の例では、テーブルを動的に生成したり行を削除したりするためのJavaScriptの具体的なコ...

Vue でデータが変更された後にビューを同期的に更新する方法

序文少し前に、興味深い問題を目にしました。Vue のデータが変更された後に、ビューを同期的に更新する...

JS と Nodejs におけるイベント駆動型開発についての簡単な説明

目次イベント駆動型とパブリッシュ・サブスクライブ型ブラウザの JavaScript ではイベント駆動...