Vue3 プロジェクトの作成

前の章ではVue3 のインストール私たちは使用しましたnpm initコマンドでプロジェクトを作成しました。この章では主に紹介します。npm createコマンドでプロジェクトを作成し、またvue uiコマンドでグラフィカルなインストール画面を開きます。

Vue 開発に推奨される IDE 構成はVisual Studio Code + Vue - Official 拡張機能：

その他の IDE のサポートは次のとおりです：

  • Sublime Text はLSP-Volarによってサポートされています。

  • vim / Neovim はcoc-volarによってサポートされています。

  • emacs はlsp-modeによってサポートされています。

npm create コマンド

npm create コマンドを使用して Vue プロジェクトを作成します。通常は Vite（Vue 公式推奨のビルドツール）を通じて Vue アプリケーションを作成します。

Vite では、npm create はスキャフォールディングツール（vite@latest など）を実行して、新しいプロジェクトテンプレートをすばやく生成するために使用されます。

Vite の詳細は以下を参照してください：Vite チュートリアル。

npm createコマンドでプロジェクトを作成する構文は次のとおりです：

npm create vite@latest <project-name> --template vue

説明：

  • npm create：プロジェクトテンプレートを実行するためのコマンドです。新しいプロジェクトを作成し、指定されたテンプレートから初期化します。

  • vite@latest：vite は Vue 3 プロジェクトを作成するためのツールであり、@latest：最新版の Vite を使用することを指定し、作成するプロジェクトが最新バージョンの Vite に基づいていることを保証します。もし@latest，npm現在インストールされているバージョンの使用を試みます。

  • <project-name>：新しく作成するプロジェクトのフォルダー名です。コマンドはフォルダーを作成し、その中にテンプレートコードを配置します。たとえば、npm create vite@latest my-vue-app --template vue現在のディレクトリに、my-vue-appという名前のフォルダーを作成し、Vue プロジェクトのテンプレートファイルをその中に配置します。

  • --template vue：--template vue使用するテンプレートの種類を指定します。Vite は複数のテンプレートをサポートしており、vueは Vue 3 専用に提供されているテンプレートです。他にも、次のようなテンプレートがあります。vanilla、react、svelteなど。

次に、サンプル-vue3-app プロジェクトを作成します：

npm create vite@latest

上記のコマンドを実行すると、まずプロジェクト名の入力とフレームワークの選択が求められます：

> Project name: … サンプル-vue3-app
? Select a framework: › - Use arrow-keys. Return to submit.
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others

Vite は複数のテンプレートをサポートしています。一般的なものは次のとおりです：

  • vue：Vue 3 プロジェクト（デフォルトで Vue 3 を使用）
  • vanilla：フレームワークなしの基本テンプレート
  • react：React プロジェクト
  • svelte：Svelte プロジェクト
  • preact：Preact プロジェクト
  • 具体的なニーズに応じて他のテンプレートを選択することもできます。

方向キーを使用して選択できます。Vue を選択すると、オプションのバリエーション画面が表示されるので、JavaScript を選択してすばやく開始できます。

> Project name: … サンプル-vue3-app
> Select a framework: › Vue
> Select a variant: › JavaScript

Scaffolding project in /Users/サンプル/サンプル-test/サンプル-vue3-app...

Done. Now run:

  cd サンプル-vue3-app
  npm install
  npm run dev

インストールが完了したら、プロジェクトディレクトリに移動します：

cd サンプル-vue3-app

ディレクトリ構造全体は次の図のとおりです：

依存関係をインストールし、アプリケーションを起動します：

npm install
npm run dev

その後、http://localhost:5173/を開くと、アプリケーションのインターフェースが表示されます。

また、vite.config.jsファイル内で独自のポートを設定できます。たとえば、以下のように設定するとポートは 3000 になります。

例

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],

  server: {
    port: 3000, // 自分で設定したポート番号
  },
})

vue ui コマンド

使用する他にvue createコマンドでプロジェクトを作成し、さらにビジュアル作成ツールを使用してプロジェクトを作成することもできます。

コマンドを実行します：

$ vue ui
->  Starting GUI...
->  Ready on http://localhost:8000
...

上記のコマンドを実行すると、ブラウザにプロジェクト管理画面が表示されます：

クリックできます"作成"オプションでプロジェクトを作成します。下部の「ここにプロジェクトを作成」を選択し、ページ上部でパスを選択することもできます：

次に、プロジェクト名を入力し、パッケージ管理ツールとして npm を選択して、「次へ」をクリックします：

設定はデフォルトのままで問題ありません：

あとはインストールの完了を待つだけです。インストール完了後の管理画面は次のとおりです：

その他の拡張機能