Vue3 の基本 + 上級 (1. Vue2 と比較した Vue3 プロジェクトの作成とプロジェクト構造の理解)

目次

第 1 章、create-vue について

1.1 はじめに

1.2 create-vueを使用してプロジェクトを作成する

1.2.1 作成手順と注意事項

1.2.2 注意事項

1.2.3 プロジェクトに精通しており、vue2 と区別する


第 1 章、create-vue について

1.1 はじめに

create-vue は、 Vue の公式 Web サイトにある新しいスキャフォールディング ツールで、最下層をvite (次世代フロントエンド ツール チェーン)に切り替え、開発に対する迅速な対応を実現します。

1.2 create-vueを使用してプロジェクトを作成する

1.2.1 作成手順と注意事項

  • ノードのバージョン: 16.0.0 以降、バージョンを確認してください

 (ノードのバージョン管理の具体的な操作を提供します)

Nvm で環境変数をインストールして構成する nvm を使用して、nodejs をインストールして切り替える_nvm で環境変数を構成する_❆VE❆ のブログ-CSDN ブログ

  • コマンドで作成: npm init vue@latest
npm init vue@latest

(ここで、プロンプトでは対応するバージョンをダウンロードする必要があることに注意してください。ダウンロードするには y を選択するだけです) 

  • オプションを理解して構成します (vue3 プロジェクトを初めて作成するときは、以下の構成に従ってください)

  • 作成が完了すると、通知がポップアップ表示されます (そうでない場合は無視してください)。

ここで、コマンド npm install -g [email protected] を使用してバージョンを更新できます。

npm install -g [email protected]

 バージョンを確認します:

  •  上記に問題がないことを確認後、

 プロジェクトを入力し、プロジェクトを初期化し、プロジェクトを実行します

  • プロジェクトを実行した後、パスをクリックします

次のページが表示されたら、作成が成功したことを意味します。

1.2.2 注意事項

  • 前提条件: 少なくとも 16.0 以降のノード バージョンをインストールする
  • Vue アプリケーションを作成します: npm init vue@latest

1.2.3 プロジェクトに精通しており、vue2 と区別する

  • package.json: プロジェクト パッケージ ファイル - ローカル プロジェクトのコマンドと依存関係:コアの依存関係は Vue3.x になり、ドライバーとして vite の最下層になります。

  • vite.config.js: プロジェクト構成ファイル - vite ベースの構成

  •  main.js: エントリ ファイル -アプリケーション インスタンスを作成する createApp 関数

  • App.vue: ルート コンポーネント - SFC 単一ファイル コンポーネントシーケンス スクリプト - テンプレート - スタイルが変更され、テンプレート テンプレートは一意のルート要素を必要としなくなりました。スクリプトは API を組み合わせたセットアップをサポートします

おすすめ

転載: blog.csdn.net/qq_45796592/article/details/130659899