プロジェクトを開始する前に、新しいプロジェクトのフロントエンド環境と関連構成を構築します。

**

プロジェクトを開始する前に、新しいプロジェクトのフロントエンド環境と関連構成を構築します。

**


序文

提示:这里可以添加本文要记录的大概内容:

新しいプロジェクトのフロントエンド環境を構築する
次の図は、開発中にフロントエンドで使用されるエディタを示しています。
ここに画像の説明を挿入


提示:以下是本篇文章正文内容,下面案例可供参考

1. プログラミング言語とフレームワーク

2 つのステップ

1.VSを開く

2. プロジェクトのインポート

3. アドレスとリクエストポートを設定します。

注: 設定時に localhost が使いにくい場合があるため、コンピュータを指すように 127.0.0.1 を設定することをお勧めします。
コードは次のとおりです (例):
ここに画像の説明を挿入

4. プロジェクトを開始する

方法 1:
node.js を使用してプロジェクトを開始する
方法 2:
npm を使用してプロジェクトを開始する

注: コンピューターのnode.jsとnpmのバージョンには特に注意する必要があります。

※下の写真のような状況が発生した場合は、根気よく解決する必要があります。(このレコードの場合、ノードをアンインストールした後、ノード ツールを再インストールして再ダウンロードすると機能します) `

に示すように:
ここに画像の説明を挿入

5. エラーログファイルを確認する

ここに画像の説明を挿入

ここに画像の説明を挿入

6. コマンドを実行して、関連する依存関係と jar パッケージをインストールします。

ここに画像の説明を挿入

7. 以下の点に特別な注意を払う必要があります。

npm を最新バージョンに更新するコマンドは慎重に実行する必要があります。
** 大胆なスタイル
**
ノードのバージョンは npm のバージョンと一致するため、npm のバージョンだけが最新バージョンに更新され、ノードのバージョンが更新されない場合、その場合、ノードが使用できなくなります。
発生するエラーを次の図に示します。
ここに画像の説明を挿入

8. また、プロジェクトのディレクトリで管理者として cmd を直接実行した場合でも、エラーが報告されます。

ここに画像の説明を挿入
エラー メッセージは次の図に示されています。
ここに画像の説明を挿入
もちろん、cmd の実行後にそのようなエラーが発生した場合は、コンピューター システム構成内のパスがノードが配置されているパスで構成されているかどうか、またはパスが構成されているかどうかも考慮する必要があります。正しく。(注: 最初にセミコロンを記述してから、構成されたパスをパス構成の末尾にロードします)

ここに画像の説明を挿入

9. package-lock.json ファイルを削除します。

以下の図に示す状況が発生した場合は、まずプロジェクト内の package-lock.json ファイルを削除し、次に install を再実行して、関連する依存パッケージとファイルをダウンロードします。表示が成功したら、npm run dev を実行します。または npm runserve で次のプロジェクトが正常に起動できるか確認してください。

次の図に示すように、プロジェクトは最終的に正常に開始できます。
ここに画像の説明を挿入
注:
ノードの再ダウンロード後の起動コマンド
ここに画像の説明を挿入
毎日のプロジェクトの起動時に、簡単なコマンドを使用して起動プログラムを呼び出す場合は、事前にファイルに関連する設定を行う必要があります。

10. 設定(カスタム) コマンドの使用を開始する

起動コマンドは、ビジュアル コードでプロジェクトを開いた後、package.json ファイルを見つけて、このファイルに設定することです。一般
的なデフォルト設定は次の図に示されています。設定
ここに画像の説明を挿入
方法は次の図に示されています。
ここに画像の説明を挿入
上に示したように、プロジェクトを開始するときの設定。 npm run dev と直接入力して起動コマンドを呼び出すことができます。
これにより、日常生活で毎回複雑なコマンドを入力することなくプロジェクトを開始できるようになり、便利になります。

11. プロジェクトを開始する

プロジェクトのフロントエンド コードが配置されているディレクトリを見つけます。
ここに画像の説明を挿入

12. プロジェクトを開始し、コマンド npm run server を実行します。

以下の図に示すように、プロジェクトは正常に開始されました~~~
ここに画像の説明を挿入

3. まとめ

ヒント: 記事の概要は次のとおりです:
ノード ツールを再ダウンロードします。

インストール後に次のコマンドを実行します。
1. nvm install v12.16.0

2. nvm list. 現在のノードのバージョンを表示します。

3. これはノードのバージョン管理ツールです

4. さらにいくつかのバージョンをダウンロードし、コマンドを使用してバージョンを切り替えます。

5、nvmはv12.16.0を使用します

6. 新しいプロジェクトの開始時にスタートアップ コマンドを実行すると、
「vue-cli-service」が内部コマンドまたは外部コマンドとして認識されないというエラーが発生した場合、
この問題の解決策は次のとおりです。

1. 方法 1: npm cache clean --force && npm install コマンドをプロジェクトのルート ディレクトリで直接実行します。

2. 方法 2:node_modules フォルダーを削除し、npm install コマンドを実行します。

おすすめ

転載: blog.csdn.net/YHLSunshine/article/details/129218377