プロジェクトを作成する Vue3 Cli の詳細なプロセス。

Vue3 CLI の詳細および完全なプロジェクト レコード (1. プロジェクトの作成)

免責事項: 学習は公式ドキュメントと検索学習から得られます。
免責事項: 間違いや質問がある場合は、指摘してください。
公文書作成プロジェクト

ツール:vscoed(エディタだけ、cmd、webstormなど何でもあり)
知識ポイント:パッケージングツールNPMかYarnが必要 Xiaobaiさんがwebpackとnpmの基礎を学ぶことをすすめるなら、学びたくないなら、ここにノードをインストールするには、公式 Web サイトにアクセスしてください (自分で Baidu をインストールします)。

1. 環境への設置と検査

エディターのコマンドラインを開き、cd でプロジェクト作成ディレクトリに移動し、node (npm と統合) を入力し、node バージョンの環境を確認します。node または Baidu をインストールして環境変数を構成していない場合は、新しいバージョンが自動的に構成されているようです。直接インストールしても問題ありません。
ははは
scaffolding のインストールnpm i -g @vue/cli、インストール プロセスは比較的長いです。Taobao ミラー ソースを選択できます。
インストール時に多くの警告が表示されますが、無視してください。エラー レポートを確認する必要があります。間違いがあり、Taobao ミラー ソースを使用してください。
コマンド ラインを入力するvue -Vと、scaffolding バージョンが表示されます。
ここに画像の説明を挿入

2. プロジェクトの作成

vue create 项目名称
ここに画像の説明を挿入
ここでコマンドを入力すると、選択するオブジェクトの構成に、多くのプロジェクトで作成された構成が表示されます. 最後の手動選択機能を直接選択します. ここで、必要な構成を手動で選択します
.空格选择和取消,上下选择后回车下一步
ここに画像の説明を挿入

Enter を押して次のステップを選択し、
ここに画像の説明を挿入
ここに画像の説明を挿入
プロジェクト名を保存して Enter を押せばOKです。.
ここに画像の説明を挿入

このようにプロジェクトがビルドされ、コマンド プロンプトに従ってプロジェクト ディレクトリに移動し、webpack によって提供される serve サービスを実行すると、ページがポップアップします。
ここに画像の説明を挿入
途中でエラーになってしまったので、上のスクリーンショットのファイル名が違います~

3.途中で遭遇した間違いに言及する

1.权限不足,就会导致以下问题。 以管理员运行cmd或者vscode编辑器即可。

写真の説明を追加してください

2. npm run dev 报错

ここに画像の説明を挿入

構成ファイルを開き、作成された構成に dev がないことを確認します。そのため、Baidu だけを手動で追加する必要があります。
ここに画像の説明を挿入

次の記事では、プロジェクト ファイルの基本的な構成を記述します。いいねとコメントを歓迎します。

参考までに、間違いや不明な点がありましたら、ご相談ください。

おすすめ

転載: blog.csdn.net/weixin_44000173/article/details/119618207