前言

Nuxt.js 是一个基于 vue.js 的通用应用框架
主要是用来进行 UI 渲染，服务端渲染（SSR）
Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用：
Vue2、Vue-Router、Vuex、Vue服务端渲染（排除使用 mode: ‘spa’）、Vue-Meta

特性

• 基于 Vue.js
• 自动代码分层
• 服务端渲染
• 强大的路由功能、支持异步数据
• 静态文件服务
• ES2015+ 语法支持
• 打包和压缩 JS 和 CSS
• HTML 头部标签管理
• 本地开发支持热加载
• 集成 ESLint 格式规范
• 支持各种样式预处理器：sass、less、stylus 等
• 支持 HTTP/2 推送

  流程图

  

安装

• 初始化并创建一个 Nuxt.js 项目 ```vue 首先执行: vue init nuxt/starter

Generate project in current directory？ [yes]

Project name [项目名]

Project description 回车

Author [作者名称]

```javascript
npx create-nuxt-app <项目名>

服务端渲染的好处

1. 更好的 SEO，由于所搜引擎爬虫抓取工具可以直接查看完全渲染的页面。
2. 对于缓慢的网络或者运行缓慢的设备，提供获取网页速度，有良好的用户体验
3. SSR 会减少对服务器的请求。
   1. 普通页面，会先获取文件，在读取内容，读取到 ajax 的 js 时，在向服务器发送请求，获取内容，这就是至少二次对服务器的请求了
4. SSR 直接在服务端渲染为完整的页面，发送到浏览器

Nuxt使用组件

1. 在 nuxt.config.js 中写入以下代码

   export default {
   components: true,
   }
   

2. 在 pages 目录下的组件中使用即可，无需引入 ```vue // 方法1：当组件在components根目录下时的引入方法

// 方法2：当组件在components/user目录下时的引入方法

然后更新`nuxt.config.js`，告诉 **Nuxt.js** 使用自定义加载组件：
```javascript
module.exports = {
  loading: '~/components/loading.vue'
}

Transition 过渡

路由切换时的过渡效果

使用方法

export default {
  // 字符类型
  transition: '',
  // 对象类型
  transition: {},
  // 函数类型
  transition (to, from) {}
}

只需在某个需要自定义过渡特效的组件中使用即可

<template>
  <transition name="test"></transition>
</template>

<script>
  export default {
    transition: 'test'
  }
</script>
// transition 值类型是字符类型，相当于设置了 transition.name 属性

<template>
  <transition name="test" mode="out-in"></transition>
</template>

<script>
  export default {
    transition: {
      name: 'test',
      mode: 'out-in'
    }
  }
</script>

更多方法见官网：transition

export default {
  transition(to, from) {
    if (!from) {
      return 'slide-left'
    }
    return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
  }
}

• / to /posts => slide-left
• /posts to /posts?page=3 => slide-left
• /posts?page=3 to /posts?page=2 => slide-right

asyncData 异步数据

asyncData方法会在组件(限于页面组件)每次加载之前被调用，在服务端或路由更新之前被调用
此方法被调用的时候，第一个参数被设定为当前页面的上下文对象，Nuxt会将 asyncData返回的数据融合组件data方法返回的数据一并返回给当前的组件

由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象

Layouts 布局

nuxt

<template>
  <div>
    <h1>Welcome</h1>
    <NuxtLink to="/about">
      About page
    </NuxtLink>
  </div>
</template>

<script>
  export default {
    layout: 'dark' // 将 dark.vue 布局组件应用在 index.vue 中
  }
</script>

// dark.vue 为布局组件，名字可随意取，默认为 default.vue
<template>
  <div>
    <Nuxt /> // 此为 pages/index.vue 的容器
  </div>
</template>

nuxt-child

<template>
  <div>
    <h1>我是父级页面</h1>
    <nuxt-child :foobar="123" />
  </div>
</template>

<template>
  <div>
    <h1>{{ foobar }}</h1>
  </div>
</template>

<script>
export default {
  props: ['foobar']
}
</script>

child.vue若不用 props接收，则nuxt-child中的属性将渲染为自定义 css 属性

nuxt-link

<template>
  <div>
    <h1>Home page</h1>
    <nuxt-link to="/about">关于</nuxt-link>
  </div>
</template>

别名：<n-link>、<NuxtLink>、<NLink>

Configuration 配置

css

// 安装 sass 所需的 npm 包
npm install --save-dev node-sass sass-loader

// nuxt.config.js 配置 css 所需资源
module.exports = {
  css: [
    // 直接加载一个 Node.js 模块。（在这里它是一个 Sass 文件）
    'bulma',
    // 项目里要用的 CSS 文件
    '@/assets/css/main.css',
    // 项目里要使用的 SCSS 文件
    '@/assets/css/main.scss'
  ]
}

component

// nuxt.config.js
export default {
  components: true,
}

开启后直接在 pages 目录下的页面组件中使用即可(例：components/Foo.vue == <Foo/>)

router

// nuxt.config.js
module.exports = {
  router: {
    base: '/app/' // 此时应用的根 url 为 http://localhost:3000/app/
  }
}

routeNameSplitter

// nuxt.config.js
export default {
  router: {
    routeNameSplitter: '/'
  }
}
// pages/posts/_id.vue  ==>     posts-id    修改前
// pages/posts/_id.vue  ==>        posts/id    修改后

extendRoutes

// nuxt.config.js
export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'custom',
        path: '*',
        component: resolve(__dirname, 'pages/404.vue')
      })
    }
  }
}

server

// nuxt.config.js
export default {
  server: {
    port: 8000, // default: 3000
    host: '0.0.0.0' // default: localhost,
  }
}

// nuxt.config.js
import path from 'path'
import fs from 'fs'

export default {
  server: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
      cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
    }
  }
}

// nuxt.config.js
export default {
  server: {
    socket: '/tmp/nuxt.socket'
  }
}

Programmatically 编程方式

Usage

const { Nuxt } = require('nuxt')

const options = {}
const nuxt = new Nuxt(options)
nuxt.build().then(() => {
  // 这里可以用 nuxt.render(req, res) 或者 nuxt.renderRoute(route, context)
})

render

const { Nuxt, Builder } = require('nuxt')

const app = require('express')()
const isProd = process.env.NODE_ENV === 'production'
const port = process.env.PORT || 3000

// 用指定的配置对象实例化 Nuxt.js
const config = require('./nuxt.config.js')
config.dev = !isProd
const nuxt = new Nuxt(config)

// 用 Nuxt.js 渲染每个路由
app.use(nuxt.render)

// 在开发模式下启用编译构建和热加载
if (config.dev) {
  new Builder(nuxt).build().then(listen)
} else {
  listen()
}

function listen() {
  // 服务端监听
  app.listen(port, '0.0.0.0')
  console.log('Server listening on `localhost:' + port + '`.')
}

Internals 内部构件

Hooks

nuxt.hook('ready', async nuxt => {
  // 自定义代码
})