1:直接使用nuxt官方脚手架,运行下面
yarn create nuxt-app you-project-name
2:安装完成之后,先 yarn dev
一下,生成 .nuxt
文件夹,这一步很重要,里面的东西是项目运行的关键所在,项目跑起来之后就可以关掉了。
3:在编辑器中打开 nuxt.config.js
文件,配置中添加下面代码。这里注意,直接将export default
直接更换为 module.exports
module.exports = {
dev: process.env.NODE_ENV !== 'production'
}
4:在项目根目录中创建 server
文件夹,文件夹下创建 index.js
,复制下面内容
import { Nuxt, Builder } from 'nuxt'
const Koa = require('koa')
const app = new Koa()
// Import and Set Nuxt.js options
const config = require('./../nuxt.config.js')
async function start() {
// Instantiate nuxt.js
const nuxt = new Nuxt(config)
const {
host = process.env.HOST || '0.0.0.0',
port = '3333'
} = nuxt.options.server
// Build in development
if (config.dev) {
const builder = new Builder(nuxt)
await builder.build()
} else {
await nuxt.ready()
}
app.use((ctx) => {
ctx.status = 200
ctx.respond = false // Bypass Koa's built-in response handling
ctx.req.ctx = ctx // This might be useful later on, e.g. in nuxtServerInit or with nuxt-stash
nuxt.render(ctx.req, ctx.res)
})
app.listen(port, host)
consola.ready({
message: `Server listening on http://${host}:${port}`,
badge: true
})
console.log('我搭建的服务器', `Server listening on http://${host}:${port}`)
}
start()
5:安装 nodemon
yarn add nodemon
6:安装babel-cli
、babel-preset-env
,
yarn add babel-cli babel-preset-env
安装完成之后,在项目根目录下创建 .babelrc
文件,输入下面内容
{
"presets":["env"]
}
7:安装 cross-env
yarn add cross-env -D
8:在package.json
中,更改dev
的脚本代码,这里我添加的dev2
,如下
"scripts": {
"dev2": "cross-env NODE_ENV=development nodemon server/index.js --exec babel-node",
}
项目就可以跑起来了。
后面还要验证能否取到数据。