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を入力します。