初心者向けの Webstorm を使用して Vue プロジェクトを構築する詳細なプロセス

この記事の内容は、初心者向けに Webstorm を使用して Vue プロジェクトを構築する詳細なプロセスに関するもので、必要な方は参考にしていただければ幸いです。

この記事は初心者のみを対象としています。

まず、いくつかの名詞 (概念) を理解する必要があります。

Node.js:

Node.js は、Chrome V8 エンジンに基づく JavaScript ランタイム環境です。
Node.js はイベント駆動型のノンブロッキング I/O モデルを使用しており、軽量かつ効率的です。

Node.js のパッケージ マネージャー npm は、世界最大のオープンソース ライブラリ エコシステムです。

npm:

npm は Node Package Manager の略で、Node.js コミュニティ全体で最も人気のあるパッケージ マネージャーでもあります。ほとんどのサードパーティ モジュール (Java の Maven に似ています)。

npm の本来の目的: JavaScript 開発者がコードを共有し、再利用しやすくすることです。

npm の使用シナリオ:

• ユーザーがサードパーティのパッケージを取得して使用できるようにします。

• ユーザーは、自分で作成したパッケージまたはコマンド ライン プログラムを公開および共有できます。

npm バージョン クエリ: npm -v

Webpack

WebPack はモジュール パッケージャーとみなすことができます。これが行うことは、分析です。プロジェクトの構造を確認し、ブラウザで直接実行できない JavaScript モジュールやその他の拡張言語 (Scss、TypeScript など) を見つけて、ブラウザで使用するのに適した形式に変換してパッケージ化します。

本題に入ります

まず、webstorm、node.js

ノードのバージョンに注意してください。ハーモニー モードをサポートするノードのみが es6 をサポートします。 Webpack に基づいてプロジェクト名をビルドする場合のみ、エラーは報告されません。最新バージョンを推奨します。

1. インストール パッケージをダウンロードしたら、クリックするだけでインストールできます。テスト インストールを成功させるためのインターフェイスは次のとおりです:

2. Taovao イメージをインストールします (Alibaba Cloud の Maven 中央倉庫イメージと同様)

インストール時間は次のとおりです。少し長い

インストール コマンド: npm install -g cnpm --registry=https://registry.npm.taabao.org

検証コマンド: cnpm -v

3. webpack をインストールします

npm を使用して webpack をインストールします。コマンド ライン ステートメントは npm install webpack -g です。もう少し時間がかかります。テスト インストールを成功させるためのインターフェイスは次のとおりです:

4 次のステップは、vue-cli をグローバルにインストールすることです。少し時間がかかります。

インストール ステートメントは次のとおりです: npm install --global vue-cli

検証コマンド: vue -V (V は大文字にする必要があります)

5. WebStorm を使い始めましょう

重要な点は、WebStorm を使用してプロジェクトを作成する場合は、git をインストールする必要があるということです。インストールは非常に簡単です。公式 Web サイトからダウンロードしてインストールするだけです。

#赤色は新しく作成されたシーケンス、緑色はノードです。 js アドレス (インストール後はしばらく時間がかかります) 自動検索)、青は vue.js パッケージのアドレス、黄色はパッケージ化に使用されるパッケージング モジュール

Fillプロジェクト名には大文字を含めることはできないことに注意してください。

#次のステップ、プロジェクト構造をクリックし続けてください。

package.json を選択し、右クリックして [show npm scripts] を選択します。

dev を選択し、ダブルクリックしてテストします。正常に開くと、投稿のようにデフォルトのポートが表示され、ブラウザで開くと以下のページが表示されれば成功です。このような Vue プロジェクトは正常に作成されました

#

以上が初心者向けの Webstorm を使用して Vue プロジェクトを構築する詳細なプロセスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。