在开始今天的文章内容前，我们首先先要了解一下什么是Nuxt.js？
Nuxt.js是通用的VUE的一个SSR框架（服务器端渲染）。官方介绍是通过对客户端/服务端基础框架的抽象组织，Nuxt.js主要关注的应用的UI渲染。
那什么是SSR呢？
SSR是在服务器端把vue文件直接渲染成html返回给浏览器。SSR对SEO的支持非常好，以前用vue做的SPA（单页应用）对搜索引擎是不友好的，搜索引擎不好抓取单页应用；相对比SPA加载速度快，SSR是直接将html字符串传给浏览器。
Nuxt.js的特点
- 自动代码分层；
- 服务端渲染；
- 强大的路由功能，支持异步数据；
- 静态文件服务；
- ES6/ES7语法支持；
- 打包压缩js和css；
- HTML头部标签管理；
- 本地开发支持热加载；
- 集成ESLint；
- 支持各种样式处理器：SASS、LESS等等。
Nuxt.js路由传参跳转
在pages 的目录结构如下创建xxx.vue，Nuxt.js 会自动生成的路由配置，要在页面之间使用路由，使用<nuxt-link> 标签
路由跳转：
代码语言：javascript复制<template>
<nuxt-link to="/">首页</nuxt-link>
</template>路由传参跳转（可参考vue的路由传参）
代码语言：javascript复制<template>
<nuxt-link : to="{name: '/', params:{id:'1'}}">首页</nuxt-link>
</template>Nuxt.js生命周期
uxtServerlnit：
服务器初始化，以在这个生命周期中获取token，并存储（只会运行一次）。在store文件中创建index.js
代码语言：javascript复制export const actions = {
nuxtServerlnit(store, context) {
// 服务器初始化store
console.log(store, context);
}
}moddleware：
中间件运行，类似于vue.js中的导航守卫，可以是全局的，路由的，组件的。可以在这个生命周期中进行用户是否登录判断；可全局nuxt.config.js进行配置、可在页面组件中配置（layout）、也可在布局组件中配置（page&children）
代码语言：javascript复制// nuxt.config.js中配置（全局配置）
module.exports = {
router: {
middleware: 'auth'
}
}
// 在middleware文件中创建auth.js
export default ({store,route,redirect,params,query,req,res})=>{
// 全局守卫
console.log('middleware');
}
// 在布局层页面配置，在layouts文件中的default.vue
<script>
export default {
// middleware: ‘auth’ // 布局层中间件定义
middleware(){
console.log('middleware');
}
}
</script>
// 在页面中配置。在pages文件中
<script>
export default {
// middleware: ‘auth’ // 页面层中间件定义
middleware(){
console.log('middleware');
}
}
</script>validate：
校验参数，用来做校验做url参数对不对的.主要是在页面中使用。
代码语言：javascript复制<script>
export default {
validate ({params,query}){
console.log('validate')
return true
}
}
</script>asyncData：
异步数据处理，限于页面组件(pages)中使用个，components中不能使用每次加载之前被调用。一般在这个函数中发送请求，读取服务端数据
fetch：
异步数据处理，可以在页面、组件中都能使用。读取服务端数据提交给vuex
render：
开始客户端渲染
服务端和客户端公用个的生命周期 (el还没有被渲染)：
代码语言：javascript复制beforeCreate()
created()注：服务端不存在window，不要在服务端生命周期获取
客户端的生命周期：
代码语言：javascript复制beforeMount()
mounted()meta信息注入
可方便爬虫爬到该网站的基本描述信息。在nuxt.config.js文件中配置
代码语言：javascript复制module.exports = {
head: {
title: '网站统一标题',
meta: [
{charset:'utf-8'},
{hid: 'description',name: 'description',content: '网站描述信息'}
// meta标签的hid在每一个配置中保持一致
],
link: [
{rel: 'icon',type: 'image/x-icon',href: '/favicon.ico'}
]
}
}页面中自定义信息描述：
代码语言：javascript复制export default {
head() {
return {
meta: []
}
},
}Nuxt部署
在nuxt.config.js文件中配置：
代码语言：javascript复制module.exports = {
server: {
port: 3000 // 指定nutx端口，默认为3000
host: '0.0.0.0' // 指定主机地址（本地）
}
}npm run build 进行打包，我们需要复制到服务器的文件：.nuxt、package-lock.json、package.json、nuxt.config.js、static、server（反向代理）
感兴趣的可以自行查阅官方文档。Nuxtjs：https://nuxtjs.org/
