1.创建node服务器
2.引入 vue和vueSererRender 构造函数
3.创建vue实例
4.创建渲染器 render实例,传入template.html(html里需要有vue-ssr-outlet占位符)
5.根据router执行对应的render函数,将转成的字符串传入模板
```js
const Koa = require('koa')
const fs = require('fs')
const Router = require('koa-router')
const Static = require('koa-static')
const app = new Koa()
const router = new Router()
const Vue = require('vue')
const VueSererRender = require('vue-server-renderer')
// 创建 vue实例
const vm = new Vue({
data() {
return {
msg: 'hello ssr'
}
},
template: `<div>{{msg}}</div>`
})
// 创建一个渲染器
const template = fs.readFileSync('./template.html', 'utf-8')
let render = VueSererRender.createRenderer({
template
})
router.get('/', async ctx => {
ctx.body = await render.renderToString(vm) // 转成字符串
})
app.use(router.routes())
app.listen(3000)
```
- 0. MVC和MVVM
- 1. v-model无法实时更新的解决办法
- 1. Vue 指令
- 1. v-cloak&v-text&v-html
- 2. v-bind
- 3. v-model
- 7. v-for指令的几种使用方式
- 8. v-if和v-show的使用
- 2. 事件修饰符
- 3. 通过属性设置样式
- 1. 通过属性绑定设置元素class
- 2. 通过属性绑定设置元素style
- 4. 自定义指令
- 11. 自定义全局指令
- 12. 自定义私有指令
- 5. 过滤器
- 6. 键盘指令
- 7. 生命周期
- 8. vue-resource
- 9. 动画
- 1. 使用过渡类名实现动画
- 2. 使用animate.css实现动画
- 3. 钩子函数实现小球半场动画
- 10. 组件
- 1. 全局组件的创建方式
- 2. 私有组件的创建方式
- 3. 组件中的data和methods
- 4. component元素
- 5. 组件配合transition元素实现动画
- 6. 父组件传参传方法
- 11. 路由
- 1. 什么是路由
- 2. vue-router的使用
- 3. 使用router-link&query方式传递参数
- 4. 使用param传值
- 5. 使用children属性实现路由嵌套
- 6. router-view之间获取父级data
- 7. 实现路由跳转的几种方式
- 12. 设置缓存
- 13. $ref 操作DOM&获取自定义属性
- 14. 初始化一个项目
- 15. 使用并封装一个axios方法
- 17. vuex
- 18. watch 监听 data数据
- 19. keep alive 缓存路由组件
- vue效果实现
- 1. 实现顶部根据滑动渐隐渐现
- 2. 制作一个动画包裹组件
- 20. vue 中的数据类操作
- 第三方工具&ui
- 1. vant-ui
- 1. 上拉加载更多
- 2. 使用图片预加载
- 2. better-scroll
- 1. 实现上下滑动效果
- 2. 实现两栏式点击滑动跳转
- vue3
- compositionApi
- 2. ref 和 reactive
- 4. watch
- 5. watchEffect
- 7.使用ref操作dom
- effect副作用
- 1. 新特性
- 3. 生命周期
- 6.定义props
- 实现自定义组件v-model
- vue面试题
- 1.对mvvm的理解
- 2.vue2和vue3响应式数据的理解
- 3.vue中如何检测数组的变化
- 4.vue中如何进行依赖收集
- 5.如何理解vue中的模板编译原理
- 6.vue生命周期以及原理
- 7.vue组件data为什么必须是个函数
- 8.vue-router原理
- 9.vue.mixin原理
- 10.$nextTick原理
- 11.computed和watch的区别
- vue SSR服务端渲染
- 1.什么是服务端渲染
- 2.快速创建服务端渲染