vue3.0 プロジェクトを 0 から 1 でビルドする

1. vue スキャフォールディングでプロジェクトをビルドする

ステップ 1: node.js をインストールする

• 公式サイトから該当システムのnode.jsをダウンロードしてインストールし、ダウンロード後インストール
  
• インストールが完了したら、cmd コマンド実行ウィンドウを開き、node -v および npm -v を実行して、node.js が正常にインストールされているかどうかを確認し、図に示すようにバージョン番号が表示されれば、インストールが成功したことを証明します。下：
  

ステップ 2: vue をインストールする

• cmd を開き、npm install -g @vue/cli コマンドを実行して (vue3.0 をインストール)、コマンドが完了するまで待ちます。
  
• vue -V を実行して、vue が正常にインストールされているかどうかを確認します. 以下に示すように、バージョン番号が表示されれば、インストールが成功したことを証明します.
  

ステップ 3: vue スキャフォールディングを使用して vue プロジェクトを作成する

• vue プロジェクトのフォルダーに移動し (自分で作成できます)、フォルダーに入り、cmd を開きます。

• vue create demo コマンドを実行します (demo はプロジェクト名です)。プロジェクトを作成する過程で、vue2.0 プロジェクトを作成するか vue3.0 プロジェクトを作成するかを選択するよう求められます。必要に応じて、vue3 を選択します。 0、下図のように選択後、作成が完了するまで待ちます
  

• デモ プロジェクト ファイルを入力し、cmd で npm install コマンドを実行して、関連する依存パッケージをインストールします。

ステップ 4: プロジェクトを作成したら、vue プロジェクトを実行します

• demo フォルダーで、npm run serve を実行して、作成したばかりのプロジェクトを開始します。

2. vite でプロジェクトをビルドする

ステップ 1: node.js をインストールする

(上記のステップ 1 と同じ)

ステップ 2: vite でプロジェクトをビルドする

• vue プロジェクトのフォルダーに移動し (自分で作成できます)、フォルダーに入り、cmd を開きます。
• npm init vite-app vite_demo コマンド (vite_demo はプロジェクト名) を実行し、コマンドが完了するまで待ちます。
• vite_demo プロジェクト ファイルを入力し、cmd で npm install コマンドを実行して、関連する依存パッケージをインストールします。

ステップ 3: プロジェクトを作成したら、プロジェクトを実行します

• vite_demo フォルダーで、npm run dev を実行して、作成したばかりのプロジェクトを開始します。
  

3. vite と vue-cli の違い

• Vite は、ネイティブ ES モジュール インポートのおかげで超高速のコールド サーバー起動を可能にする Web 開発ビルド ツールです。
• vue-cli は公式の vue.js プロジェクトの足場です。vue-cli を使用して vue プロジェクトをすばやく作成します
  

4. その他

開発ソフトウェアは vscode を選択できます

• vscode をダウンロード: https://code.visualstudio.com/
• vscode を開き、ファイル --> フォルダーを開き、開発用に今すぐ vue プロジェクトを選択します。