Nuxt.js をはじめてみようと思った時にいくつか方法があったので、メモ。
- 1．nuxt-community/starter-template 編
- 2．scratch 編
- 3．nuxt-community/express-template 編
- 4．nuxt-community/create-nuxt-app 編
- 5．vuetifyjs/nuxt 編
1．nuxt-community/starter-template 編
これ
https://github.com/nuxt-community/starter-template
Make sure to have node 8.0+ and npm 5.0+ installed
と前提条件があるので、まず確認。
node -v
npm -v
もし、前提条件を満たせていない場合は、それぞれ Node を管理しているやり方で、バージョンアップを行う。
nvm 使ってるなら、
nvm ls-remote
nvm install v9.11.1
とか
nvm ls
nvm use v9.11.1
など。
vue cli が入っていなければインストール。入っているかどうかは which vue でチェックすれば良い。
npm install -g vue-cli
いざ！
（最後の nuxt-starter-template-example はプロジェクト名、ディレクトリが作成される。）
vue init nuxt-community/starter-template nuxt-starter-template-example
下記のような質問があるので、デフォルト（括弧内）でよければ、Enter、Enter、Enter で。
そうでなければ適宜入力する。
? Project name (nuxt-starter-template-example)
? Project description (Nuxt.js project)
? Author (high-u <xxx@gmail.com>)
作成されたディレクトリに入る。
cd nuxt-starter-template-example
こんなディレクトリや、ファイルが作成されているはず。
drwxr-xr-x 19 xxx staff 646 4 21 19:40 .
drwxr-xr-x 14 xxx staff 476 4 21 19:19 ..
-rw-r--r-- 1 xxx staff 207 4 21 19:19 .editorconfig
-rw-r--r-- 1 xxx staff 484 4 21 19:19 .eslintrc.js
-rw-r--r-- 1 xxx staff 92 4 21 19:19 .gitignore
drwxr-xr-x 14 xxx staff 476 4 21 19:40 .nuxt
-rw-r--r-- 1 xxx staff 417 4 21 19:19 README.md
drwxr-xr-x 3 xxx staff 102 4 21 19:19 assets
drwxr-xr-x 4 xxx staff 136 4 21 19:19 components
drwxr-xr-x 4 xxx staff 136 4 21 19:19 layouts
drwxr-xr-x 3 xxx staff 102 4 21 19:19 middleware
drwxr-xr-x 797 xxx staff 27098 4 21 19:31 node_modules
-rw-r--r-- 1 xxx staff 833 4 21 19:19 nuxt.config.js
-rw-r--r-- 1 xxx staff 379406 4 21 19:30 package-lock.json
-rw-r--r-- 1 xxx staff 627 4 21 19:19 package.json
drwxr-xr-x 4 xxx staff 136 4 21 19:19 pages
drwxr-xr-x 3 xxx staff 102 4 21 19:19 plugins
drwxr-xr-x 4 xxx staff 136 4 21 19:19 static
drwxr-xr-x 3 xxx staff 102 4 21 19:19 store
README.md を見ると
# nuxt-starter-template-example
> Nuxt.js project
## Build Setup
``` bash
# install dependencies
$ npm install # Or yarn install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm start
# generate static project
$ npm run generate
```
README.md にもある通り、開発環境を下記のように起動してみる。
npm install
npm run dev
OPEN http://localhost:3000 と表示されるので、ブラウザで開くと。
次に、本番用にビルドしてみる。
npm run build
npm start
./.nuxt/dist/ ここにビルドしたものができる。
-rw-r--r-- 1 xxx staff 584 4 21 19:52 LICENSES
-rw-r--r-- 1 xxx staff 27797 4 21 19:52 app.eb57d90adda2665925e3.js
-rw-r--r-- 1 xxx staff 383 4 21 19:52 index.spa.html
-rw-r--r-- 1 xxx staff 132 4 21 19:52 index.ssr.html
drwxr-xr-x 3 xxx staff 102 4 21 19:52 layouts
-rw-r--r-- 1 xxx staff 1467 4 21 19:52 manifest.7d9daa6482740ff1e77d.js
drwxr-xr-x 3 xxx staff 102 4 21 19:52 pages
-rw-r--r-- 1 xxx staff 125869 4 21 19:52 server-bundle.json
-rw-r--r-- 1 xxx staff 144240 4 21 19:52 vendor.b75be1ba908210d502f4.js
-rw-r--r-- 1 xxx staff 5746 4 21 19:52 vue-ssr-client-manifest.json
2．scratch 編
mkdir nuxt-scratch-example
cd nuxt-scratch-example
package.json を作成
{
"name": "my-app",
"scripts": {
"dev": "nuxt"
}
}
npm install --save nuxt
pages ディレクトリを作成
pages/index.vue を作成
<template>
<h1>Hello world!</h1>
</template>
OPEN http://localhost:3000 って言われるので、ブラウザでアクセスする。
ま、そりゃそうだわ。
ここから組み立てていく、スキルも気力も無いな。
3．nuxt-community/express-template 編
これ
https://github.com/nuxt-community/express-template
vue-cli をインストール済みの前提で、下記コマンドを実行する。
vue init nuxt-community/express-template nuxt-express-template-example
いくつか質問される。
? Project name (nuxt-express-template-example)
? Project description (Nuxt.js project)
? Author (high-u <xxx@gmail.com>)
作成されたディレクトリに入る。
cd nuxt-express-template-example
こんなディレクトリや、ファイルが作成されているはず。
やっぱ気になるのは server 。そりゃ express なんで、そうなんだろうけど。
drwxr-xr-x 16 xxx staff 544 4 21 20:00 .
drwxr-xr-x 15 xxx staff 510 4 21 20:00 ..
-rw-r--r-- 1 xxx staff 254 4 21 20:00 .eslintrc.js
-rw-r--r-- 1 xxx staff 116 4 21 20:00 .gitignore
-rw-r--r-- 1 xxx staff 536 4 21 20:00 README.md
drwxr-xr-x 4 xxx staff 136 4 21 20:00 assets
-rw-r--r-- 1 xxx staff 130 4 21 20:00 backpack.config.js
drwxr-xr-x 3 xxx staff 102 4 21 20:00 components
drwxr-xr-x 4 xxx staff 136 4 21 20:00 layouts
-rw-r--r-- 1 xxx staff 791 4 21 20:00 nuxt.config.js
-rw-r--r-- 1 xxx staff 958 4 21 20:00 package.json
drwxr-xr-x 4 xxx staff 136 4 21 20:00 pages
drwxr-xr-x 3 xxx staff 102 4 21 20:00 plugins
drwxr-xr-x 4 xxx staff 136 4 21 20:00 server
drwxr-xr-x 3 xxx staff 102 4 21 20:00 static
-rw-r--r-- 1 xxx staff 189127 4 21 20:00 yarn.lock
README.md チェック。
# nuxt-express-template-example
> Nuxt.js project
## Build Setup
``` bash
# install dependencies
$ npm install # Or yarn install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm start
```
For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).
## Backpack
We use [backpack](https://github.com/palmerhq/backpack) to watch and build the application, so you can use the latest ES6 features (module syntax, async/await, etc.).
で、いつものおまじないを。
npm install
npm run dev
Server listening on 127.0.0.1:3000 こんなのが表示されるので、ブラウザでアクセスする。
package.json の dependencies 見ると、ajax の axios 、 環境変数設定の cross-env 、 Webサーバの express があるある。
"dependencies": {
"axios": "^0.16.2",
"cross-env": "^5.0.1",
"express": "^4.15.3",
"nuxt": "^1.0.0-rc3",
"source-map-support": "^0.4.15"
},
package.json の scripts を見ると、 backpack なるものが使われている。
"scripts": {
"dev": "backpack dev",
"build": "nuxt build && backpack build",
"start": "cross-env NODE_ENV=production node build/main.js",
"precommit": "npm run lint",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
},
backpack は、こんな感じらしい。
バックパックは、Node.jsのための最小限の構築システムです。 Facebookの作成反応アプリ、ZeitのNext.js、RemyのNodemonに触発されたBackpackでは、最新のNode.jsアプリやサービスをゼロ設定で作成することができます。 Backpackは、ファイルの監視、ライブリロード、トランスリンギング、バンドリングをすべて処理するので、あなたはそれをする必要はありません。
backpack.config.js があったので、覗いてみた。
module.exports = {
webpack: (config, options, webpack) => {
config.entry.main = './server/index.js'
return config
}
}
./server/index.js 見てみる。express を動かしてた。
import express from 'express'
import { Nuxt, Builder } from 'nuxt'
import api from './api'
const app = express()
const host = process.env.HOST || '127.0.0.1'
const port = process.env.PORT || 3000
app.set('port', port)
// Import API Routes
app.use('/api', api)
// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')
// Init Nuxt.js
const nuxt = new Nuxt(config)
// Build only in dev mode
if (config.dev) {
const builder = new Builder(nuxt)
builder.build()
}
// Give nuxt middleware to express
app.use(nuxt.render)
// Listen the server
app.listen(port, host)
console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console
（Backpack は、別途使ってみたい。）
こんなことしているので、その配下をチェック。
// Import API Routes
app.use('/api', api)
./server/api/ 配下。
-rw-r--r-- 1 xxx staff 149 4 21 20:00 index.js
-rw-r--r-- 1 xxx staff 499 4 21 20:00 users.js
index.js
import { Router } from 'express'
import users from './users'
const router = Router()
// Add USERS Routes
router.use(users)
export default router
users.js
import { Router } from 'express'
const router = Router()
// Mock Users
const users = [
{ name: 'Alexandre' },
{ name: 'Pooya' },
{ name: 'Sébastien' },
]
/* GET users listing. */
router.get('/users', function (req, res, next) {
res.json(users)
})
/* GET user by ID. */
router.get('/users/:id', function (req, res, next) {
const id = parseInt(req.params.id)
if (id >= 0 && id < users.length) {
res.json(users[id])
} else {
res.sendStatus(404)
}
})
export default router
お、さっき 127.0.0.1:3000 で表示したサイトで、おそらく axios 使ってたたいているだろう API だな。
4．nuxt-community/create-nuxt-app 編
これ
https://github.com/nuxt-community/create-nuxt-app
Make sure you have npx installed (npx is shipped by default since NPM 5.2.0)
npm が 5.2 以上なら入っているのかな？ which npx でチェックしたら入ってた。
入っていなければ、 npm install -g npx で入れれば良いらしい。
では早速。
npx create-nuxt-app nuxt-create-nuxt-app-example
いろいろ聞かれる。
? Project name (nuxt-create-nuxt-app-example)
? Project description (My majestic Nuxt.js project)
? Use a custom server framework (Use arrow keys)
❯ none
express
koa
adonis
hapi
feathers
micro
? Use a custom UI framework (Use arrow keys)
❯ none
bootstrap
vuetify
bulma
tailwind
element-ui
? Choose rendering mode (Use arrow keys)
❯ Universal
Single Page App
? Use axios module (Use arrow keys)
❯ no
yes
? Use eslint (Use arrow keys)
❯ no
yes
? Author name (high-u)
? Choose a package manager (Use arrow keys)
❯ npm
yarn
今回はこんな感じにした。
- Use a custom server framework >
express - Use a custom UI framework >
vuetify - Choose rendering mode >
Single Page App - Use axios module >
yes - Use eslint >
yes - Choose a package manager >
npm
処理が終わったらこんなメッセージが。 npm install は、いらないんだね。もう node_modules あるし既に実行されているのか。
To get started:
cd nuxt-create-nuxt-app-example
npm run dev
To build & start for production:
cd nuxt-create-nuxt-app-example
npm run build
npm start
移動といつもの呪文。
cd nuxt-create-nuxt-app-example
npm run dev
Server listening on http://127.0.0.1:3000 と表示されるので、ブラウザでアクセス。
かなりリッチな画面が表示されたー。
api を作ってみようと server/index.js を見てみた。
const express = require('express')
const { Nuxt, Builder } = require('nuxt')
const app = express()
const host = process.env.HOST || '127.0.0.1'
const port = process.env.PORT || 3000
app.set('port', port)
// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')
async function start() {
// Init Nuxt.js
const nuxt = new Nuxt(config)
// Build only in dev mode
if (config.dev) {
const builder = new Builder(nuxt)
await builder.build()
}
app.get('/api/test', function (req, res) {
res.json({ ok: true })
})
// Give nuxt middleware to express
app.use(nuxt.render)
// Listen the server
app.listen(port, host)
console.log('Server listening on http://' + host + ':' + port) // eslint-disable-line no-console
}
start()
require なんだね。 import は怒られる。
5．vuetifyjs/nuxt 編
これ
https://github.com/vuetifyjs/nuxt
ここまでは、公式ページに記載のものだったり、nuxt-community のものだったりしたが、外部のものを試す。
vue init vuetifyjs/nuxt nuxt-vuetifyjs-example
聞かれます。
? Project name (nuxt-vuetifyjs-example)
? Project description (Nuxt.js + Vuetify.js project)
? Author (high-u <xxx@gmail.com>)
? Use a-la-carte components? (y/N)
下記は No にした。
- Use a-la-carte components >
No
a-la-carte は、
コンポーネントフレームワークであるため、Vuetifyは常に水平方向に成長します。プロジェクトによっては、小さなパッケージサイズが必要になる場合があります。アラカルトシステムを使用すると、インポートするコンポーネントを選択して選択することができ、ビルドサイズを大幅に削減できます。
だそうです。
で、いつものやつです。
cd nuxt-vuetifyjs-example
npm install
dev で起動！
npm run dev
他詳細は、 README.md で。
package.json を覗いてみる。
{
"name": "nuxt-vuetifyjs-example",
"version": "1.0.0",
"description": "Nuxt.js + Vuetify.js project",
"author": "high-u <xxx@gmail.com>",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"nuxt": "^1.0.0",
"vuetify": "^1.0.0"
},
"devDependencies": {
"babel-eslint": "^7.2.3",
"eslint": "^4.3.0",
"eslint-config-standard": "^10.2.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.1.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.1.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-standard": "^3.0.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1"
}
}
作成されたファイルとディレクトリは
-rw-r--r-- 1 xxx staff 254 4 23 10:08 .eslintrc.js
-rw-r--r-- 1 xxx staff 92 4 23 10:08 .gitignore
drwxr-xr-x 14 xxx staff 476 4 23 10:15 .nuxt
-rw-r--r-- 1 xxx staff 473 4 23 10:08 README.md
drwxr-xr-x 4 xxx staff 136 4 23 10:08 assets
drwxr-xr-x 5 xxx staff 170 4 23 10:08 components
drwxr-xr-x 4 xxx staff 136 4 23 10:08 layouts
drwxr-xr-x 3 xxx staff 102 4 23 10:08 middleware
drwxr-xr-x 807 xxx staff 27438 4 23 10:13 node_modules
-rw-r--r-- 1 xxx staff 1100 4 23 10:08 nuxt.config.js
-rw-r--r-- 1 xxx staff 379781 4 23 10:13 package-lock.json
-rw-r--r-- 1 xxx staff 767 4 23 10:08 package.json
drwxr-xr-x 5 xxx staff 170 4 23 10:08 pages
drwxr-xr-x 4 xxx staff 136 4 23 10:08 plugins
drwxr-xr-x 5 xxx staff 170 4 23 10:08 static
drwxr-xr-x 4 xxx staff 136 4 23 10:08 store
.eslintrc.js は、
module.exports = {
root: true,
parser: 'babel-eslint',
env: {
browser: true,
node: true
},
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
rules: {},
globals: {}
}
うん。
雑感
- nuxt-community/starter-template
- ホスティング場所もあり、css フレームワークもとりあえずはいらんとか、もしくは組み込むならいいね。
- スクラッチ
- いつかは？、ここから組み立てたい。
- nuxt-community/express-template
- api サーバも含めてサクッと始めるには非常に良さげ。css フレームワークは必要であれば導入の必要あるし、インフラの設計次第では、このまま api 実装とはならないだろうけどね。好感触。
- nuxt-community/create-nuxt-app
- 選択肢も多くちょー便利と思ったのもつかのま、eslint の設定がぐぬぬ。たぶん使わないな。
- vuetifyjs/nuxt
- 『ホスティング場所はある、api サーバも別途用意する』、『css フレームは vuetify だ』、なら良いかも。