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 devhttp://localhost:3000/
を確認してみてください。
はい、こんなにあっさりと Hello Wold !! ができました。
そうです、すごく開発が早いんです！
今後の基本的な開発の流れは、追加したい機能があれば、
既存で沢山のmodule（モジュール）が開発されていますのでインストールしてモジュールを使いたい所は使い（インストールして設定すればすぐ動くので早いし楽）、
モジュールを使わず直接コードを書きたいところは書き、
という流れで機能を追加していきます。
モジュールを追加する際はターミナルから yarn add <module-name> で追加します。
そうするとpackage.josonに記述されていきます。
今回は Hello World!! が目的なので yarn add で追加するのか、くらいで流してください。
Photo by Greg Rakozy on Unsplash
