2020.7.9 追記
久しぶりに Nuxt.js を導入したら、バージョンがかなりアップしていたので、更新しました✨
バージョンアップで以前発生していたこちらのエラーは解消されたようです。
はじめに
ちなみにバージョンは次のコマンドで確認できます。
> npx nuxt -v
Nuxt.js をインストール
コマンドラインから次のコマンドでインストールします。
- Yarn を使った場合
> yarn create nuxt-app <my-project>
- npx を使った場合
> npx create-nuxt-app <my-project>
このあといくつか質問がありますので、それぞれ解説します。
Project name
? Project name (my-project)
プロジェクト名を聞かれます。
デフォルトはインストール時にパラメーターで渡したものが表示されますので、大抵の場合はそのまま [Enter] で良いと思います。
Programming language
? Programming language: (Use arrow keys)
> JavaScript
TypeScript
使用する言語を聞かれます。
Package manager
? Package manager: (Use arrow keys)
> npm
yarn
パッケージマネージャーに npm と yarn のどちらを使うか聞かれます。
UI framework
? UI framework:
> None
Ant Design Vue
Bootstrap Vue
Buefy
Bulma
Element
iView
Tachyons
Tailwind CSS
Vuetify.js
UI フレームワークを聞かれます。（あとで変更可能です！）
UIフレームワークについてはこちらの記事が分かりやすかったです！
Nuxt.js modules
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Axios
( ) Progressive Web App (PWA)
( ) Content
Axios と PWA 、Content を利用するか聞かれます。
Axios1 は最低限チェックしたほうが良くて、PWA 2は好みです。
Content はブログなど静的サイトジェネレータライクに利用する場合に導入すると良いようです。
Linting tools
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) ESLint
( ) Prettier
( ) Lint staged files
( ) StyleLint
ESLint と Prettier 、Lint staged files、StyleLint を利用するかどうか聞かれます。
ESLint はコーディングスタイルを統一するのに便利です。
Prettier はコードフォーマッター部分を連動させたりすることもできます。
Lint staged files は Git のコミット時などに Lint のエラーやワーニングがあるとコミットできない仕組みです。
StyleLint は CSS の Lint です。
Test framework
? Testing framework: (Use arrow keys)
> None
Jest
AVA
WebdriverIO
テストフレームワークを聞かれます。
Rendering mode
? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG)
Single Page App
ユニバーサルアプリケーションとシングルページアプリケーションのどちらで作るか聞かれます。
作るアプリに合わせて選択してください。
Deployment target
? Deployment target: (Use arrow keys)
> Server (Node.js hosting)
Static (Static/JAMStack hosting)
Server (Node.js hosting) はサーバーサイドレンダリングを行う設定です。
Static (Static/JAMStack hosting) は静的サイト用の設定です。
Development tools
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) jsconfig.json (Recommended for VS Code)
( ) Semantic Pull Requests
公式サイトに記述がないので、よくわからないのです。。。
Please wait a minute...
この後、プロジェクト作成が行われ、
To get started:
cd my-project
npm run dev
To build & start for production:
cd my-project
npm run build
npm run start
とメッセージが出たら作成完了です！
起動してみよう！
完了メッセージにあったように、作成されたプロジェクトに移動して、起動コマンドを入力してみましょう。
- Yarn を使った場合
> cd my-project
> yarn run dev
- npm を使った場合
> cd my-project
> npm run dev
起動……
╭───────────────────────────────────────╮
│ │
│ Nuxt.js @ v2.13.3 │
│ │
│ ▸ Environment: development │
│ ▸ Rendering: client-side │
│ ▸ Target: static │
│ │
│ Listening: http://localhost:3000/ │
│ │
╰───────────────────────────────────────╯
i Preparing project for development 18:59:15
i Initial build may take a while 18:59:15
√ Builder initialized 18:59:15
√ Nuxt files generated 18:59:15
i Starting type checking service... nuxt:typescript 18:59:21
√ Client
Compiled successfully in 7.54s
http://localhost:3000/ にアクセス！
ﾜｰｲ (/・ω・)/
おわりに
Nuxt.js ってなに？なんて読むの？状態からのスタートでしたが、フロントエンド初めての私でも出来ました！
起動してすぐに画面が表示されるとモチベーションがあがりますね。
Nuxt.js インストールする中で知らない単語がたくさん出てきたのでいい勉強にもなりました！！
（2020.7.9 追記）
バージョンアップしてかなり質問が変わっていて困ったので、この記事が誰かの役に立てば嬉しい限りです。