- Notifications
You must be signed in to change notification settings - Fork10
A Koa view engine which renders Vue components on server.
License
NotificationsYou must be signed in to change notification settings
imingyu/koa-vue-view
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A Koa view engine which renders Vue components on server.
1.x的分支/npm包支持koa1；master分支和2.x版本的npm包支持koa2。
我熟悉书写vue的代码，感觉她的语法很简洁明了，并且支持组件化；我最近在学习使用koa编写node web应用，在koa框架中渲染视图有很多选择；但是我想在koa中使用vue来渲染视图；
我在调研了vue的ssr解决方案后，感觉她很好，但是不满足我的需求，我只是想用她的语法和组件化来实现视图渲染，渲染的数据想从koa的ctx.state中读取，也不想前后端同用同一套路由这种方式；
所以我觉得用vue的ssr的基础部分——服务端渲染vue实例，来完成我的需求，即此中间件诞生；
- 服务端渲染vue语法的视图文件
- 视图文件的语法采用vue组件的编写语法
- 支持vue的组件化
- 支持全局数据、组件等共享
注意：本中间件虽然支持vue组件的编写语法，但是仅会处理其中的
template部分，其他的如style，script等部分都会原样输出
- 不应编译视图文件中template标签中的前端用的vue代码
npm i -S koa-vue-view
<!--模板： ./views/Master.vue --><template><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>{{hight(app.name)}} - {{app.version}}</title><slotname="meta"></slot></head><body><h1>{{layoutName}} - {{layoutVersion}}</h1><slotname="top"></slot><slot></slot><slotname="bottom"></slot></body></html></template><!--组件： ./components/Age.vue --><template><strongstyle="color:red;"><slot></slot></strong></template><!--页面： ./views/User.vue --><template><Master><ul><liv-for="(item,index) in users":key="index">{{item.name}}<Age>{{ add(item.age, 1) }}</Age></li></ul></Master></template>
varpath=require('path');varKoa=require('koa');varVueView=require('koa-vue-view');varapp=newKoa();app.use(VueView({methodName:'render',//在koa ctx注册渲染视图的方法名，默认renderdata:{_:require('lodash'),app:{name:'Github',version:'1.0.0'}},methods:{add(a,b){returna+b;}},components:{Master:{path:path.resolve(__dirname,'./views/Master.vue'),data(){this.layoutVersion='1.0.0';return{layoutName:'master'}},methods:{hight(str){return`***${str}***`;}}},Age:path.resolve(__dirname,'./components/Age.vue')}}));app.use(ctx=>{ctx.state.users=[{name:'Tom',age:20},{name:'Alice',age:18}];ctx.render(path.resolve(__dirname,'./views/User.vue'));/* 或者 ctx.render({ path:path.resolve(__dirname, './views/User.vue'), data(){ return {name:'Github'} }, methods:{ show(){} } }); */})app.listen(8200);
- 在读取视图文件内容时，会将其内容分割为三部分：
header、template、footer；template截取自文件中第一对顶级template标签中的内容；header截取自文件中第一对顶级template标签的前面内容；footer截取自文件中第一对顶级template标签的后面内容；- 视图文件中仅允许包含一对顶级
template标签
- 渲染视图时仅渲染
template部分
app.use(require('koa-vue-view')(options));
可接受的options选项：
| 选项 | 类型 | 默认值 | 描述 |
| methodName | string | render | 在koa ctx注册渲染视图的方法名，默认render |
| replaceBody | boolean | true | 是否使用渲染后的字符串替换ctx.body的内容 |
| appendBody | boolean | false | replaceBody=true时，将渲染后的字符串追加到ctx.body中还是直接赋值给ctx.body |
| filterHtml | function | 可指定一个函数用于过滤render之后的html字符串，ctx.body=函数返回值=过滤后的字符串 | |
| cache | boolean | process.env.NODE_ENV === 'production' | 是否启用缓存，启用后仅在第一次加载视图时读取其内容，后续将从缓存中读取 |
| renderer | object | require('vue-server-renderer').createRenderer() | vue ssr 渲染器 |
| data | object|function | 全局共享数据对象，在所以组件和页面中都可以共享使用，如果传递的是function，则执行function的this对象指向运行的组件或者页面的vue实例 | |
| vue mixin可接受的任意选项，如：data，methods，components | 将以mixin的方式，添加到每个渲染的页面的mixins中； |
app.use(ctx=>{ctx.render(文件路径|组件配置对象).then(html=>{})})
1.x对应的是koa1适用的版本，2.x对应的是koa2对应的版本；
- 解决全局组件中引用全局组件时渲染出错的问题；
- 加入
filterHtml配置项，用于过滤渲染后的html字符串
- fix issues#1
- fix issues#1
- 核心功能实现
- 核心功能实现
About
A Koa view engine which renders Vue components on server.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
No releases published
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.