【Nuxt】プロジェクト立ち上げ
はじめに
こんにちは！大ちゃんの駆け出し技術ブログです。
10日間ほど更新できていませんでしたので久しぶりの投稿となります。
今月はVue.jsのフレームワークであるNuxt.jsを中心に投稿していきたいと考えています。
Nuxt.js - ユニバーサル Vue.js アプリケーション
最初ということで簡単にプロジェクトを作成する方法から入ります。
プロジェクト作成
yarnで下記コマンドを実行します。
$ yarn create nuxt-app <project-name>(任意の名前)
その後複数の質問が聞かれます。自分の好きな設定を書きましょう。
- プロジェクトの名前
? Project name: sample
- JSかTSか(TSはわからないのでJSにしました)
? Programming language: (Use arrow keys) ❯ JavaScript TypeScript
- YarnかNpmか(Yarnにしました)
? Package manager: (Use arrow keys) ❯ Yarn Npm
すごくたくさんのフレームワークに対応していて驚きました！ここは自分の好きなVuetify.jsを選択。
? UI framework: (Use arrow keys)
❯ None
Ant Design Vue
BalmUI
Bootstrap Vue
Buefy
Chakra UI
Element
Framevuerk
Oruga
Tachyons
Tailwind CSS
Windi CSS
Vant
View UI
Vuetify.js
- Nuxtのモジュール選択(Axiosを選択)
? 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
このモジュールについては補足します。
Axios - Promise based HTTP client
直訳すると、Promise ベースの HTTP クライアント。
PromiseというのはJSの非同期処理の時に使うものですよね。HTTP clientはリクエストを送ってレスポンスを受け取るやつ。つまり、非同期でリクエストを送ってレスポンスを受け取る。そのまんまでした。
[axios] axios の導入と簡単な使い方 - Qiita
Progressive Web App (PWA)
WebサイトのコンテンツをアプリとしてスマートフォンやPCにインストール可能にする技術
PWA（Progressive Web Apps）はどうスゴイのか？基本知識と12のメリットを解説
Apple Storeだったり、PCだったりにアプリとしてインストールするようにします。Nuxtのモジュールであるんですね。すごい。
Content - Git-based headless CMS
GitベースのヘッドレスCMS
CMSとはなんでしょう。
CMSを導入していないWebサイトでは、「1ページずつ完成形のWebページのデータを作成し、それを保存・管理している」 CMSを導入しているWebサイトでは、「データベース上に個別に保存されている画像やテキスト、テンプレートなどのデータを、CMSが必要に応じて取り出して、Webページを自動的に生成している」
CMSとは？初心者でもわかるCMSの基礎知識とメリット、導入事例｜デジタルマーケティングソリューション｜日立ソリューションズ
GitベースということでGitに保存してあるファイルを必要に応じて取り出しWebページを生成しているというイメージでしょうか？
これ以上は本筋からずれるので、後日ブログに投稿したいと思います！
- Linterの選択(EsLintを選択)
? Linting tools:
❯◯ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint
◯ Commitlint
- テストを選択(Noneを選択)
? Testing framework: (Use arrow keys) ❯ None Jest AVA WebdriverIO Nightwatch
- ファイルのレンダー方法(Single Page Appを選択)
? Rendering mode: (Use arrow keys) ❯ Universal (SSR / SSG) Single Page App
下の記事を参照すれば理解できると思います。
Nuxt.jsにおけるSPA,SSR,SSGの使い方と挙動 - Qiita
- デプロイ先(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)
- 継続的インテグレーション(Noneを選択)
? Continuous integration: (Use arrow keys) ❯ None GitHub Actions (GitHub only) Travis CI CircleCI
- バージョン管理ツール(Gitを選択)
? Version control system: (Use arrow keys)
❯ Git
None
これでプロジェクトが作成されました！
$ yarn dev yarn run v1.22.10 $ nuxt ╭───────────────────────────────────────╮ │ │ │ Nuxt @ v2.15.7 │ │ │ │ ▸ Environment: development │ │ ▸ Rendering: client-side │ │ ▸ Target: server │ │ │ │ Listening: http://localhost:3000/ │ │ │ ╰───────────────────────────────────────╯
これをすればhttp://localhost:3000にアクセスすると以下の画面が表示されます。
デフォルトの画面からすでにかっこいいです！
自動ルーティング
これだけ見るとVueを立ち上げた時の設定と少し違う方法でプロジェクトを立ち上げただけとなりますが、そうではありません。nuxt.jsでは自動ルーティングというとても便利な機能があります。
見るはいうより易し。まずは実装してみます。
以下のファイルを作成してください。
<!-- pages/about/index.vue --> <template> <div>about</div> </template>
その後、http://localhost:3000/aboutにアクセスします。以下のように表示されているはずです。
そうなんです。pagesディレクトリは以下にフォルダを作成するだけでnuxt.jsがよしなにvue-routerと紐づけてくれます。ルーティングを勝手にやってくれるなんて本当にありがたいです！
どこでページを表示しているのかというとdefault.vueにあるNuxtタグです。
<template> <v-main> <v-container> <Nuxt /> <=これ！ </v-container> </v-main>
このNuxtタグがpagesの中のファイルを自動で読み込んでくれています。感謝✨
