VUE 服务器端渲染-NUXT

笔记参考
https://zh.nuxtjs.org/

1. 服务器端渲染 利于 SEO
2. 客户端渲染

vue-server-renderer

https://ssr.vuejs.org/zh/guide/

安装环境

npm install vue vue-server-renderer --save

  

 

  
1
 

1、渲染示例

const Vue = require("vue");
const VueServerRenderer = require("vue-server-renderer");

// 第 1 步：创建一个 Vue 实例
const app = new Vue({
  template: `<div>Hello {{name}}</div>`,
  data() { return { name: "Tom", };
  },
});

// 第 2 步：创建一个 renderer
const renderer = VueServerRenderer.createRenderer();

// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app).then((html) => {
  console.log(html);
});
// <div data-server-rendered="true">Hello Tom</div>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
 

2、与服务端结合

npm install express --save

  

 

  
1
 

const Vue = require("vue");
const VueServerRenderer = require("vue-server-renderer");
const express = require("express");

// vue实例
const app = new Vue({
  template: `<div>Hello {{name}}</div>`,
  data() { return { name: "Tom", };
  },
});

// 渲染器
const renderer = VueServerRenderer.createRenderer();

// 服务
const server = express();

server.get("*", async (request, response) => {
  const html = await renderer.renderToString(app);
  response.end(html);
});

server.listen(8080);

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
 

官方 Demo
https://github.com/vuejs/vue-hackernews-2.0/

Nuxt

1、使用 npx 创建项目

npx create-nuxt-app my-app

# 等价于
npm install -g create-nuxt-app
create-nuxt-app my-app


  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

如果速度慢，可以配置国内源

vim ~/.bash_profile

alias cnpx='NPM_CONFIG_REGISTRY=https://registry.npm.taobao.org/ npx'

  

 

  
1
  
2
  
3
 

2、目录结构

静态资源 assets 会被编译 scss等
组件 components
布局组件 layouts
中间件 middleware
页面路由 pages
插件目录 plugins 根vue.js应用 实例化之前运行
静态文件 static 不会被编译处理
应用的Vuex 状态树  store
个性化配置 nuxt.config.js
脚本接口 package.json

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

别名

~ 或 @ srcDir
~~ 或 @@ rootDir

assets 或者 static 使用~

  

 

  
1
  
2
  
3
  
4
 

3、配置

css

npm install node-sass sass-loader --save-dev

  

 

  
1
 

4、路由

<nuxt-link to="/"></nuxt-link>

  

 

  
1
 

pages 目录下会自动生成

(1)基础路由

pages/detail
=>
/detail

  

 

  
1
  
2
  
3
 

(2)动态路由

pages/detail/_id.vue

=>

/detail/007

$route.params.id == 007

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

(3)嵌套路由

pages/users.vue

pages/users/index.vue

  

 

  
1
  
2
  
3
 

(4)过渡动效

assets/css/main.scss

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

nuxt.config.js：

module.exports = {
  css: ["assets/css/main.scss"],
};

  

 

  
1
  
2
  
3
 

5、中间件 middleware

6、模板

app.html 不建议直接修改

布局 layouts

7、异步数据

asyncData 页面加载之前

static/data/user.json

{
  "name": "Tom",
  "age": 23
}

  

 

  
1
  
2
  
3
  
4
 

pages/index.vue

<template>
  <div class="container"> {{ initData.name }}
  </div>
</template>

<script>
  import axios from "axios"; export default { async asyncData(context) { const res = await axios.get("http://localhost:3000/data/user.json"); console.log(res); return { initData: res.data, }; },
  };
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
 

8、资源文件

assets 会被打包

static 不会被打包

<!-- 引用 static 目录下的图片 -->
<img src="/my-image.png" />

<!-- 引用 assets 目录下经过 webpack 构建处理后的图片 -->
<img src="~/assets/my-image-2.png" />

  

 

  
1
  
2
  
3
  
4
  
5
 

9、插件

plugins/vue-notifications.js：

import Vue from "vue";
import VueNotifications from "vue-notifications";

Vue.use(VueNotifications);

  

 

  
1
  
2
  
3
  
4
 

配置 plugins 如下：

module.exports = {
  plugins: ["@/plugins/vue-notifications"],
};

  

 

  
1
  
2
  
3
 

10、注入

(1)注入 Vue 实例

plugins/vue-inject.js:

import Vue from "vue";

Vue.prototype.$debug = (msg) => console.log(msg);

  

 

  
1
  
2
  
3
 

nuxt.config.js:

export default {
  plugins: ["~/plugins/vue-inject.js"],
};

  

 

  
1
  
2
  
3
 

(2)注入 context

plugins/ctx-inject.js:

export default ({ app }, inject) => {
  // Set the function directly on the context.app object
  app.debug = (msg) => console.log(msg);
};

  

 

  
1
  
2
  
3
  
4
 

nuxt.config.js:

export default {
  plugins: ["~/plugins/ctx-inject.js"],
};

  

 

  
1
  
2
  
3
 

(3)同时注入

会自动添加前缀$

export default ({ app }, inject) => {
  inject("debug", (msg) => console.log(msg));
  );
};

  

 

  
1
  
2
  
3
  
4
 

nuxt.config.js:

export default {
  plugins: ["~/plugins/combined-inject.js"],
};

  

 

  
1
  
2
  
3
 

11、状态树

fetch 方法会在渲染页面前被调用，作用是填充状态树 (store) 数据

与 asyncData 方法类似，不同的是它不会设置组件的数据。

nuxtServerInit：服务端数据传给客户端的状态树

store/index.js

export const state = () => ({
  counter: 0,
});

export const mutations = {
  increment(state) { state.counter++;
  },
};

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

pages/index.vue

<p>{{$store.state.counter}}</p>

<button @click="$store.commit('increment')">点击</button>

  

 

  
1
  
2
  
3
 

12、部署

开发 npm dev
上线 npm start

  

 

  
1
  
2
 

学习视频:
VUE 服务器端渲染-NUXT 实战视频

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/106309060