NUXT SSR初级入门笔记(小结)

npx create-nuxt-app <项目名>

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

router: {
 routes: [
  {
   name: 'index',
   path: '/',
   component: 'pages/index.vue'
  },
  {
   name: 'users-id',
   path: '/users/:id"htmlcode">

import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(Element, { locale })


然后可以在 nuxt.config.js 中的 plugins 中引入：


plugins: [
  '@/plugins/element-ui'
 ],


server
服务端目录
static
静态文件目录
store
vuex目录，index.js 为主文件，其他文件默认会配置成 module 模块，默认启用 namespace。
文件形式为：


export const state = () => ({
  // state
})

export const actions = {
  // actions
}

export const mutations = {
  // mutations
}


在 index.js 的 actions 中可以配置 nuxtServerInit，可以用来将数据从服务端传到客户端。
具体使用
创建项目如下：

运行初始项目，效果如下：
 

使用布局
在 layouts 下新建文件 myLayout.vue


<template>
 <div>
  <header>
   <h2>I am header</h2>
  </header>
  <main>
   <nuxt />
  </main>
  <footer>
   <h2>I am footer</h2>
  </footer>
 </div>
</template>


然后我们在 pages 下新建文件 layoutDemo.vue


<template>
 <div>
  <h1>I am layout demo</h1>
 </div>
</template>

<script>
export default {
 layout: 'myLayout'
}
</script>


访问 localhost:3000/layoutDemo，布局效果如下：
 

使用中间件
例如我们实现一个未登录拦截跳转的中间件：
在 middleware 中新建 auth.js


export default function (ctx) {
 // eslint-disable-next-line no-constant-condition
 if (true) { // ctx 判断得到未登录
  ctx.redirect({ path: '/' })
 }
}


再在 layoutDemo.vue 中加上 middleware: 'auth' ，这样访问该页面就会拦截跳转回主页面。
用 asyncData 实现 ssr
我们再在 pages 中新建页面 ssr1.vue


<template>
 <div>
  <ul>
   <li v-for="item of list1" :key="item">
    {{ item }}
   </li>
  </ul>
  <ul style="margin-top: 50px">
   <li v-for="item of list2" :key="item">
    {{ item }}
   </li>
  </ul>
 </div>
</template>

<script>
export default {
 layout: 'myLayout',
 data () {
  return {
   list1: []
  }
 },
 async created () {
  const { status, data: { list } } = await this.$axios.get('/list')
  if (status === 200) {
   this.list = list
  }
 },
 async asyncDate () {
  const { status, data: { list } } = await this.$axios.get('/list')
  if (status === 200) {
   return {
    list2: list
   }
  }
 }
}
</script>


这里我们 list1 是用传统的 vue 方式获取异步数据， list2 用 asyncData 获取异步数据
然后我们在 server 中写接口，应为 node 还是采用 require 的方式，如果我们想使用 import 的方式，可以安装 babel-cli 和 babel-preset-env , 新建配置文件 .babelrc:


{
 "presets": ["env"]
}


然后在 package.json 里将 dev 命令加上后缀 --exec babel-node , server 中书写 node 就可以使用 import 了。
然后安装 koa-router，在 index.js 里加入以下代码：


import Router from 'koa-router'

// 以下代码加在 start 函数内的 原有的 app.use 之前
const router = new Router()
router.get('/list', (ctx) => {
ctx.body = {
 list: ['a', 'b', 'c']
}
})
app.use(router.routes()).use(router.allowedMethods())


然后访问页面，两个列表都正常渲染

我们右键查看源代码：

list2 通过 asyncData 的方式实现了 ssr。
使用 nuxtServerInit 实现 ssr
我们新建页面 ssr2.vue


<template>
 <div>
  <ul>
   <li v-for="item of $store.state.list" :key="item">
    {{ item }}
   </li>
  </ul>
 </div>
</template>

<script>
export default {
 layout: 'myLayout'
}
</script>


然后在 store 中新建 index.js


export const state = () => ({
 list: []
})

export const mutations = {
 setList (state, value) {
  state.list = value
 }
}

export const actions = {
 async nuxtServerInit ({ commit }, { app }) {
  const { status, data: { list } } = await this.$axios.get('/list')
  if (status === 200) {
   commit('setList', list)
  }
 }
}


重新 npm run dev, 访问 localhost:3000/ssr2

查看源代码，也正确渲染

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。