[[📒Vue.jsクエスト]] > [[📗02 templateはHTMLの親戚]] ## Abstract いよいよ[[Vue]]の世界で冒険開始です。まずは[[Vite]]と呼ばれるフロントエンドツールを使ってプロジェクトを作ってみましょう。 ## Lesson [インストール \| Vue\.js](https://v3.ja.vuejs.org/guide/installation.html#vite) の `Vite` を読みインストールの方法を学びましょう。 ## Missions ### Mission 1 #🙂NORMAL [[Vite]]を使って[[Vue]]の[[TypeScript]]プロジェクトを作成し、実行したコマンドを記載してください。 > [!hint]- Hint 1 > `--template vue`では[[JavaScript]]のプロジェクトが生成されてしまいます。 > [!hint]- Hint 2 > [[Vite]]で`--template`に指定できる一覧は [Trying Vite Online](https://vitejs.dev/guide/#trying-vite-online)に記載されています。 %% 回答例 ```console # npm6 npm init vite@latest quest-1 --template vue-ts # npm7 npm init vite@latest quest-1 -- --template vue-ts ``` [[Vite]]本家だと `npm init` ではなく `npm create` を使っていたりも... https://vitejs.dev/guide/#command-line-interface %% ### Mission 2 #🙂NORMAL Mission 1で作成したプロジェクトを起動し、ページに表示されたメッセージの内、**一番下に表示される文**を記載してください。 > [!hint]- Hint 1 > 起動に必要なコマンドは、Mission 1でプロジェクト作成した直後のコンソールに表示されます。 > [!hint]- Hint 2 > 起動したWebページへのアクセスURLは、起動後のコンソールに表示されます。 %% 回答 Click on the Vite and Vue logos to learn more 以前は↓だった Edit components/HelloWorld.vue to test hot module replacement. %%