vueはどのような環境にインストールする必要がありますか?
vue は Node 環境をインストールする必要があります。 vue の動作はノードの npm 管理ツールに依存し、ノードを使用してパッケージ化とデプロイ、vue 単一ファイル コンポーネントの解析、各 vue モジュールの解析、テスト サーバー localhost の起動、および vue-router などのプラグインの管理を行うことができます。そしてvueリソース。
このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。
Vue プロジェクト開発のためにどのような環境を準備し、構成する必要がありますか?
最初に vue フレームワークを学び、開発環境を構築し始めると、多くの人が大小の落とし穴に遭遇すると思います。数か月後、2 回目には混乱があったので、今日はそれを整理したいと思いました;
vue は現在フロントエンドで使用されており、フロントエンドでより一般的に使用されるフレームワークの 1 つです。 angular place といくつかの類似点があるため、angular を使用したことのある友人は vue を学ぶのがそれほど難しいとは思わないはずです;
1: ノード環境をダウンロードしてインストールします
vue開発環境を構築する前に、必ずnode.jsをダウンロードしてください
#vueの動作はnodeのnpm管理ツールに依存します。 そして、node を使用する方が便利です。パッケージ化してデプロイし、vue 単一ファイル コンポーネントを解析し、各 vue モジュールを解析してそれらをまとめたり、テスト サーバー localhost を起動したり、vue-router の管理を支援したりできます。 、vue-resource などのプラグイン。したがって、通常は Vue ノード メソッドを使用します。これは便利で手間が省けます。 node は公式 Web サイトまたは中国語 Web サイトからダウンロードできます。お使いのコンピュータに応じて 32 または 64 を選択できます。URL: http://nodejs.cn;$ npm install -g cnpm -registry=https://registry .npm.taobao.org;
## 3: Taobao イメージが正常にインストールされたら、vue-cli スキャフォールディングをグローバルに使用して、次のコマンドを入力できます: #cnpm install --global vue-cli Enter キーを押して、インストールが完了したかどうかを確認します。成功した場合、コマンド Enter vue で vue 情報が出てきて、インストールは成功です;
# 4: 足場を構築した後、新しいプロジェクトの構築を開始する必要があります。vue によってダウンロードされるファイルは比較的大きいため、この時点では、C ドライブにインストールしないことをお勧めします。ドライブを変更するには、「D:」と入力して Enter キーを押します。ディスクを直接変更することもできます。
## 次に、新しいプロジェクトの作成を開始し、コマンド vue init webpack を入力します。 my-project Press Enter, my-project is 自分のフォルダーの名前は webpack に基づいたプロジェクトです。入力後、vue-router, ## をインストールするかどうかが表示されるまで Enter を押してください # これをプロジェクトで使用するため、「y」と入力して Enter キーを押すだけです
次は、js 構文検出が必要かどうかを示します。当面は必要ないので、直接 no と入力できます。残りの部分については、 「いいえ」を直接入力することもできます。当面は必要のないものばかりです。
4: フォルダーがダウンロードされました。各テンプレートは相互に依存しているため、フォルダーに入り、「 cd my-project」と入力して Enter キーを押します。依存関係をインストールする必要があります。
##コマンドを入力してください: cnpm install
##5: インストールしたら、ダウンロードしたテンプレートが正常に実行できるかどうかをテストする必要があります。コマンド ライン入力:
8080 はデフォルトのポートです。アクセスしたい場合は、直接 localhost と入力してください:ブラウザで 8080 をクリックしてデフォルトのテンプレートを開きます;
このようにして、Vue 基本プロジェクトがインストールされ、実行されます。 vue の; 花を散らして終了;
上記は vue-cli2.0 の足場構築方法ですが、4.0 にバージョンアップされ、プロジェクト構築方法がよりシンプルで便利になりました。
npm install -g @vue/cli、スキャフォールディング ツールをダウンロードします。ダウンロードが成功したら、コマンドを入力します: vue create <プロジェクト名> フォルダー名,
次に、最初の構成を選択します。デフォルト設定です。2 番目の設定は手動設定です。手動設定はプロジェクトのニーズに応じて異なります。必要なファイルを設定し (ただし、通常は便宜上デフォルト設定を選択します (笑))、フォルダーが作成されるまで待ちます。
ファイルが正常に作成されたら、コマンド npm runserve を直接入力すると、プロジェクトを実行できます。
関連する推奨事項: 「
vue.js チュートリアル以上がvueはどのような環境にインストールする必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック

vue.jsでJSファイルを参照するには3つの方法があります。タグ;; mounted()ライフサイクルフックを使用した動的インポート。 Vuex State Management Libraryを介してインポートします。

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション:カスタムスタイル。オプション:プラグインを使用します。

CSSアニメーションまたはサードパーティライブラリを使用して、VUEでマーキー/テキストスクロール効果を実装します。この記事では、CSSアニメーションの使用方法を紹介します。スクロールテキストを作成し、テキストを&lt; div&gt;をラップします。 CSSアニメーションを定義し、オーバーフローを設定します:非表示、幅、アニメーション。キーフレームを定義し、アニメーションの開始と終了時にtranslatex()を設定します。期間、スクロール速度、方向などのアニメーションプロパティを調整します。

Vue.jsでは、Lazy Loadingを使用すると、コンポーネントまたはリソースを必要に応じて動的にロードすることができ、初期ページの読み込み時間を短縮し、パフォーマンスを改善できます。特定の実装方法には、&lt; Keep-Alive&gt;および&lt;コンポーネントは&gt;コンポーネント。怠zyなロードは、FOUC(スプラッシュ画面)の問題を引き起こす可能性があり、不必要なパフォーマンスのオーバーヘッドを避けるために怠zyなロードが必要なコンポーネントにのみ使用する必要があることに注意してください。

Vueコンポーネントの合格値は、コンポーネント間でデータと情報を渡すメカニズムです。プロパティ(小道具)またはイベントを介して実装できます:プロップ:コンポーネントで受信するデータを宣言し、親コンポーネントにデータを渡します。イベント:$ EMITメソッドを使用して、VONディレクティブを使用してイベントをトリガーし、親コンポーネントでイベントを聞きます。

Vue Devtoolsを使用してブラウザのコンソールでVueタブを表示することにより、Vueバージョンを照会できます。 NPMを使用して、「NPM List -G Vue」コマンドを実行します。 package.jsonファイルの「依存関係」オブジェクトでVueアイテムを見つけます。 Vue CLIプロジェクトの場合、「Vue -Version」コマンドを実行します。 &lt; script&gt;でバージョン情報を確認してくださいVueファイルを参照するHTMLファイルにタグを付けます。

Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。

ページネーションは、パフォーマンスとユーザーエクスペリエンスを向上させるために、大きなデータセットを小さなページに分割するテクノロジーです。 VUEでは、次の組み込みメソッドを使用してページを使用できます。ページの総数を計算します。TotalPages()トラバーサルページ番号:V-For Directive on Currentページを設定します。
