ホームページ > ウェブフロントエンド > フロントエンドQ&A > vueはどのような環境にインストールする必要がありますか?

vueはどのような環境にインストールする必要がありますか?

青灯夜游
リリース: 2023-01-11 09:22:51
オリジナル
13666 人が閲覧しました

vue は Node 環境をインストールする必要があります。 vue の動作はノードの npm 管理ツールに依存し、ノードを使用してパッケージ化とデプロイ、vue 単一ファイル コンポーネントの解析、各 vue モジュールの解析、テスト サーバー localhost の起動、および vue-router などのプラグインの管理を行うことができます。そしてvueリソース。

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;

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 サイトの他の関連記事を参照してください。

関連ラベル:
vue
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート