vue-cli 3.x環境を構築し、最初のvueプロジェクトを作成します

Windows10システムでVUE環境を構築する方法

1.まず、node.jsをダウンロードする必要があります。

vueの動作は、ノードのnpm管理ツールによって異なります。公式ウェブサイトhttp://nodejs.cnからダウンロードできます。
ここに画像の説明を挿入します

2.ダウンロードが完了したら、node.jsをインストールする必要があります

ダブルクリックしてインストールした後、コマンドラインを開き、ノード-vを入力して、インストールが成功したかどうかを確認します。
ここに画像の説明を挿入します
図は、インストールが成功したことを示しています。

3、インストール後、cnpmミラーを交換する必要があります

ご存知のとおり、中国でのnpmの使用は特に遅いため、Taobaoのnpmミラーを使用することをお勧めします。
そうすると、Taobaoのcnpm管理ツールがnpm管理ツールに置き換わります。
1.次に、node.jsのインストールディレクトリに2つの新しいフォルダnode_globalとnode_cacheを作成します
ここに画像の説明を挿入します

2. 2つのフォルダーを作成した後、cmdウィンドウに次のコマンドを入力します(2つのフォルダーのパス)。

npm config set prefix "E:\node\node_global"
npm config set cache "E:\node\node_cache"

3.コマンドラインを開き、npm install -g cnpm --registry = https://registry.npm.taobao.orgと入力して、Taobaoミラーをダウンロードします
。この図は、Taobaoミラーがダウンロードされていることを示しています。

ここに画像の説明を挿入します

この図は、ダウンロードが完了したことを示しています。
ここに画像の説明を挿入します

3つ目は、Node.js環境変数の構成です。

コンピュータ環境変数を設定し、[マイコンピュータ]-> [プロパティ]-> [システムの詳細設定]-> [環境変数]を右クリックし
ここに画像の説明を挿入します
、環境変数の構成を開始し、システム変数で[新規]をクリックして、新しいNODE_PATHを
ここに画像の説明を挿入します
作成します。nodejsディレクトリパスをコピーします( E:\ node)次に、ユーザー変数でパスを選択し、[編集]-> [新規]->コピーしたばかりのアドレスを入力-> [完了の確認]をクリックします。
ここに画像の説明を挿入します
この時点で、npm環境変数の構成は完了しており、コマンドラインでnpm-vを引き続き使用できます。
6.6。次に、cnpmの環境変数を構成する必要があります。Taobao
ミラーのインストールが完了した、E:\ nodeのnode_global(自分で作成したフォルダー)モジュールにデータが生成されます。次に、実行する必要があるのは次のとおりです。
ユーザー変数でパス選択するには、[編集]-> [新規]->ノードグローバルモジュールのディレクトリの場所を入力します(E:\ node \ node_global)->完了を確認します。
ここに画像の説明を挿入します
7. cnpm環境変数の構成が成功したことを確認します。
コマンドラインを再起動し、コマンドラインにcnpm -vと入力します。次のインターフェイスが表示された場合、構成は成功しています。
ここに画像の説明を挿入します

第四に、vueスキャフォールディングをインストールします

コマンドラインに入力します

 cnpm install -g @vue/cli
# OR
yarn global add @vue/cli

次の図に示すように、足場をインストールするには、インストールが完了し
ここに画像の説明を挿入します
ます。コマンドラインに入力します。

vue -V

足場が正常にインストールされているかどうかを確認するこれ
ここに画像の説明を挿入します
までのところ、足場は正常にインストールされています

5、最初のvueプロジェクトを作成します

1.コマンドラインにvueuiと入力すると、
次の画像
ここに画像の説明を挿入します
表示され、次のWebページがポップアップ表示され
ここに画像の説明を挿入します
ます。2。プロジェクトの作成
次に、プロジェクトの作成を開始します。
ここに画像の説明を挿入します
ここに画像の説明を挿入します
ここに画像の説明を挿入します

次の図に示すようにプロジェクトの作成を開始すると、コマンドラインが進行しここに画像の説明を挿入しますここに画像の説明を挿入します
ますプロジェクトが作成されるのを待つだけです。
ここに画像の説明を挿入します
このインターフェイスが表示され、コマンドラインが次の図になります。 、作成は成功しました。3。プロジェクトを開きここに画像の説明を挿入します
ます(エディターはこのステップをスキップできません)
。WebstormまたはIDEAでこのプロジェクトを開くことができます。ここでIDEAがオンになっていることを示します(IDEAはノードプラグインをインストールする必要があります。インストールしないとインストールできません)

ここに画像の説明を挿入します
これはIDEAで開いた結果であり、IDEAはプラグインをインストールしていません。次に、ファイル->設定->プラグインここに画像の説明を挿入します
でVue.js検索してインストールします。インストールが完了したら、IDEAを再起動する必要があります。再起動後、作成したばかりのプロジェクトを開きます。赤い丸が変わっていることがわかり
ここに画像の説明を挿入します
ます。4。プロジェクトを起動し(コンパイラなしで、手順5を参照)
、ターミナルで次のコマンドを1つずつ実行します。

1.npm install
2.npm run serve

最初のコマンドを
ここに画像の説明を挿入します
実行すると、2番目のコマンドを実行したときに表示されます。これは
ここに画像の説明を挿入します
、操作が成功したことを意味します。青いWebサイトのリンクをクリックしてジャンプします。
コンパイラがない場合は、次の手順を実行します。次
の図に示すように、cmdコマンドラインでプロジェクトの場所に移動します(ここではプロジェクト名はjiaochengdemo1です)。
ここに画像の説明を挿入します
次に、
ここで手順4のコマンドを入力します。完璧なVUEプロジェクトは、作成が完了したことです。

おすすめ

転載: blog.csdn.net/qq_46140800/article/details/105883215
おすすめ