Nuxt.jsとは？
Nuxt.jsとは、Vueアプリケーションを作成するフレームワークです。
通常のVue.jsの開発で頻繁に使用する以下の機能を最初から含んでいます。
・Vue 2
・Vue Router
・Vuex
・Vue Server Renderer
・vue-meta
なんと言っても「Vue Server Renderer」がありがたい機能ですね。
SEOを意識したい場合に、必要な要素がDOM構築後にレンダリングされ、Googleで検知されにくいことがあります。
Google以外でもOGタグなどは、SPAでレンダリングしてしまうとSNSでクロールしてもらえないなど悲しい目にも遭います。
ページ生成後にJavascriptで生成されたタグは色々不都合なことがあるんですね。。。
Nuxt.jsでは初回表示のDOM生成をサーバサイド側で行うサーバーサイドレンダリングが自動的に機能します。
個別記事などで、ページ生成前に動的にAPIから値を取得したい場合に有効です。
その場合はasyncData()やfetch()といった関数を使うことになります。
むしろasyncDataやfetchをを使わないのであれば、通常のVue.jsでもできることばかりなのでNuxt.js使う意味ないのでは？という感じですね。
Nuxt.jsプロジェクトの作成
今回はnpmのvue-cliを使い、スターターテンプレート(starter-template)でNuxt.jsプロジェクトを作成しましょう。
npmコマンドを使うことが前提のため、まだ使えない方はNode.jsとnpmのインストールを先にしてください。
具体的なインストール方法はここでは記載しません。
調べればわかりやすく書かれたページがたくさん出てくると思います。
npmの準備ができたら、まずはvue-cliのインストールです。
※すでにインストールされている場合は不要です。
npm install -g vue-cli
次にプロジェクトを作成するディレクトリに移動してスターターテンプレートを使い、プロジェクトを作成しましょう。
※test_projectの値は各プロジェクトに合わせてください。
vue init nuxt-community/starter-template test_project
以下を入力するとプロジェクトが作成されますが、デフォルトのままで良い場合はそのまま全部エンターで進んでください。
- Project name (プロジェクト名)
- Project description (プロジェクトの説明)
- Author (作成者)
ではプロジェクトの中に移りましょう。
cd test_project
ここでpackage.jsonの中身を見ると、Nuxt.jsの様々なライブラリが書かれています。
{ "name": "test_project", "version": "1.0.0", "description": "Nuxt.js project", "author": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", "private": true, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate", "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", "precommit": "npm run lint" }, "dependencies": { "nuxt": "^2.0.0" }, "devDependencies": { "babel-eslint": "^10.0.1", "eslint": "^4.19.1", "eslint-friendly-formatter": "^4.0.1", "eslint-loader": "^2.1.1", "eslint-plugin-vue": "^4.0.0" } }
上記をインストールするために「npm install」しましょう。
npm install
インストール後にこんな感じのものが出て来ますね。
:-:
.==-+:
.==. :+- .-=-
.==. :==++-+=.
:==. -**: :+=.
:+- :*+++. .++.
:+- -*= .++: .=+.
-+: =*- .+*: .=+:
-+: .=*- .=*- =+:
.==: .+*: -*- -+-
.=+:.....:+*-.........:=*=..=*-
.-=------=++============++====:
Thanks for installing nuxtjs 🙏
Please consider donating to our open collective
to help us maintain this package.さあ、後は開発サーバの起動です。
npm run dev
これでいつものサンプル画面が表示されればOKです！
