1から続いています

目標：忘れた時にすぐに思い出せるようにざっくり解説する。

2章:Nuxtプロジェクトの作成 (Front)

ホームディレクトリに移動し、pwdで場所を確認します。

pwd
/Users/<ユーザー名>/Desktop/アプリ名

1:frontという名前でアプリを作成する(名前はわかりやすければOKです。)

npx create-nuxt-app front

様々な質問に答えていきます。

Need to install the following packages:
create-nuxt-app
Ok to proceed? (y)

yを入力しreturnを入力してください。
Nuxtのプロジェクト作成に必要なパッケージが入っていない場合に出ます。

create-nuxt-app v3.6.0
✨ Generating Nuxt.js project in front
? Project name: (front)

プロジェクト名の決定についてです。returnを入力します。

? Programming language: (Use arrow keys)
❯ JavaScript 
TypeScript

JavaScriptを使用するので、そのままreturnを入力します。

? Package manager: (Use arrow keys)
❯ Yarn 
Npm

Npmを使用したいので、Npmを選択します。

? UI framework: (Use arrow keys)
None 
Ant Design Vue 
BalmUI 
Bootstrap Vue 
Buefy 
Chakra UI 
Element 
Framevuerk 
Oruga 
Tachyons 
Tailwind CSS 
Windi CSS 
Vant 
View UI 
Vuesax 
consoleWindi CSS 
Vant 
View UI 
Vuesax 
❯ Vuetify.js 
None 
Ant Design Vue 
BalmUI 
Bootstrap Vue

Vuetify.jsを選択します。

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios - Promise based HTTP client
◯ Progressive Web App (PWA)
◯ Content - Git-based headless CMS

何のモジュールを使うかに関してです。
Axiosを使用してapi側と通信をするので、Axiosを選択します。

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint
◯ Commitlint

潜在的なエラーについてコードを分析するリンティングツールの選択です。
使用しないため、スペースキーを押さずにreturnを入力します。

? Testing framework: (Use arrow keys)
❯ None 
Jest 
AVA 
WebdriverIO 
Nightwatch

テストのフレームワークの選択です。
使用しないため、Noneを選択します。

? Rendering mode: (Use arrow keys)
❯ Universal (SSR / SSG) 
Single Page App

レンダリングの設定です。
SPAを作成するので、Single Page Appを選択します。

? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting) 
Static (Static/Jamstack hosting)

デプロイホスティングという、デプロイ後のファイルの公開に関する方法の設定です。
Serverを選択します。

? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ jsconfig.json (Recommended for VS Code if you're not using typescript)
◯ Semantic Pull Requests
◯ Dependabot (For auto-updating dependencies, GitHub only)

開発者ツールです。特に使用しないので、retuenを入力します。

? What is your GitHub username? (登録されている場合はあなたのユーザー名が表示されます)

Githubとの連携設定です。名前が表示されている場合はそのままreturnを入力、
ない場合はidを入力してreturnを入力します。

? Version control system: (Use arrow keys)
❯ Git 
None

いよいよ最後です。長かったですね！

バージョン管理システムの確認です。apiとfrontを同時にGitで管理するため、
このプロジェクト内にはGitのリポジトリは作りません。Noneにカーソルを合わせてreturnを入力します。

実行結果

added 1223 packages, and audited 1490 packages in 23s

107 packages are looking for funding
run `npm fund` for details

15 vulnerabilities (2 moderate, 13 high)


🎉 Successfully created project front

To get started:

cd front
npm run dev

To build & start for production:

cd front
npm run build
npm run start

これでプロジェクトのテンプレートの作成が完了しました。

2:サーバーの起動とトップページの確認

cd front
npm run dev

初回起動ではデータ収集の協力について確認されるので、nを入力し、returnを押します。
http://localhost:3000/

↑にアクセスして↓のようになっていればOKです。