【初心者向け】Nuxt.js入門【インストールからHello World編】

Nuxt.jsとは一体なに？

プログラミング言語に「Javascript（ジャバクスリプト）」という言語がありますがご存知でしょうか？

とても人気な言語で、このJavascriptのフレームワーク（開発をよりスムーズに行う為のもの）がたくさんあるのですが、その中の一つに「Vue.js（ヴュージェイエス）」というフレームワークがあります。

そのVue.jsのフレームワークに位置するのが今回のテーマとなるNuxt.jsです。

フレームワークのフレームワーク（笑）

インストールに必要なもの

• node
• yarn・npmどちらか
• vue-cli
• vue-cli-init

ここからターミナルでの作業になります。

project作成（yarnを使ったインストール）

yarn create nuxt-app <project-name>

project作成（npm5.2.0以降を使ったインストール）

npx create-nuxt-app <project-name>

この時にターミナルが質問してくるので上手く会話してください。

1.Project name (project-name)
プロジェクトの名前を決めてください。そのままでよければEnterで。

2.Project description (My groovy Nuxt.js project)
プロジェクトの説明を記入

3.Author name
作成者名

4.Choose the package manager (Use arrow keys)
パッケージマネージャを選択する
> Yarn
> Npm

5.Choose UI framework (Use arrow keys)
UI フレームワークの選択
> None
> Ant Design Vue
> Bootstrap Vue
> Buefy
> Bulma
> Element
> Framevuerk
> iView
> Tachyons
> Tailwind CSS
> Vuetify.js

6.Choose custom server framework (Use arrow keys)
カスタム サーバー フレームワークの選択
> None (Recommended)
> AdonisJs
> Express
> Fastify
> Feathers
> hapi
> Koa
> Micro

7.Choose Nuxt.js modules
Nuxt.jsモジュールを選択します(複数可)
◉ Axios
◉ Progressive Web App (PWA) Support

8.Choose linting tools
リンティングツールの選択(複数可)
◉ ESLint
◉ Prettier
◉ Lint staged files

9.Choose test framework
テスト フレームワークの選択
> None
> Jest
> AVA

10.Choose rendering mode (Use arrow keys)
レンダリング モードの選択
> Universal (SSR)
> Single Page App

11.jsconfig.json (Recommended for VS Code)
jsconfig.json (VS Codeに推奨)

インストール完了、プロジェクト名で名前をつけたディレクトリが作成されます。モジュール諸々インストールされてます。

ローカル環境ができました。

それでは起動してブラウザで確認してみましょう。

yarn dev

cd <project-name>
yarn dev

http://localhost:3000/
を確認してみてください。

はい、こんなにあっさりと Hello Wold !! ができました。
そうです、すごく開発が早いんです！

今後の基本的な開発の流れは、追加したい機能があれば、
既存で沢山のmodule（モジュール）が開発されていますのでインストールしてモジュールを使いたい所は使い（インストールして設定すればすぐ動くので早いし楽）、
モジュールを使わず直接コードを書きたいところは書き、
という流れで機能を追加していきます。

モジュールを追加する際はターミナルから yarn add <module-name> で追加します。
そうするとpackage.josonに記述されていきます。
今回は Hello World!! が目的なので yarn add で追加するのか、くらいで流してください。

Photo by Greg Rakozy on Unsplash