Nuxt.js 入門 (2) – プロジェクト作成

libe-irevo@master 2023年10月30日コメント

「Nuxt.js」のプロジェクトの作成手順をまとめました。

1. プロジェクトの作成

プロジェクトの作成手順は、次のとおりです。

(1) 以下のコマンドで、プロジェクトの作成を開始。

$ npx create-nuxt-app nuxt_app

(2) プロジェクト名を聞かれるので入力。
今回は、そのままEnterキーで決定します。
? Project name: (nuxt_app)
(3) プログラミング言語の選択肢が表示されるので、上下キーで選択して、Enterキーで決定。
? Programming language: ❯ JavaScript TypeScript
(4) パッケージマネージャの選択肢が表示されるので、上下キーで選択して、Enterキーで決定。
今回は、Npmを選択しEnterキーで決定します。
? Package manager: 　Yarn ❯ Npm
(5) UIフレームワークの選択肢が表示されるので、上下キーで選択して、Enterキーで決定。
今回は、そのままEnterキーで決定します。
? 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 Vuetify.js
(6) Nuxt.jsモジュールの選択肢が表示されるので、上下キーで選択して、スペースでチェックして、Enterキーで決定。
今回は、そのままEnterキーで決定します。
? Nuxt.js modules: ❯ ◯ Axios - Promise based HTTP client ◯ Progressive Web App (PWA) ◯ Content - Git-based headless CMS
(7) Lintの選択肢が表示されるので、上下キーで選択して、スペースでチェックして、Enterキーで決定。
今回は、そのままEnterキーで決定します。
? Linting tools: ❯ ◯ ESLint ◯ Prettier ◯ Lint staged files ◯ StyleLint ◯ Commitlint
(8) テストフレームワークの選択肢が表示されるので、上下キーで選択して、Enterキーで決定。
今回は、そのままEnterキーで決定します。

? Testing framework: (Use arrow keys) ❯ None Jest AVA WebdriverIO Nightwatch
(9) レンダリングモード（サーバー側でレンダリングするかどうか）の選択肢が表示されるので、上下キーで選択して、Enterキーで決定。
今回は、Single Page Appを選択してEnterキーで決定します。
? Rendering mode: 　Universal (SSR / SSG) ❯ Single Page App
(10) デプロイターゲットの選択肢が表示されるので、上下キーで選択して、Enterキーで決定。
今回は、そのままEnterキーで決定します。
? Deployment target: ❯ Server (Node.js hosting) Static (Static/Jamstack hosting)
(11) 開発ツールの選択肢が表示されるので、上下キーで選択して、スペースでチェックして、Enterキーで決定。
今回は、そのままEnterキーで決定します。
? Development tools: ❯ ◯ jsconfig.json (Recommended for VS Code if you're not using typescript) ◯ Semantic Pull Requests ◯ Dependabot (For auto-updating dependencies, GitHub only)
(12) GitHubのユーザー名を聞かれるので入力。
今回は、そのままEnterキーで決定します。
?What is your GitHub username? (XXXX)
(13) バージョン管理システムの選択肢が表示されるので、上下キーで選択して、Enterキーで決定。
今回は、そのままEnterキーで決定します。
Version control system: (Use arrow keys) ❯ Git None
プロジェクトの作成が成功すると、以下のように表示されます。
🎉 Successfully created project nuxt_app To get started: cd nuxt_app npm run dev To build & start for production: cd nuxt_app npm run build npm run generate

2. プロジェクトの実行

プロジェクトの実行手順は、次のとおりです。

(1) プロジェクトフォルダ(nuxt_app)で以下のコマンドを実行。

$ yarn dev

(2) ブラウザで「http://localhost:3000/」を開く。
以下の画面が表示されます。

3. プロジェクトのフォルダ構成

プロジェクトのフォルダ構成は、次のとおりです。

・.git : Gitの設定ファイル・.nuxt : Nuxt.jsのアプリケーション・components : コンポーネント・node_modules : npmのパッケージ群・pages : ページファイル群・static : 画像などの静的ファイル群・store : データ管理のファイル群・.editorconfig : エディタの設定情報・.gitnore : Gitの設定ファイル・nuxt.config.js : Nuxt.jsのの設定ファイル・package.json : npmのパッケージ管理の設定ファイル・README.md : README