@umajs/plugin-vue3-ssr

@umajs/plugin-vue3-ssr

针对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

页面组件(App.vue)

<template>
    <h1>{{title}}</h1>
    <p>{{msg}}</p>
</template>

<script>
  export default {
    props:['title']
    name: 'app',
    setup(){
        return {
            msg:'hi vue3.0',
        }
    }
    },
  }
</script>

页面主入口文件(index.js)

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'});
    }
}

官网使用文档

案例

• umajs-vue3-ssr