Nuxt.jsとは？
Nuxt.jsについて解析しているページはたくさんあるのでここでは簡単に…。
(もっと知識が付いたら使ってみての感想含め記事を書こうと思います)
- Webアプリケーションフレームワーク
- Vue.jsのフレームワーク
- Single Page Application（SPA）とServer Side Rendering（SSR）と静的ページで分けることができる
- ルーティングなどの基本的なWebアプリケーションのための機能が備わっている
環境を構築する
まずはNode.jsをダウンロードしインストールします。 Node.jsはサーバーサイドのJavaScript環境です。 以下のURLより端末の環境にあったインストーラーをダウンロードしインストールします。 ※この記事ではNode.jsの解説やインストール手順については略します。 インストーラーのダウンロードはこちらから また、今回は起動までなので使用しませんが開発のためにVisual Studio Codeもダウンロードをすることを推奨します。 Visual Studio Codeのダウンロードはこちらから
Nuxt.jsのプロジェクトを作成
Node.jsのインストールが完了したら早速、Nuxt.jsのプロジェクトを作成しましょう。 まずはコマンドプロンプトを起動してください。 ※コマンドプロンプトは[Windows+R]でアプリケーションの実行から[cmd]を打つことで起動できます。 ※Visual Studio Codeのターミナルから実行することも可能です。 コマンドプロンプトが起動できたらプロジェクトを作成したい場所まで移動しましょう。 今回はCドライブ直下にsrcのフォルダを作成し、その下にプロジェクトを作成します。
cd c:/
c:/>mkdir src
c:/>cd src
c:/src>対象のディレクトリに移動しましたら以下のコマンドを実行してください。
npx create-nuxt-app プロジェクト名
Nuxt.jsのプロジェクトを作成するコマンドです、ここではSample-Projectとします。
c:\src>npx create-nuxt-app Sample-Project初めてプロジェクトを作成する際は[create-nuxt-app]のインストールのため以下のような確認が入りますが「y」を入力してEnterをしましょう
Need to install the following packages:
create-nuxt-app
Ok to proceed? (y)初回のみインストールが始まりますが以下のように表示されれば成功です。
npm WARN deprecated source-map-url@0.4.1: See 
github.com(https://github.com/lydell/source-map-url#deprecated)
npm WARN deprecated urix@0.1.0: Please see 
github.com(https://github.com/lydell/urix#deprecated)
npm WARN deprecated resolve-url@0.2.1: 
github.com(https://github.com/lydell/resolve-url#deprecated)
npm WARN deprecated source-map-resolve@0.5.3: See 
github.com(https://github.com/lydell/source-map-resolve#deprecated)
create-nuxt-app v4.0.0
✨ Generating Nuxt.js project in Sample-Projectここからプロジェクト作成にあたりいくつか質問がされます。（まだ試したことはありませんがnuxt3からはなくなるそうです、そのうちそちらのページも作らないと）
まずはプロジェクト名を聞かれます。
最初のcreate-nuxt-appで設定した名前以外にしたい場合のみ入力しましょう。
Project name: Sample-Project次に使用する言語をJavaScriptとTypeScriptのどちらかにするか聞かれます。
お好みの言語にしましょう。（後から変更も可能です、今回はJavaScriptを選択しました）
Programming language: (Use arrow keys)
> JavaScript
TypeScript次にパッケージ管理ツールを選択しましょう
こちらもお好みで大丈夫ですがWindowsではnpmを個人的に推奨します。（別記事解説予定）
? Package manager: (Use arrow keys)
Yarn
> Npm続いてUIフレームワークを選択します。
ここでは複数選択可能です。
今回はNoneにします。（後から追加可能）
? 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続いてNuxtで利用するモジュールを選択します。
こちらも選択可能です。（後から変更も可能）
? 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続いてコードの品質管理ツールを選択します。
こちらも選択可能です。（後から変更も可能）
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
> ( ) ESLint
( ) Prettier
( ) Lint staged files
( ) StyleLint
( ) Commitlint続いてテストツールを選択します。
こちらも選択可能です。（後から変更も可能）
Testing framework: (Use arrow keys)
> None
Jest
AVA
WebdriverIO
Nightwatch続いてレンダリングモードを選択します。
ここではUniversalを選択します。
Rendering mode: (Use arrow keys)
> Universal (SSR / SSG)
Single Page App続いてデプロイメントターゲットを選択します。
ここではServerを選択しましょう。
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)続いてGithubのアカウント名を聞かれますが入力しないでEnterして問題ありません。（後でバージョン管理ツールと連携することも可能です）
また、使用するバージョン管理ツールも選択がでますがここではNoneにします。
What is your GitHub username?
Version control system:
None最終的には以下の状態となると思います。
create-nuxt-app v4.0.0
✨ Generating Nuxt.js project in Sample-Project
? Project name: Sample-Project
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username?
? Version control system: None
Warning: name can no longer contain capital letters選択後、以下のように出力されればプロジェクトの作成が完了となります。
🎉 Successfully created project Sample-Project
To get started:
cd Sample-Project
npm run dev
To build & start for production:
cd Sample-Project
npm run build
npm run start
npm notice
npm notice New major version of npm available! 7.15.1 -> 8.10.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.10.0
npm notice Run npm install -g npm@8.10.0 to update!
npm noticeプロジェクト起動し確認
プロジェクト作成が完了したら早速、起動してみましょう
まずは上記で作成したプロジェクトのディレクトリに移動します
cd Sample-Project以下のコマンドを実行してください
npm run dev初回のみ以下のように匿名データを収集していいか聞かれます。
どちらでもいいですが納品物などだとあまり望ましくないのでここではNoにします。
Are you interested in participating? Noその後、以下のように出力されましたら起動成功です。
╭───────────────────────────────────────╮
│ │
│ Nuxt @ v2.15.8 │
│ │
│ ▸ Environment: development │
│ ▸ Rendering: server-side │
│ ▸ Target: server │
│ │
│ Listening: http://localhost:3000/ │
│ │
╰───────────────────────────────────────╯
ℹ Preparing project for development 00:56:12
ℹ Initial build may take a while 00:56:12
ℹ Discovered Components: .nuxt/components/readme.md 00:56:12
✔ Builder initialized 00:56:12
✔ Nuxt files generated 00:56:12
✔ Client
Compiled successfully in 2.28s
✔ Server
Compiled successfully in 2.11s
ℹ Waiting for file changes 00:56:15
ℹ Memory usage: 214 MB (RSS: 311 MB) 00:56:15
ℹ Listening on: http://localhost:3000/http://localhost:3000/にアクセスしてみましょう、以下のような画面になれば動作確認完了です。
コメント
[…] 参考： WindowsでのNuxt.jsプロジェクト立ち上げ […]