NUXT.js 前端SSR框架使用

一、NUXT.js简介

随着工程量的不断增加，业务处理复杂度提高，传统前后端分离页面的整体加载速度有可能成为瓶颈，另一方面对SEO也非常不友好，而现在很多应用也开始使用SSR解决这一问题，但采用SSR 在另一方面也给服务器增加了压力。而NUXT便是一个支持SSR的前端框架，基于Vue.js，通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。

官网：https://www.nuxtjs.cn/guide

二、创建NUXT项目

1. Nuxt.js团队创建了脚手架工具 create-nuxt-app ，这里直接使用npx安装，期间会提示项目名称，ui框架，web框架，SSR模式还是单页面模式等的选择，根据自己的需要选择。

   npx create-nuxt-app 项目名
   

2. 等项目build完成，进入项目根目录下启动项目。

   npm run dev
   

3. 启动默认端口为3000，在启动完成会给出主页的url，在浏览器输入：

   http://localhost:3000
   

   

三、NUXT.js使用

1. 全局配置

1. 在assets目录下新建 css/globalstyle.css文件，写入如下内容：

   	body{
   	  background-color: red;
   	}
   

2. 然后在nuxt.config.js css下修改为下面配置：

    css: [
       '@/assets/css/globalstyle.css'
     ],
   

3. 运行项目，可以看到所有项目背景都为红色了。

2.路由

nuxt会监听pages目录下的文件变化，新建.vue时会自动添加到路由中，路由模式便是文件的位置信息，可在.nuxt/routes.json中查看。

1. 基础路由

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

routes.json自动生成的配置：

 [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
     {
      name: 'test',
      path: '/test',
      component: 'pages/test.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    }
 ]

2. 路由跳转

<template>
  <nuxt-link to="/">首页</nuxt-link>
</template>

3. 动态路由
   需要创建对应的以下划线作为前缀的 Vue 文件 或 目录

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

routes.json自动生成的配置：

 [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    }
 ]

users-id 的路由路径带有 :id? 参数，表示该路由是可选的。可在跳转时传递参数。

 <template>
  <nuxt-link to="/users/123">首页</nuxt-link>
</template>

在users/_id.vue页面中获取参数：

let param = this.$route.params.id;

4. 嵌套路由
   嵌套路由，可在页面中嵌套子页面，可用于table切换之类的场景。

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

routes.json自动生成的配置：

 [
    {
      path: '/users',
      component: 'pages/users.vue',
      children: [
        {
          path: '',
          component: 'pages/users/index.vue',
          name: 'users'
        },
        {
          path: ':id',
          component: 'pages/users/_id.vue',
          name: 'users-id'
        }
      ]
    }
 ]

嵌套路由需在父容器中使用nuxt-child显示子页面，默认显示users/index .vue，切换子页面同样使用： nuxt-link 。

<nuxt-child keep-alive :foobar="123"></nuxt-child>

3.过度动画

Nuxt.js 使用 Vue.js 的组件来实现路由切换时的过渡动效。
修改上面建的assets/css/globalstyle.css文件，添加下面样式：

```
.page-enter-active, .page-leave-active {
  transition: opacity .5s;
}
.page-enter, .page-leave-active {
  opacity: 0;
}
```

再次点击跳转，便有了动画效果。

4. 中间件

中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前，每一个中间件应放置在 middleware/ 目录下。

1. 新建middleware/auth.js文件，写入如下内容：

export default function (context) {
  console.log("start");
  context.userAgent = process.server ? context.req.headers['user-agent'] : 	navigator.userAgent;
}

2. 在nuxt.config.js文件中添加：

 router: {
    middleware:'auth'
  }

3. 再次运行，便可看到每次打开页面都会打印日志。

5. 默认布局

可通过添加 layouts/default.vue 文件来扩展应用的默认布局。
但一定要添加显示页面的主体内容。

<template>
  <div>
    <div>标题</div>
    <Nuxt />
  </div>
</template>

6. 错误页面

新建：layouts/error.vue文件，添加如下内容，样式可自己修改：

<template>
  <div class="container">
    <h1>404</h1>
    <h1 v-if="error.statusCode === 404">页面不存在</h1>
    <h1 v-else>应用发生错误异常</h1>
    <nuxt-link to="/">首 页</nuxt-link>
  </div>
</template>

<script>
    export default {
        props: ['error'],
        layout: 'blog' // 你可以为错误页面指定自定义的布局
    }
</script>
<style>
  .container{
    width: 20%;
    margin: 50px auto;
  }
</style>

7.异步数据

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

<script>
    import axiox from 'axios';
    export default {
        async asyncData({params}) {
            return axiox.get("http://localhost/GetData/" + params.id)
                .then(res => {
                    console.log(res.data.title)
                    return {title: res.data.title}
                });
        },
        data() {
            return {
                title: 'NG'
            }
        }
    }
</script>

2. async 、 await

<script>
    import axiox from 'axios';
    export default {
        async asyncData({params}) {
            const { data } = await axiox.get("http://localhost/GetData/" + params.id);
            console.log(data);
            return {title: data.title}
        },
        data() {
            return {
                title: 'NG'
            }
        }
    }
</script>

3. 回调函数

<script>
    import axiox from 'axios';
    export default {
        asyncData({params},callback) {
           axiox.get("http://localhost/GetData/" + params.id)
                .then(res => {
                    console.log(res.data.title)
                    callback(null, { title: res.data.title })
                });
        },
        data() {
            return {
                title: 'NG'
            }
        }
    }
</script>