Nuxt.jsのバージョンは2.0.0です。
最初に1系でnuxt-community/express-templateでNuxt.js + Expressの環境を作っていて、最近nuxt/create-nuxt-appを使って2系を触ってみてます。
あのファイルどこいったの？ってのがいくつかあったのでメモしておきます。
インストール
$ npx create-nuxt-app
選んだ選択肢は以下の内容
- ? Project name:
myapp - ? Project description:
My geometric Nuxt.js project - ? Use a custom server framework:
express - ? Use a custom UI framework:
none - ? Choose rendering mode:
Universal - ? Use axios module:
yes - ? Use eslint:
yes - ? Use prettier:
node
今回はこんな感じです。
GlobalなCSSのデフォルトの場所
nuxt-community/express-templateだとbodyやhtmlタグ全体のCSS設定はassets/css/main.cssに記載してあったのですが/layouts/default.vueの中のstyleにデフォルトで記述してあります。ここを編集すると全体へ反映できます。
<template>
<div>
<nuxt/>
</div>
</template>
<style>
html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
}
.button--green {
display: inline-block;
border-radius: 4px;
border: 1px solid #3b8070;
color: #3b8070;
text-decoration: none;
padding: 10px 30px;
}
.button--green:hover {
color: #fff;
background-color: #3b8070;
}
.button--grey {
display: inline-block;
border-radius: 4px;
border: 1px solid #35495e;
color: #35495e;
text-decoration: none;
padding: 10px 30px;
margin-left: 15px;
}
.button--grey:hover {
color: #fff;
background-color: #35495e;
}
</style>
Expressのサーバースクリプトの場所
nuxt-community/express-templateだとapi/index.jsにあるindex.jsですが、server/index.jsにあります。
const express = require('express')
const consola = require('consola')
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()
}
// Give nuxt middleware to express
app.use(nuxt.render)
// Listen the server
app.listen(port, host)
consola.ready({
message: `Server listening on http://${host}:${port}`,
badge: true
})
}
start()
起動スクリプト
nuxt-community/express-templateのpackage.jsonを見ると起動スクリプトを見るとnpm startが"nuxt build && nuxt start"になっていることがわかります。Expressでサーバーを起動させたい場合にこの起動方法だとデバッグがうまくいかなかったりPaaS側での起動がうまくいかなかったりVSCodeのデバッグモード起動でうまく動かなかったりがあり、node server.jsの形式で起動しているcreate nuxt appの方が個人的には好きです。
- nuxt-community/express-templateのpackage.json
省略
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt build && nuxt start",
"precommit": "npm run lint",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
},
省略
- nuxt/create-nuxt-appのpackage.json
省略
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production node server/index.js",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
省略
蛇足:
関係ないけどインストール時に最後のprettierをyesにすると最初から起動できずにエラーになりました苦笑
(2018/10/9時点)
デフォルトでエラーでるってジェネレーターとしてどうなんだろ（エラー内容追って直す気になれなかった）
ERROR Failed to compile with 1 errors 7:07:23 PM
error in ./pages/index.vue
Module Error (from ./node_modules/eslint-loader/index.js):
/Users/n0bisuke/dotstudio/playground/nuxt-test/myapp/pages/index.vue
36:1 error Delete `⏎` prettier/prettier
✖ 1 problem (1 error, 0 warnings)
1 error and 0 warnings potentially fixable with the `--fix` option.
@ ./.nuxt/router.js 5:9-7:3
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js