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タグのスタイルに幅属性を設定する方法

推薦する

JavaScriptは、ユーザーがチェックボックスをオンにする必要があるプロトコルの例を実装します。

js では、ログインまたは登録を確認する前に、ユーザーが特定の契約書を読むように設定します (使用...

Vue 監視属性のグラフィック例の詳細な説明

目次リスナープロパティとは何ですか?リスニングプロパティと計算プロパティの違いは何ですか?監視プロパ...

1つの記事でJSONPの原理と応用を理解する

目次JSONPとはJSONP 原則JSONP実装1. Ajaxでクロスドメインリクエストが行われると...

Vue3.0プロジェクトの構築と利用プロセス

目次1. プロジェクト構築2: ディレクトリ構造3: コンポジションAPI 4: 基本的な使い方:最...

CentOS MySQLデータベースのスケジュールバックアップを実装する方法

次のスクリプトは、MySQLデータベース全体のスケジュールされたバックアップに使用されます。 mys...

セマンティックタグを使用して、IE6、7、8と互換性のあるHTMLを記述します。

HTML5 では、ヘッダー、フッター、ナビゲーションなどのセマンティック タグが追加されているため...

MySQLのorder byとlimitを混在させる際の落とし穴の詳細な説明

MySQL では、ソートには order by を、ページングには limit をよく使用します。最...

WebpackはCSSファイルを読み込み、その設定方法

webpackはCSSファイルとその設定をロードします複数の CSS ファイルを作成した後、HTML...

Nginx で IP と IP 範囲をブロックする方法

前面に書かれたNginx は単なるリバース プロキシおよび負荷分散サーバーではなく、電流制限、キャッ...

layui をベースにしたログインページの実装

この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています...

Vue ベースの円形スクロールリスト機能を実装する

注: 親コンテナーに高さと :data='Array' および overfolw:h...

Windows での MySQL コミュニティ サーバー 8.0.16 のインストールと構成方法のグラフィック チュートリアル

最近、MySQL関連の構文をよく見かけます。また、MySQLストアドプロシージャの書き方も学びたいの...

DD DT DLタグの使用例

通常は <ul><li> タグを使用しますが、dd タグと dt タグも便利...

Nginx リクエスト制限の設定方法

Nginx は、多くの優れた機能を備えた強力で高性能な Web およびリバース プロキシ サーバーで...

WeChatミニプログラムでのマップの正しい使用例

目次序文1. 準備2. 実際の戦闘2.1 ミニプログラムの権限を設定する2.2 カプセル化ツールの機...