通过Nuxt体验同构渲染案例

创建文件夹，npm init -y初始化
安装nuxtnpm i nuxt
修改package.json的script

bash

"scripts": {
    "dev": "nuxt"
}

创建pages/index.vue文件

html

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style></style>

执行构建npm run dev相当于执行nuxt，可以看到项目已经启动出来

构建成功之后打开http://localhost:3000/可以看到首页已经出来了，nuxt会根据pages的目录自动生成路由配置。

这个时候再在pages目录下创建一个about.vue文件

html

<template>
  <div>
    <h1>About</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style></style>

在http://localhost:3000/about目录下访问，可以看到对应的页面输出

那么同构到底提现在哪里呢?

先安装npm i axios --save，创建一个新的文件夹static在pages同级目录，将之前的data.json放进去，并在index.html中修改

html

<template>
  <div id="app">
    <h2>{{ title }}</h2>
    <ul>
      <li
        v-for="item in posts"
        :key="item.id"
      >{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  components: {},
  //这里要用Nuxt中特殊提供的钩子函数，专门用于获取服务端渲染的数据
  async asyncData () {
    const { data } = await axios({
      method: 'GET',
      url: 'http://localhost:3000/data.json'
    })
    // 这里返回的数据会和data中的数据合并到一起给页面使用
    return data
  },
  data () {
    return {
      name: 'xm'
    }
  }
}
</script>

<style>
</style>

这个时候可以看到页面上面展示了列表，并且在相应里面也看到了直接将页面直出，是服务端直接渲染出来的

这个页面还是SPA单页应用程序吗?

是的，首屏渲染是服务端，之后交互就是客户端。

pages同级目录下创建文件夹layouts，里面创建了default.vue的文件，这两个都是固定名称。这个default.vue是所有页面的父组件，添加这个不会自动更新，需要重新启动服务npm run dev

html

<template>
<div>
  <ul>
    <li>
      <!-- 类似router-link，用于单页应用导航 -->
      <nuxt-link to="/">Home</nuxt-link>
    </li>
    <li>
      <nuxt-link to="/about">About</nuxt-link>
    </li>
  </ul>
  <!-- 子页面出口 -->
  <nuxt />
</div>
</template>

<script>
export default {

}
</script>

<style></style>

切换两个路由可以看到，这个页面不会刷新，这样就实现了同构渲染。

通过Nuxt体验同构渲染 案例 ​

通过Nuxt体验同构渲染案例