NuxtJSのインストールから起動までの導入方法
Vueを活用する中で、
「NuxtJS」
のフレームワークを使用して、
各種APIを作成するなど、
小さな規模から試そうと考え、
公式サイトを見ながら、
導入して起動するまでを試した。
その時のNuxtJSの導入に関して、
個人的にメモを残す。
参考サイト（公式サイト）
こちらのサイトを参考にしました。
リンクをメモ。
NuxtJSの導入のコマンド
公式サイトの通りに、
順番にコマンドを実行していく。
導入コマンド
npm init nuxt-app project-name導入時の設定
プロジェクト名の設定
$ npm init nuxt-app project-name
✨ Generating Nuxt.js project in Office-Management
? Project name: (project-name)
上記で入力するか、そのままでよければ、何もせず、Enterキーを押すプログラミング言語の設定
? Programming language: (Use arrow keys) ←JS/TSの選択
❯ JavaScript
TypeScript
上記で自分が使いたい方を選び、Enterキーを押すパッケージ管理方法の設定
? Package manager: (Use arrow keys)
❯ Yarn
Npm
上記で自分が使いたいパッケージ管理方法を選び、Enterキーを押すUIフレームワークの設定
? UI framework: (Use arrow keys)
❯ None
Ant Design Vue
BalmUI
Bootstrap Vue
Buefy
Chakra UI
Element
Oruga
Primevue
Tachyons
Tailwind CSS
Windi CSS
Vant
View UI
Vuetify.js
上記で自分が使いたいUIフレームワークを選び、Enterキーを押す
※何も使用しない場合は「None」を選択導入モジュールの選択
? 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
上記で自分が使いたいモジュールを選び、Enterキーを押す
※選択はSPACEキーで選択/未選択を切り替えます。
※デフォルトはすべて未選択になっています。
※何も使用しない場合はチェックを付けない。構文チェックツールの選択
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint
◯ Commitlint
上記で自分が使いたい構文チェックツールを選び、Enterキーを押す
※選択はSPACEキーで選択/未選択を切り替えます。
※デフォルトはすべて未選択になっています。
※何も使用しない場合はチェックを付けない。テストフレームワークの選択
? Testing framework: (Use arrow keys)
❯ None
Jest
AVA
WebdriverIO
Nightwatch
上記で自分が使いたいテストフレームワークを選び、Enterキーを押す
※何も使用しない場合は「None」を選択レンダリング方法を選択
? Rendering mode: (Use arrow keys)
❯ Universal (SSR / SSG)
Single Page App
上記で自分が行いたいレンダリング方法を選択デプロイ方法の選択
? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting)
Static (Static/Jamstack hosting)
上記で自分が行いたいデプロイ方法を選択開発ツールの選択
? 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)
上記で自分が行いたい開発ツールを選択
※選択はSPACEキーで選択/未選択を切り替えます。
※デフォルトはすべて未選択になっています。
※何も使用しない場合はチェックを付けない。Githubの設定
? What is your GitHub username? ()
自分が使っているGithubがあれば設定
※何もGithubを使用しない場合はそのままEnterキーを押す。バージョン管理ツールの選択
? Version control system: (Use arrow keys)
❯ Git
None
上記で自分が使いたいバージョン管理ツールを選択
※何も使用しない場合は「None」を選択導入処理の完了
上記の導入設定を行い、
導入処理が完了すると以下の表示になる。
🎉 Successfully created project project-name
To get started:
cd project-name
npm run dev
To build & start for production:
cd project-name
npm run build
npm run start起動して表示確認
導入がうまくいったので、
先ほどの導入処理結果に出てきたコマンドで、
実際に起動して表示確認してみる。
フォルダに移動
cd project-name起動コマンド
npm run dev実行結果
表示確認URL
http://localhost:3000/表示確認結果
スキルを使って、就職/転職/副業する時のサイト
プログラミングのスキルなどを、自分なりに高めた上で、
自分のスキルをアピールして就職や転職を行い、年収をあげるか、
副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。
まずはできる範囲で取り組むことで、
少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。
