こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在5社経験している、14年目エンジニアです。
この記事では、 Vue.jsでプロジェクトを新規作成するやり方について丁寧に解説していきます。
前提条件：実行環境について
実行環境は以下の通りです。
| OS | Windows11 |
|---|---|
| Vue.jsのバージョン | 5.0.9 |
プロジェクトを新規作成するやり方を解説
プロジェクトを新規作成するやり方を解説します。
コマンドプロンプトを起動し、プロジェクトを新規作成したい場所まで行きます。
この記事では
C:\Vuejs_sample
配下に作成します。
作成前はファイルが何もない事を確認しました。
作成したい場所で
|
1 |
npm create vue@latest |
をたたきます。
たたくと以下のメッセージが表示されることがあります。
|
1 2 3 |
Need to install the following packages: create-vue@3.18.0 Ok to proceed? (y) |
翻訳すると
以下のパッケージをインストールする必要があります:
create-vue@3.18.0
続行してもよろしいですか? (y)
つまり、足りないパッケージがあるからインストールしてもよいか？という意味です。
インストールしてOKなので、「y」を入力してエンターキーを押します。
今度は
|
1 2 3 4 5 |
T Vue.js - The Progressive JavaScript Framework | * Project name (target directory): | vue-project — |
と表示され、プロジェクトの名前を聞かれます。
この記事では、「vue_sample」を入力してエンターキーを押します。
次は
|
1 2 3 4 5 6 7 8 9 10 |
* Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm) | [•] TypeScript | [ ] JSX Support | [ ] Router (SPA development) | [ ] Pinia (state management) | [ ] Vitest (unit testing) | [ ] End-to-End Testing | [ ] ESLint (error prevention) | [ ] Prettier (code formatting) — |
意味は新規作成するプロジェクトに含める機能を選択します。
選択するやり方は、上と下の矢印キーで移動して、スペースで選択できます。
選択できたら、エンターキーで確定します。
表示されている選択肢の意味はこんな感じです。
| 選択肢 | 意味 |
|---|---|
| TypeScript | JavaScriptの拡張版 |
| JSX Support | JavaScriptの拡張構文であるJSXを便利に使えるようにする仕組み |
| Router (SPA development) | JavaSciptのルーター |
| Pinia (state management) | Vue.jsでアプリケーションの状態（データ）を共有・管理するためのライブラリ |
| Vitest (unit testing) | テストフレームワーク |
| End-to-End Testing | シミュレーションテスト |
| ESLint (error prevention) | 静的コード解析ツール |
| Prettier (code formatting) | ソースコードを自動で整形するツール |
なので、ご自身の使いたい環境に合わせて選択してください。
この記事では「JSX Support」以外全部選択しました。
「End-to-End Testing」を選択したので
|
1 2 3 4 |
* Select an End-to-End testing framework: (↑/↓ to navigate, enter to confirm) | > Playwright (https://playwright.dev/) | Cypress | Nightwatch |
テストで使うフレームワークを選択します。
表示されている選択肢の意味はこんな感じです。
| 選択肢 | 意味 |
|---|---|
| Playwright | Microsoftが開発した、Webブラウザの操作を自動化するためのオープンソースフレームワーク |
| Cypress | JavaScriptでテストコードを書けるオープンソースツール |
| Nightwatch | Node.js上で動作するテストフレームワーク |
この中だと「Playwright」がおすすめです！
「Playwright」を選択している状態でエンターキーを押します。
|
1 2 3 4 5 |
* Select experimental features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm) | [•] Oxlint (experimental) | [ ] rolldown-vite (experimental) — |
これは実験的な機能をインストールするかどうかです。
インストールしなくてもよいので、そのままエンターキーを押します。
|
1 2 3 |
* Skip all example code and start with a blank Vue project? | Yes / > No — |
これはサンプルプログラムがありかなしかの選択です。
「Yes」だと本当にただ単にプロジェクトが新規作成されるだけです。
「No」だと、簡単なサンプルプログラムが入っています。
おすすめは「No」です！
「No」を選択している状態でエンターキーを押します。
これで終了です！
以下の画面になっていれば作成完了です。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Scaffolding project in C:\Vuejs_sample\vue_sample... | — Done. Now run: cd vue_sample npm install npm run format npm run dev | Optional: Initialize Git in your project directory with: git init && git add -A && git commit -m "initial commit" |
C:\Vuejs_sample
配下に新たに「vue_sample」というディレクトリが作成されて、プロジェクトが新規に作成できていることが確認できました。
では、作成できたので実際に動かしてみましょう。
表示されているコマンドを上から実行します。
|
1 2 3 4 |
cd vue_sample npm install npm run format npm run dev |
実行すると
|
1 2 3 4 5 6 7 |
VITE v7.1.7 ready in 571 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window ➜ Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools ➜ press h + enter to show help |
と表示されます。
これは開発サーバー起動している状態です。
【http://localhost:5173/】を開いてみます。
無事にVueアプリが表示されました(∩´∀｀)∩
まとめ：プロジェクトを新規作成してみよう
以上がVue.jsのプロジェクトを新規作成するやり方でした！
QRコードについて改めて調べてみると、すごい技術なんだなあと思いました！
ではでは～(・ω・)ﾉｼ
コメント