vue は Node 環境をインストールする必要があります。 vue の動作はノードの npm 管理ツールに依存し、ノードを使用してパッケージ化とデプロイ、vue 単一ファイル コンポーネントの解析、各 vue モジュールの解析、テスト サーバー localhost の起動、および vue-router などのプラグインの管理を行うことができます。そしてvueリソース。
このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。
最初に 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; 2: ノードをダウンロードした後、ドキュメント管理ツールを開き、ノードが正常にインストールされているかどうかを確認します。「node -v」と入力して Enter キーを押します。ノードのバージョン番号が出力されます。 インストールは成功しました。中国で npm を使用すると非常に時間がかかるため、ここでは淘宝の npm イメージを使用することをお勧めします。 淘宝の cnpm コマンド管理ツールを使用できます。デフォルトの npm 管理ツールの代わり:$ 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: インストールしたら、ダウンロードしたテンプレートが正常に実行できるかどうかをテストする必要があります。コマンド ライン入力:
npm run dev して Enter キーを押します。
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 サイトの他の関連記事を参照してください。