WebのフロントエンドでのVuevuecli環境の構築は単純で整理されています(いくつかの簡単な注意事項)

WebのフロントエンドでのVuevuecli環境の構築は単純で整理されています(いくつかの簡単な注意事項)

コンテンツ

WebのフロントエンドでのVuevuecli環境の構築は単純で整理されています(いくつかの簡単な注意事項)

1.簡単な紹介

第二に、実現原理

3.注意が必要な事項

4.インストール手順

ノードのインストール(npm)

 npmグローバルパッケージのインストールパスを変更します(Cドライブになくてもグローバルパッケージをインストールできます)

cnpmをインストールして、npmのインストールが遅い、またはインストールが不可能であるという問題を解決します

vuecli環境をインストールします

vueコマンドを使用してプロジェクトを作成し、実行します


1.簡単な紹介

       同様の問題が後で発生する可能性があり、時間内に参照して使用できるように、Web開発に関するある程度の知識が整理されています。

このセクションでは、フロントエンドWeb開発でのVue cliの使用と、環境のインストールと構築について紹介します。欠点がある場合は指摘するか、より良い方法がある場合はメッセージを残してください。

動作環境:

  • 10勝
  • ノード16.14.2バージョン
  • npmバージョン8.5.0
  • @ vue / cli 5.0.4

第二に、実現原理

インストール

1.ノードの関連コマンドを使用して操作します(ノードがインストールされていない場合は、最初にインストールする必要があります)

2. npm install -g @ vue / cliインストール(注:vue-cliスキャフォールディングをインストールするには、現在、v3.0以降のノードバージョンが必要です)

作成

1. vue create hello-vue-cliを使用して、hello-vue-cliプロジェクトを作成します

2. cd hello-vue-cli / npm run serve run、対応するURLを入力してWebを閲覧します

3.注意が必要な事項

1. vue-cliスキャフォールディングをインストールするには、現在、v3.0以降のノードバージョンが必要です。

2. npm install -g @ vue / cliplus-gはグローバルにインストールされます
 

2つのインストール
方法npmには2つのインストール方法があり、グローバルインストールとローカルインストールに分けられます。

グローバルインストールとは、どのフォルダでも実行できることを意味します。実際、原則は環境変数に書き込むことです。コマンドラインにコマンドを入力するたびに、次の設定に従って実行する対応する実行可能プログラムが検索されます。環境変数。グローバルインストールが選択されている場合、デフォルトのインストールパスはC:\ Users \ xxx \ AppData \ Roaming \ npmであり、キャッシュパスはC:\ Users \ xxx \ AppData \ Roaming \ npm_cacheです。ここで、xxxは独自のシステムユーザー名です。 。

npm install -g <package_name>

部分インストールとは、現在のプロジェクトで機能するパッケージを現在のプロジェクトに作成することです。プロジェクトの部分インストールパッケージを選択する場合、デフォルトのインストールパスはプロジェクトルートディレクトリフォルダーnode_modulesです。

npm install <package_name>

4.インストール手順

ノードのインストール(npm)

1. Baiduでnodejsを検索してダウンロードすると、図に示すようにダウンロードアドレスが見つかります。

2.公式ウェブサイトでダウンロードする必要があるものを選択します。ここに例としてWindowsがあります。クリックしてダウンロードしてください

ダウンロード|Node.js

3.ダウンロード後、インストールパッケージをクリックしてインストールします

4. cmdウィンドウを開き(win + Rキー、cmdと入力してEnterキーを押します)、node-vとnpm-vと入力すると、インストールが完了したことを示す次の結果が表示されます。

 npmグローバルパッケージのインストールパスを変更します( Cドライブになくてもグローバルパッケージをインストールできます) 。

1. cmdに次のコマンドを入力して、構成します

(必要に応じてファイルパスを設定しますが、同じファイル名(xxx\npm_globalとxxx\npm_cache)\ configである必要があります)

npm config set prefix "D:\ MySoftware \ NodejsGlobalPackages \ npm_global" 
npm config set cache "D:\ MySoftware \ NodejsGlobalPackages \ npm_cache"

2.構成が成功したかどうかを確認できます

npm config ls

cnpmをインストールして、npmのインストールが遅い、またはインストールが不可能であるという問題を解決します

1.コマンドウィンドウに入力します

npm install -g cnpm --registry = http://registry.npm.taobao.org

vuecli環境をインストールします

1.コマンドウィンドウにcnpminstall-g @ vue / cliと入力して、インストールします

2.インストール後、npm_globalディレクトリのnode_modulesを見てみましょう。正常にインストールされています。実際、これはグローバルパッケージのインストールパスです。

3.以前はグローバル環境をリセットし、現在はvueを使用しているため、エラーが報告される場合があります:vueコマンドが見つかりません。理由は非常に単純です。つまり、パスを変更しましたが、環境変数が構成されていないため、システムは実行可能プログラムを見つけることができません。図に示すように、環境変数の構成を開き、システム変数にNODE_PATHを追加します。変数の値は、設定されたインストールパスの下のnode_modulesです。

 4.次に、図に示すように、ユーザー変数にパスを設定し、新しい値を追加して、グローバル環境を構成します。

vueコマンドを使用してプロジェクトを作成し、実行します

1. cmdでプロジェクトの作成ディレクトリに切り替え、次のコマンドを使用してテストプロジェクトを作成します(プロジェクトはキャメルケースにしないことをお勧めします)

vue create hello-vue-cli 

2.ここでは、デフォルトでVue3を選択してプロジェクトを作成します。または、必要に応じて他の作成方法を選択できます。

3. Yarnはここでは構成されていないため、UseNPMを使用してここで作成します

4.しばらく待つと、システムが自動的にプロジェクトをインストールして作成します。

5.インストールが作成されたら、hello-vue-cliプロジェクトディレクトリに切り替えます

コマンド:cd hello-vue-cli

 6.コマンドを入力してエンジニアリングサービスを実行すると、ブラウザのURL情報が表示されます

コマンド:npm runserve

7.対応するURL情報を入力します。次のように表示されます。これは、vuecli作成プロジェクトに問題がないことを示しています。

おすすめ

転載: blog.csdn.net/u014361280/article/details/123808043