跳到主要内容

nuxt开发指南

nuxt框架的介绍​

Nuxt.js是基于vue的服务器端渲染框架，常用来做SSR（服务器端渲染）。因为在后端有完整的html页面，所以爬虫更容易爬取获得信息，利于SEO的优化。

服务器渲染和客户端渲染​

  • 服务器端渲染：服务端渲染的模式下，当用户第一次请求页面时，由服务器把需要的组件或页面渲染成 HTML 字符串，然后把它返回给客户端。客户端拿到手的，是可以直接渲染然后呈现给用户的 HTML 内容，不需要为了生成 DOM 内容自己再去跑一遍 JS 代码。
  • 客户端渲染：客户端在请求时，服务端不做任何处理，直接以原文件的形式返回给客户端客户端，然后根据 html 上的 JavaScript，生成 DOM 插入 html

asyncData 用法​

nuxt如果想要在服务器端获取并渲染数据，asyncData方法能够在渲染组件之前异步获取数据

asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据并返回给当前组件

export default {
  data() {
    return { project: 'default' }
  },
  asyncData(context) {
    return { project: 'nuxt' }
  }
}

命令与部署​

在package.json中存放一些命令

"scripts": {
  "dev": "nuxt",  // 本地启动项目
  "build": "nuxt build",
  "generate": "nuxt generate"
}
  • build打包生成的是动态页面
  • 使用generate打包后每个对应的页面都会生成一个html

nuxt框架页面路径规范​

nuxt会根据pages下的文件自动生成路由并引入，支持vue-router的基础路由，动态路由，嵌套路由等。因此文件的命名有一些规范

在Nuxt框架自带的pages文件夹下创建文件夹以及页面

  • 如果跳转的url地址(路由地址)是“/help”，那么框架就会自动帮我们处理，跳转到pages文件夹下hplp 文件夹下的index.vue界面，命名要严格按照这种格式命名。

  • 如果跳转的url地址是后面接了id，表示是动态路由，参数是可选的。那么文件名前面要加“_”下划线符号

  • 如果新建的页面组件，不需要生成页面路由，那么文件名前面要加"-"中杠符号

  • 嵌套路由的使用，需要在pages下添加一个同名的vue文件，用来存放子视图组件 

    pages/
    --| help/
    ---- _id.vue
    ---- index.vue
    --| help.vue