针对Umajs提供vue服务端渲染模式的插件,插件基于服务端渲染骨架工具Srejs开发。
plugin-vue-ssr
插件扩展了Umajs
中提供的统一返回处理Result
对象,新增了vue
页面组件渲染方法,可在controller
自由调用,使用类似传统模板引擎;也同时将方法挂载到了koa中间件中的ctx
对象上;当一些公关的页面组件,比如404、异常提示页面、登录或者需要在中间件中拦截跳转时可以在middleware
中调用。
yarn add @umajs/plugin-vue-ssr --save
// plugin.config.ts
export default <{ [key: string]: TPluginConfig }>{
vue: {
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>
<!--vue2.0版本APP.vue必须要设置根元素-->
<div id ='app'>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
'msg' : 'hi vue ssr!'
}
},
}
</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'});
}
}