什么是Nuxt

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

官网网站：https://zh.nuxtjs.org

服务端渲染技术Nuxt

Html => 集成项目 => 拆分到前端为Vue组件

什么是服务端渲染

服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。

服务器端渲染(SSR)的优势主要在于：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再进行页面内容的抓取。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。

另外，使用服务器端渲染，我们可以获得更快的内容到达时间(time-to-content)，无需等待所有的JavaScript 都完成下载并执行，产生更好的用户体验，对于那些「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言，服务器端渲染(SSR)至关重要。

简单来说就是Vue单页面渲染是从服务端拉取js到浏览器，再渲染html页面挂载到id为app的DOM元素上，而Nuxt则是在服务端渲染好完整的html页面输出到用户浏览器

安装Nuxt

下载模板 template.zip
配置ESLint，可以将之前vue-admin-template中的.eslintrc.js拿过来覆盖
修改package.js，name、description、author（必须修改，否则项目无法安装）
"name": "nuxt-web",
"version": "1.0.0",
"description": "nuxt-web",
"author": "HeTongHao",

修改nuxt.config.js

修改title、content
这里设置的内容会渲染成页面的标题栏和meta数据中

head: {
  title: '我的Nuxt项目',
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { hid: 'description', name: 'description', content: '我的Nuxt项目' }
  ],
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  ]
},

终端进入项目目录，安装依赖
npm install
测试运行
npm run dev

Nuxt目录结构

资源目录 assets

用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。 assets目录下的文件在服务启动时会映射到/目录中
组件目录 components

用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
布局目录 layouts

用于组织应用的布局组件。
页面目录 pages

用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
插件目录 plugins

用于组织那些需要在根vue.js应用实例化之前需要运行的 Javascript 插件。
nuxt.confifig.js 文件

nuxt.confifig.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。

页面布局

复制静态资源
- 将静态原型中的css、img、photo目录拷贝至assets目录下
- 将favicon.ico复制到static目录下

定义布局

可以把页头和页尾分别提取出来，形成布局

修改layouts目录下default.vue

<template> 
	<div> 
    <!-- 公共头 --> 
    <!-- nuxt为内容区域 --> 
   <nuxt/>  <!-- <nuxt> 与vue-router的 <router-view> 功能一样，用于路由跳转时内容的切换  -->
    <!-- 公共底 --> 
   </div> 
</template>

导入css

nuxt的目录别名规则如下，默认情况下，srcDir 和 rootDir 相同。
~ 或 @ 为：srcDir
~~ 或 @@为：rootDir

<script>
import '~/assets/css/reset.css'
import '~/assets/css/theme.css'
import '~/assets/css/global.css'
import '~/assets/css/web.css'

export default {}
</script>

切换布局

在layouts目录下新增布局blog.vue
在某个页面中指定我们新添加的布局，当通过路由跳转到此页面是就会使用指定的布局
<script>
export default {
layout: 'blog'//应用blog布局
}
</script>

路由

Nuxt的路由根据页面所在pages目录根据规则自动生成

<nuxt-link to="/">首页</nuxt-link> <!-- 使用nuxt-link跳转页面，与vue-router的<router-link>用法相似 -->

基础路由

假设 pages 的目录结构如下：

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

那么，Nuxt.js 自动生成的路由配置如下：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

动态路由

在pages下user目录创建_id.vue，使用params.id获取参数

此时目录结构为:

pages/
--| user/
-----| index.vue
-----| _id.vue
-----| one.vue
--| index.vue

那么会在user下自动增加以下路由

{
  name: 'user-id',
  path: '/user/:id?',
  component: 'pages/user/_id.vue'
}

异步数据渲染

asyncData

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

结合axios异步调用

安装
npm install axios

使用

<script> 
  import axios from '@/utils/request' 
  export default { // asyncData：渲染组件之前异步获取数据 
    asyncData({ params, error }) { 
      return axios.get('http://localhost:8210/edu/teacher')
        .then(res =>{
            console.log(res)// 在命令终端查看输出 
            return { 
              items: res.data
            } 
      	})              	        
    } 
  }
</script>