LoginSignup
46
44

More than 5 years have passed since last update.

@high-u

Nuxt.js はじめました。プロジェクト作成で 5 つの方法を試した。

Last updated at Posted at 2018-04-23

Nuxt.js をはじめてみようと思った時にいくつか方法があったので、メモ。

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 と表示されるので、ブラウザで開くと。

image.png

次に、本番用にビルドしてみる。

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 って言われるので、ブラウザでアクセスする。

image.png

ま、そりゃそうだわ。
ここから組み立てていく、スキルも気力も無いな。

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 こんなのが表示されるので、ブラウザでアクセスする。

image.png

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 だな。

image.png

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 と表示されるので、ブラウザでアクセス。
かなりリッチな画面が表示されたー。

image.png

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

image.png

他詳細は、 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 だ』、なら良いかも。
46
44
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
46
44