初心者向けの Webstorm を使用して Vue プロジェクトを構築する詳細なプロセス
- 不言転載
- 2018-09-30 13:37:1318847ブラウズ
この記事の内容は、初心者向けに 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 サイトからダウンロードしてインストールするだけです。
#次のステップ、プロジェクト構造をクリックし続けてください。
package.json を選択し、右クリックして [show npm scripts] を選択します。
dev を選択し、ダブルクリックしてテストします。正常に開くと、投稿のようにデフォルトのポートが表示され、ブラウザで開くと以下のページが表示されれば成功です。このような Vue プロジェクトは正常に作成されました
#
以上が初心者向けの Webstorm を使用して Vue プロジェクトを構築する詳細なプロセスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。