VUE 服务器端渲染-NUXT
笔记参考
https://zh.nuxtjs.org/
- 服务器端渲染 利于 SEO
- 客户端渲染
vue-server-renderer
https://ssr.vuejs.org/zh/guide/
安装环境
npm install vue vue-server-renderer --save
1、渲染示例
const Vue = require("vue");
const VueServerRenderer = require("vue-server-renderer");
// 第 1 步：创建一个 Vue 实例
const app = new Vue({
template: `Hello {{name}}`,
data() {
return {
name: "Tom",
};
},
});
// 第 2 步：创建一个 renderer
const renderer = VueServerRenderer.createRenderer();
// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app).then((html) => {
console.log(html);
});
// Hello Tom
2、与服务端结合
npm install express --save
const Vue = require("vue");
const VueServerRenderer = require("vue-server-renderer");
const express = require("express");
// vue实例
const app = new Vue({
template: `Hello {{name}}`,
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);
官方 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
如果速度慢，可以配置国内源
vim ~/.bash_profile
alias cnpx='NPM_CONFIG_REGISTRY=https://registry.npm.taobao.org/ npx'
2、目录结构
静态资源 assets 会被编译 scss等
组件 components
布局组件 layouts
中间件 middleware
页面路由 pages
插件目录 plugins 根vue.js应用 实例化之前运行
静态文件 static 不会被编译处理
应用的Vuex 状态树 store
个性化配置 nuxt.config.js
脚本接口 package.json
别名
~ 或 @ srcDir
~~ 或 @@ rootDir
assets 或者 static 使用~
3、配置
css
npm install node-sass sass-loader --save-dev
4、路由
<nuxt-link to="/">nuxt-link>
pages 目录下会自动生成
(1)基础路由
pages/detail
=>
/detail
(2)动态路由
pages/detail/_id.vue
=>
/detail/007
$route.params.id == 007
(3)嵌套路由
pages/users.vue
pages/users/index.vue
(4)过渡动效
assets/css/main.scss
.page-enter-active,
.page-leave-active {
transition: opacity 0.5s;
}
.page-enter,
.page-leave-active {
opacity: 0;
}
nuxt.config.js：
module.exports = {
css: ["assets/css/main.scss"],
};
5、中间件 middleware
6、模板
app.html 不建议直接修改
布局 layouts
7、异步数据
asyncData 页面加载之前
static/data/user.json
{
"name": "Tom",
"age": 23
}
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>
8、资源文件
assets 会被打包
static 不会被打包
<img src="/my-image.png" />
<img src="~/assets/my-image-2.png" />
9、插件
plugins/vue-notifications.js：
import Vue from "vue";
import VueNotifications from "vue-notifications";
Vue.use(VueNotifications);
配置 plugins 如下：
module.exports = {
plugins: ["@/plugins/vue-notifications"],
};
10、注入
(1)注入 Vue 实例
plugins/vue-inject.js:
import Vue from "vue";
Vue.prototype.$debug = (msg) => console.log(msg);
nuxt.config.js:
export default {
plugins: ["~/plugins/vue-inject.js"],
};
(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);
};
nuxt.config.js:
export default {
plugins: ["~/plugins/ctx-inject.js"],
};
(3)同时注入
会自动添加前缀$
export default ({ app }, inject) => {
inject("debug", (msg) => console.log(msg));
);
};
nuxt.config.js:
export default {
plugins: ["~/plugins/combined-inject.js"],
};
11、状态树
fetch 方法会在渲染页面前被调用，作用是填充状态树 (store) 数据
与 asyncData 方法类似，不同的是它不会设置组件的数据。
nuxtServerInit：服务端数据传给客户端的状态树
store/index.js
export const state = () => ({
counter: 0,
});
export const mutations = {
increment(state) {
state.counter++;
},
};
pages/index.vue
<p>{{$store.state.counter}}p>
<button @click="$store.commit('increment')">点击button>
12、部署
开发 npm dev
上线 npm start
学习视频:
VUE 服务器端渲染-NUXT 实战视频