2019-12-10 初稿：概念 基本项目启动 2021-05-16 补充技术卡片

新技术QA
技术名称 Nuxt
文档官网 https://zh.nuxtjs.org/
作者、技术团队
能做解决什么问题 vue ssr解决方案，ssg
特点、优点 名气大，插件丰富，社区氛围好
同类选型 gridsome vuepress
缺点、踩坑注意
宣传语 使用 NuxtJS 充满信心地构建您的下一个 Vue.js 应用程序。
选型关键词 vue ssr,vue ssg

Nuxt 基础

概念

spa首屏慢，seo不友好。传统的服务端渲染，组件复用传值比较麻烦。最好 vue 和 ssr 结合。

ssr 服务端渲染 server side render 直接在服务端层获取数据，渲染出完成的 HTML 文件，直接返回给用户浏览器访问。

vue官方有一个指导文档，通读下来觉得要实践的地方较多，没有跟上。这里介绍独立的 nuxt 。nuxt可以做spa，也可以做ssr，也可以静态化。

大致的思路： 客户端请求 — 服务端收到请求 — 中间件 — 校验 — asyncData fetch — render — 客户端。

  1. npx create-nuxt-app app-name
  2. # 开发
  3. nuxt
  4. # 构建
  5. nuxt build && nuxt start
  6. # 生成静态文件
  7. nuxt generate
  8. nuxt generate --fail-on-error

注意：

  • nuxt.config.js 的 target 有 static 和 server 两个值。可看下面配置部分。
  • 查看 webpack 插件配置 npx nuxt webpack --depth=4 > webpack.config.js

目录结构

  1. ├── .nuxt # 自动生成的真正的入口文件
  2. ├── layouts # 模板。
  3. ├── pages # 页面文件。路径+文件名就是路由。
  4. ├── store # 全局数据流 vuex
  5. ├── assets # 静态资源文件 less js 等
  6. ├── static # 不参与编译的静态资源
  7. ├── middleware # 中间件
  8. ├── plugins # 插件
  9. ├── nuxt.config.js # 唯一配置文件

页面路由

自动路由。算是路由最佳实现，不再单独维护 router.js ，基于目录自动生成配置。假定 存在 pages/home.vue 和 pages/index.vue ，会自动生成 /home 和 / 。路由地图在 .nuxt/router.js 里。

导航。相比 vue-router 提供的 router-link 和 router-view ，nuxt做了封装 nuxt-link 和 nuxt 。
动态路由。如果是参数路由 /pages/videos/_id.vue ，所有 /video/* 的会指向这个模板。内部可以通过 $router.params.id 获取

路由嵌套。存在 pages/videos.vue 和 pages/videos/index.vue 外层生效。外层可以通过 <nuxt-child> 获得内部元素

laouts 模板。在某个pages/a.vue 内

  1. exportdefault {
  2.  layout:"videos" // 自定义模板
  3.  };

live-preview 实时预览 https://nuxtjs.org/docs/2.x/features/live-preview

asyncData

插件一般是 @nuxtjs/axios 方便统一。
异步函数请求的数据会变成 vue的data，可以替代 data。 这个是实践的重点
功能是在页面组件中。

请看这个官方的实例 https://codesandbox.io/s/github/nuxtlabs/examples/tree/master/data-fetching/async-data-hook?from-embed=&file=/pages/index.vue

通过 asyncData 能够发起请求并注册到 data中。

配置

我们通过 nuxt.config.js 来覆盖默认配置。https://nuxtjs.org/docs/2.x/directory-structure/nuxt-config

  1. // nuxt.config.js
  2. export default {
  3.   ssr: true, // true defalut universal. false is spa
  4.   target: 'static', // 默认server SSR，设置static SSG
  5.   head:{}, // 参考 vue-meta
  6.   css:[], // 注入全局样式
  7.   build:{}, // 进一步修改webpack
  8.   loading:{}, // 页面切换时候的进度条。可以换自定义组件
  9.   alias:{}, // 默认提供两个别名 ~表示src目录
  10. }

视图

可以改变默认模板。在app根目录常见 app.html 即可

默认布局 layouts/default.vue 扩展默认

  1. <template>
  2.     <nuxt />
  3. </tempalte>

要自定义布局 layouts/blog.vue 然后在 pages/posts.vue 里自定义 layout

自定义错误页面 /layouts/error.vue 应当视为一个 page

页面上下文

nuxt给页面添加了一些功能：

  • asyncData 异步数据处理。第一个参数是当前页面的上下文对象
  • fetch 不会设置组件的data，单纯获取数据
  • head 配置当前页面的meta标签
    • 具体要参考 vue-meta 使用文档
  • layout 指定布局
  • loading 可以手动控制loading 展示
  • transition 指定个过渡效果
  • scrollToTop 判定是否需要跳转到顶部
  • validate 校验动态路由的 参数
  • middleware 指定中间件，中间件会在渲染之前调用。

this

  • $fetch()
  • $nuxt:
    • isOffline
    • isOnline 在线状态
    • refresh() 主动刷新
    • $loading
      • start()
      • finish()