Vueのインストール方法の紹介

Vueのインストール方法の紹介

vue 、新しいプラグインを開発したり、コンポーネントをグローバルに登録したりするためのinstallを提供します。

installメソッドの最初のパラメータはvueコンストラクタであり、2番目のパラメータはオプションのオプションオブジェクトです。

エクスポートデフォルト{

	インストール(Vue,オプション){

		コンポーネントディレクティブミックスインマウントvueプロトタイプ}

}

1. グローバルに登録されたコンポーネント

'@/components/PageTools/pageTools.vue' から PageTools をインポートします。

'./update/index.vue' から更新をインポートします。

'./ImageUpload/ImageUpload.vue' から ImageUpload をインポートします。

'./ScreenFull' から ScreenFull をインポートします

'./ThemePicker' から ThemePicker をインポートします

'./TagsView' から TagsView をインポートします。

エクスポートデフォルト{

  インストール(Vue) {

    Vue.component('ページツール', ページツール)

    Vue.component('更新', 更新)

    Vue.component('画像のアップロード', 画像のアップロード)

    Vue.component('ScreenFull', スクリーンフル)

    Vue.component('ThemePicker', テーマピッカー)

    Vue.component('TagsView', TagsView)

  }

}

main.jsでは、直接参照とVue.useを使用して登録します。

'@/components' からコンポーネントをインポートします

Vue.use(コンポーネント)

2. グローバルカスタム指示

エクスポートデフォルト{

	インストール(Vue){

		Vue.directive('pre',{

			挿入(ボタン、バインド){

				button.addEventListener('click',()=>{

					if(!button.disabled){

						ボタンを無効にします。

						タイムアウトを設定します(()=>{

							ボタンが無効 = false

						},1000)

					}

				})

			}

		})

	}

}

main.jsでは、コンポーネントを登録するのと同じように

'@/aiqi' から pre をインポートします

Vue.use(事前)

これで、vue のインストール方法に関するこの記事は終了です。vue のインストール方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueのプラグインの仕組みとインストールの詳細を深く理解する
  • vue npm install 指定されたバージョンをインストールする操作
  • vueカスタムコンポーネント(Vue.use()で使用)はインストールの使用法です
  • Vue の落とし穴 - プロジェクトに依存モジュールをインストールすると npm install がエラーを報告する

<<:  Linux Samba サーバーの超詳細なインストールと構成 (問題解決付き)

>>:  spanタグのスタイルに幅属性を設定する方法

推薦する

バックエンド管理システムを構築するためのvue-element-adminの実装手順

最近、カンファレンスの健康申告システムに取り組んでいたとき、バックエンドを構築する必要があり、vue...

MySQL の group by と order by を一緒に使用する方法

テーブル:reward(報酬テーブル)があるとします。テーブル構造は次のようになります。 テーブルt...

シンプルなCSSアニメーションのtransition属性の詳しい説明

1. 遷移属性の理解1. transition 属性は、次の 4 つの遷移プロパティを設定するために...

WeChatアプレットがユーザーの移動軌跡を記録

目次設定を追加json 構成レイヤー構成の表示論理層の構成位置追跡をオンにする録音を開始開始座標を決...

フロントエンドのパフォーマンス最適化 - フロントエンドエンジニアが話し合うべき問題点

はじめに<br />前回の記事「私の CSS アーキテクチャ コンセプト」では、公園で友...

純粋な CSS でフォ​​ーム検証を実装するためのサンプル コード

日常業務において、フォームの検証は非常に一般的な設計要件です。ログイン ボックスや登録ボックス、アン...

Windows 10 に MySQL 8.0.19 を zip 形式でインストールする詳細なチュートリアル

目次1.ダウンロード後、インストールしたいディレクトリに解凍します。 2. インストールディレクトリ...

Linux での Firewalld の高度な設定の使用に関する詳細な説明

IPマスカレードとポート転送Firewalldは2種類のネットワークアドレス変換をサポートしています...

VMware ESXi 5.5 の展開および構成図のプロセス

目次1. インストール要件2. OSイメージのダウンロード3. VMware Workstation...

イントラネット侵入を実現するためのSSHポート転送

LAN 内のマシンは外部ネットワークにアクセスできますが、外部ネットワークは内部ネットワークにアクセ...

MySQL での Truncate の使用法の詳細な説明

序文:テーブルをクリアしたいときは、truncate ステートメントをよく使用します。ほとんどの場合...

Docker コンテナにデプロイされた Django のタイムゾーンの問題

目次Django でのタイムゾーン設定USE_TZ=真USE_TZ=偽Linux コンテナでのタイム...

WeChatアプレット実装アンカー位置決め機能の例

序文小規模なプログラムの開発では、リストをスクロールして表示する必要性に遭遇することがよくあります。...

CSS3+ベジェ曲線でスケーラブルな入力検索ボックス効果を実現

では、早速レンダリングを見てみましょう。 コア コードはtransition: cubic-bezi...