フロントエンドでwebstormを使用してvueプロジェクトを構築する

この記事は初心者向けです。

最初に理解する必要があるのは、いくつかの名詞(概念)です。

Node.js:

Node.jsは、Chrome V8エンジンに基づくJavaScript実行環境です。 
Node.jsは、イベント駆動型の非ブロッキングI / Oモデルを使用して、軽量で効率的なものにします。 

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

標高:

 

Node Package Managerと呼ばれるNpmは、Node.jsに基づくパッケージマネージャーであり、Node.jsコミュニティ全体で最も人気がありサポートされているサードパーティのモジュールパッケージマネージャーです(JavaのMavenに似ています)。

npmの当初の意図:JavaScript開発者は、コードをより簡単に共有および再利用できます。

npmの使用シナリオ:

  • ユーザーがサードパーティのパッケージを取得して使用できるようにします。
  • ユーザーが自分のパッケージまたはコマンドラインプログラムを公開および共有できるようにします。

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

 

Webpack

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

以下のトピックを入力してください

まず最初に、webstorm、node.js

 ノードのバージョンに注意してください。調和モードをサポートするノードのみがes6をサポートし、webpackに基づいてプロジェクト名を構築するときにエラーを報告しません。最新バージョンをお勧めします。

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

2. Taobaoミラーをインストールします(Alibaba Cloudのmaven中央倉庫ミラーに似ています)

インストール時間が少し長い

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

確認コマンド:cnpm -v

3. webpackをインストールする

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

 

4.次のステップは、vue-cliをグローバルにインストールすることです。やや長い

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

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

5.以下のWebStormの使用を開始します

重要なことは、WebStormでプロジェクトを作成する場合はgitをインストールすることです。インストールは非常に簡単です。ダウンロードとインストールは公式ウェブサイトで確認できます。それ以外の場合はインストールされない可能性があります。

 

赤は新しい注文、緑はnode.jsアドレス(インストール時に自動的に検出されます)、青はvue.jsパッケージのアドレス、黄色はパッケージに使用されるパッケージモジュールです

 

プロジェクト名を入力します。プロジェクト名に大文字を含めることはできません。

次のステップ、プロジェクト構造をクリックするだけです

package.jsonを選択して右クリックし、show npmスクリプトを選択します。

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

リリース7件のオリジナルの記事 ウォン称賛69 ビュー200,000 +

おすすめ

転載: blog.csdn.net/u014320421/article/details/105639012