Skip to content

基于UMajs提供vue3.0页面渲染插件,可以在`controller`和`middleware`中使用vue页面组件进行服务端渲染和客户端渲染。

License

Notifications You must be signed in to change notification settings

Umajs/plugin-vue3-ssr

Repository files navigation

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

案例

About

基于UMajs提供vue3.0页面渲染插件,可以在`controller`和`middleware`中使用vue页面组件进行服务端渲染和客户端渲染。

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published