【完全なプロジェクト構築】vue-cliをベースにvueフロントエンド構築テストシステムを実現——①vue-cliを作成してプロジェクト構築を実現

1. vscode ターミナルを開き、指定したディレクトリに cd して [注: プロジェクト全体のフォルダです。このフォルダには、将来的にフロントエンドとバックエンドのプロジェクトが含まれます]、指定したディレクトリで次のコマンドを入力します。ノードとnpmに準拠しているかどうかを確認し、インストールされている場合は、対応するバージョンを出力します。

①ノードのバージョンを確認する

node -v

②npmのバージョンを確認

npm -v

インストールが成功し、インストール バージョンが返されます (図に示すように)。

2. vue-cli scaffolding をインストールします [npm を使用する場合、海外では npm イメージのダウンロード速度が遅いため、yarn を使用してダウンロードすることをお勧めします。それでも npm を使用してダウンロードする場合は、Taobao イメージを構成することをお勧めします] この記事は糸を使用してダウンロードします

次のコードを入力して、糸がシステムにインストールされているかどうかを確認します

yarn -v

バージョン番号が出力できれば、yarn が正常にインストールされたことを意味します (図のように)。

 インストールされていない場合は、次のコマンドを入力してインストールします

npm i -g yarn

3. yarn を使用して足場をインストールし、次のコマンドを入力します。

yarn global add @vue/cli

インストールが完了したら、図に示すようにインストールを開始します。

 ダウンロードが完了したら、現在のディレクトリのパスに cmd を入力してターミナルに入ります

①選択した場所にcmdを入力

 ②Enterを押してターミナルを開く

 ③次のコマンドを入力して(大文字のVに注意)、vue-cliのバージョン番号を確認します

vue -V

インストールが成功したことを示すバージョン番号がターミナルから返されます。

 プロジェクトのエラーはバージョンの不一致が原因であることが多いため、対応するバージョンをダウンロードする必要があることに注意してください (バージョンが一致しない場合は、アンインストールして再インストールする必要があります)。

4. 手順 3 でターミナルにスキャフォールディングを作成します (作成されたプロジェクト フォルダーは、通常は my-app という名前のフロントエンド コンテンツを格納するために使用されます)。報告され、小文字またはダッシュ スタイルの名前付けを介してのみ

vue-cli を作成するコマンドは次のとおりです (my-app はプロジェクトを作成するための任意の名前にすることができ、my-app をお勧めします)。

vue create my-app

Enter キーをクリックして、バージョン選択ページに入ります (ここでは、図の 3 番目の項目に示すように、例として vue2 バージョンを選択します)。

 [注: 下図の 1 番目の項目は、作成者独自のカスタマイズ後に保存された内容です。vue create project name コマンドを実行した後に存在しない可能性があります。取得方法については、この記事では詳しく説明しません]

 ダウンロード中です。お待​​ちください

図のように表示され、作成が成功したことを示します

 

 vscode ターミナルから指定したディレクトリに入り、プロジェクトを開始できます。プロジェクトを開始するコマンドは次のとおりです。

①指定ディレクトリに入る

cd my-app

②プロジェクトの開始

npm run serve

プロジェクトの開始

プロジェクトが正常に開始されました

ctrl + ローカル アドレスをクリックして、プロジェクトに入ります。 

 

まとめると、プロジェクトがビルドされた後、さまざまなプラグインが今後インストールされるので、ここでは詳しく説明しません。

おすすめ

転載: blog.csdn.net/m0_56905968/article/details/128356330