针对UMajs提供vue3.0服务端渲染模式的插件，插件基于服务端渲染骨架工具@Srejs/vue3开发。
plugin-vue3-ssr插件扩展了UMajs中提供的统一返回处理Result对象，新增了vue页面组件渲染方法，可在controller自由调用,使用类似传统模板引擎；也同时将方法挂载到了koa中间件中的ctx对象上；当一些公关的页面组件，比如404、异常提示页面、登录或者需要在中间件中拦截跳转时可以在middleware中调用。
yarn add @umajs/plugin-vue3-ssr --save // plugin.config.ts
export default <{ [key: string]: TPluginConfig }>{
'vue3-ssr': {
enable:true,
options:{
rootDir:'web', // 客户端页面组件根文件夹
rootNode:'app', // 客户端页面挂载根元素ID
ssr: true, // 全局开启服务端渲染
cache: false, // 全局使用服务端渲染缓存 开发环境设置true无效
prefixCDN: '/' // 客户端代码部署CDN前缀
}
}
};框架默认配置属性rootDir默认为根目录下web，pages下是页面组件入口，比如list页面，vue主入口文件为list/index.js，页面组件为list/App.vue
└── web
└── pages
└── list
├── App.vue
├── index.js<template>
<h1>{{title}}</h1>
<p>{{msg}}</p>
</template>
<script>
export default {
props:['title']
name: 'app',
setup(){
return {
msg:'hi vue3.0',
}
}
},
}
</script>import App from './App.vue';
export default {
App, // 必须导出App
Router, //如使用vue-router 导出路由配置对象
Store, //如使用vuex 导出store对象
};Pages下按照文件夹名称定义vue页面组件，每一个页面组件必须包含inde.js主入口文件,文件必须导出组件App。如果使用vue-router,则将路由配置导出为Router对象；当使用vuex时，则将初始化配置导出为Store。
import { BaseController, Path } from '@umajs/core';
import { Result } from '../plugins/vue-ssr';
export default class Index extends BaseController {
@Path('/')
index() {
return Result.vue('index', { title: 'umajs-vue-ssr'});
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent