Appearance
プロジェクトの作成
create-vue でのプロジェクト新規作成
create-vue を使って生成されるアプリケーションをプロジェクトと呼びます。ここではプロジェクトを新しく作成してみましょう。
アプリケーションを作成するディレクトリを決めておきます（この例では
vue3-labとしています）。create-vueでプロジェクトを作成すると、決めたディレクトリの配下にファイル群が生成されます。ターミナルで、プロジェクトのディレクトリを作成する親ディレクトリに移動します。もし、ホームディレクトリの直下にプロジェクトを作成するのであれば、ターミナルで以下のコマンドを使って移動しておきます。
sh
cd ~ヒント
ホームディレクトリとは、ユーザー固有のファイルやフォルダを保存できる領域であり、通常ユーザー名でディレクトリが作成されています。
create-vueでプロジェクトを新規作成します。ターミナルで以下のコマンドを実行します（コマンド実行後はそのまま待機しておいてください）。プロジェクトのディレクトリはcreate-vueによって自動的に作成されます。
sh
npm init vue@3 vue3-lab- コマンドを実行すると、ターミナルにいくつかの質問が表示されます。このハンズオンでは以下のように選択します。
ヒント
矢印キーでアンダースコアを移動させることで項目を選択します。 enter / return キーで項目を確定できます。
Vue.js - The Progressive JavaScript Framework
? Add TypeScript? › No / Yes -> No
? Add JSX Support? › No / Yes -> No
? Add Vue Router for Single Page Application development? › No / Yes -> No
? Add Pinia for state management? › No / Yes -> No
? Add Vitest for Unit Testing? › No / Yes -> No
? Add Cypress for both Unit and End-to-End testing? › No / Yes -> No
? Add ESLint for code quality? › No / Yes -> Noプロジェクトの起動
作成したプロジェクトを起動してみましょう。プロジェクトの起動には外部パッケージをインストールしてから起動コマンドを実行します。
- 作成したプロジェクトのディレクトリに移動し（この例では
vue3-lab）、npm installで外部パッケージをインストールします。
sh
cd vue3-lab
npm installnpm installの処理が完了したらnpm run devでプロジェクトを起動します。
sh
npm run devnpm run devの実行が完了したら、ブラウザでhttp://localhost:5173/にアクセスします。ブラウザに「You did it!」等と表示されていれば、無事にプロジェクトの作成が成功しています。
プロジェクトの確認
プロジェクト新規作成後、以下のようなディレクトリ構造になります。
vue3-lab
├── README.md
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
│ └── favicon.ico
├── src
│ ├── App.vue
│ ├── assets
│ │ ├── base.css
│ │ ├── logo.svg
│ │ └── main.css
│ ├── components
│ │ ├── HelloWorld.vue
│ │ ├── TheWelcome.vue
│ │ ├── WelcomeItem.vue
│ │ └── icons
│ │ ├── IconCommunity.vue
│ │ ├── IconDocumentation.vue
│ │ ├── IconEcosystem.vue
│ │ ├── IconSupport.vue
│ │ └── IconTooling.vue
│ └── main.js
└── vite.config.js
6 directories, 19 filesこれらのファイルが create-vue で作成されます。
