{"id":13798957,"url":"https://github.com/imingyu/koa-vue-view","last_synced_at":"2025-04-12T00:32:07.583Z","repository":{"id":131582726,"uuid":"106359949","full_name":"imingyu/koa-vue-view","owner":"imingyu","description":"A Koa view engine which renders Vue components on server.","archived":false,"fork":false,"pushed_at":"2017-12-21T10:44:47.000Z","size":40,"stargazers_count":31,"open_issues_count":2,"forks_count":10,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-26T19:49:10.607Z","etag":null,"topics":["engine","koa","koa-middleware","koa-view","koa-vue","koa-vue-view","vue-server-renderer","vue-ssr"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imingyu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-10-10T02:42:00.000Z","updated_at":"2023-07-03T02:26:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"a92b42d2-a4e6-4228-a1e5-4b62f4644d84","html_url":"https://github.com/imingyu/koa-vue-view","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imingyu%2Fkoa-vue-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imingyu%2Fkoa-vue-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imingyu%2Fkoa-vue-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imingyu%2Fkoa-vue-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imingyu","download_url":"https://codeload.github.com/imingyu/koa-vue-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223310609,"owners_count":17124245,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["engine","koa","koa-middleware","koa-view","koa-vue","koa-vue-view","vue-server-renderer","vue-ssr"],"created_at":"2024-08-04T00:00:57.142Z","updated_at":"2024-11-07T09:03:39.278Z","avatar_url":"https://github.com/imingyu.png","language":"JavaScript","funding_links":[],"categories":["仓库"],"sub_categories":["中间件"],"readme":"# koa-vue-view\n[![Build Status](https://travis-ci.org/imingyu/koa-vue-view.svg?branch=master)](https://travis-ci.org/imingyu/koa-vue-view)\n![image](https://img.shields.io/npm/l/koa-vue-view.svg)\n[![image](https://img.shields.io/npm/v/koa-vue-view.svg)](https://www.npmjs.com/package/koa-vue-view)\n[![image](https://img.shields.io/npm/dt/koa-vue-view.svg)](https://www.npmjs.com/package/koa-vue-view)\n\nA Koa view engine which renders Vue components on server.\n\n\u003e 1.x的分支/npm包支持koa1；master分支和2.x版本的npm包支持koa2。\n\n# 需求\n我熟悉书写vue的代码，感觉她的语法很简洁明了，并且支持组件化；我最近在学习使用koa编写node web应用，在koa框架中渲染视图有很多选择；但是我想在koa中使用vue来渲染视图；\n\n我在调研了vue的ssr解决方案后，感觉她很好，但是不满足我的需求，我只是想用她的语法和组件化来实现视图渲染，渲染的数据想从koa的`ctx.state`中读取，也不想前后端同用同一套路由这种方式；\n\n所以我觉得用vue的ssr的基础部分——服务端渲染vue实例，来完成我的需求，即此中间件诞生；\n\n## 本中间件包含功能：\n- 服务端渲染vue语法的视图文件\n- 视图文件的语法采用vue组件的编写语法\n- 支持vue的组件化\n- 支持全局数据、组件等共享\n\n\u003e 注意：本中间件虽然支持vue组件的编写语法，但是仅会处理其中的`template`部分，其他的如`style`，`script`等部分都会原样输出\n\n## 待添加功能：\n- 不应编译视图文件中template标签中的前端用的vue代码\n\n# 安装\n```bash\nnpm i -S koa-vue-view\n```\n\n# 使用\n```html\n\u003c!--模板： ./views/Master.vue --\u003e\n\u003ctemplate\u003e\n    \u003chtml lang=\"zh-CN\"\u003e\n\n    \u003chead\u003e\n        \u003cmeta charset=\"UTF-8\"\u003e\n        \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n        \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n        \u003ctitle\u003e{{hight(app.name)}} - {{app.version}}\u003c/title\u003e\n        \u003cslot name=\"meta\"\u003e\u003c/slot\u003e\n    \u003c/head\u003e\n\n    \u003cbody\u003e\n        \u003ch1\u003e{{layoutName}} - {{layoutVersion}}\u003c/h1\u003e\n        \u003cslot name=\"top\"\u003e\u003c/slot\u003e\n        \u003cslot\u003e\u003c/slot\u003e\n        \u003cslot name=\"bottom\"\u003e\u003c/slot\u003e\n    \u003c/body\u003e\n\n    \u003c/html\u003e\n\u003c/template\u003e\n\n\u003c!--组件： ./components/Age.vue --\u003e\n\u003ctemplate\u003e\n    \u003cstrong style=\"color:red;\"\u003e\n        \u003cslot\u003e\u003c/slot\u003e\n    \u003c/strong\u003e\n\u003c/template\u003e\n\n\n\u003c!--页面： ./views/User.vue --\u003e\n\u003ctemplate\u003e\n    \u003cMaster\u003e\n        \u003cul\u003e\n            \u003cli v-for=\"(item,index) in users\" :key=\"index\"\u003e{{item.name}} \u003cAge\u003e{{ add(item.age, 1) }}\u003c/Age\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/Master\u003e\n\u003c/template\u003e\n```\n\n```javascript\nvar path = require('path');\nvar Koa = require('koa');\nvar VueView = require('koa-vue-view');\n\nvar app = new Koa();\napp.use(VueView({\n    methodName: 'render',//在koa ctx注册渲染视图的方法名，默认render\n    data: {\n        _: require('lodash'),\n        app: {\n            name: 'Github',\n            version: '1.0.0'\n        }\n    },\n    methods: {\n        add(a, b) {\n            return a + b;\n        }\n    },\n    components: {\n        Master: {\n            path: path.resolve(__dirname, './views/Master.vue'),\n            data() {\n                this.layoutVersion = '1.0.0';\n                return {\n                    layoutName: 'master'\n                }\n            },\n            methods: {\n                hight(str) {\n                    return `***${str}***`;\n                }\n            }\n        },\n        Age: path.resolve(__dirname, './components/Age.vue')\n    }\n}));\n\napp.use(ctx =\u003e {\n    ctx.state.users = [{\n        name: 'Tom',\n        age: 20\n    }, {\n        name: 'Alice',\n        age: 18\n    }];\n    ctx.render(path.resolve(__dirname, './views/User.vue'));\n    /*\n    或者\n    ctx.render({\n        path:path.resolve(__dirname, './views/User.vue'),\n        data(){\n            return {name:'Github'}\n        },\n        methods:{\n            show(){}\n        }\n    });\n    */\n})\n\n\napp.listen(8200);\n```\n\n# 规约\n- 在读取视图文件内容时，会将其内容分割为三部分：`header`、`template`、`footer`；\n    - `template`截取自文件中第一对顶级`template`标签中的内容；\n    - `header`截取自文件中第一对顶级`template`标签的前面内容；\n    - `footer`截取自文件中第一对顶级`template`标签的后面内容；\n    - **视图文件中仅允许包含一对顶级`template`标签**\n- **渲染视图时仅渲染`template`部分**\n\n# Options\n```javascript\napp.use(require('koa-vue-view')(options));\n```\n可接受的options选项：\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003ctd\u003e选项\u003c/td\u003e\n            \u003ctd\u003e类型\u003c/td\u003e\n            \u003ctd\u003e默认值\u003c/td\u003e\n            \u003ctd\u003e描述\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003emethodName\u003c/td\u003e\n            \u003ctd\u003estring\u003c/td\u003e\n            \u003ctd\u003erender\u003c/td\u003e\n            \u003ctd\u003e在koa ctx注册渲染视图的方法名，默认render\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ereplaceBody\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003etrue\u003c/td\u003e\n            \u003ctd\u003e是否使用渲染后的字符串替换ctx.body的内容\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eappendBody\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003efalse\u003c/td\u003e\n            \u003ctd\u003ereplaceBody=true时，将渲染后的字符串追加到ctx.body中还是直接赋值给ctx.body\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003efilterHtml\u003c/td\u003e\n            \u003ctd\u003efunction\u003c/td\u003e\n            \u003ctd\u003e\u003c/td\u003e\n            \u003ctd\u003e可指定一个函数用于过滤render之后的html字符串，ctx.body=函数返回值=过滤后的字符串\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ecache\u003c/td\u003e\n            \u003ctd\u003eboolean\u003c/td\u003e\n            \u003ctd\u003eprocess.env.NODE_ENV === 'production'\u003c/td\u003e\n            \u003ctd\u003e是否启用缓存，启用后仅在第一次加载视图时读取其内容，后续将从缓存中读取\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003erenderer\u003c/td\u003e\n            \u003ctd\u003eobject\u003c/td\u003e\n            \u003ctd\u003erequire('vue-server-renderer').createRenderer()\u003c/td\u003e\n            \u003ctd\u003evue ssr 渲染器\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003edata\u003c/td\u003e\n            \u003ctd\u003eobject|function\u003c/td\u003e\n            \u003ctd\u003e\u003c/td\u003e\n            \u003ctd\u003e全局共享数据对象，在所以组件和页面中都可以共享使用，如果传递的是function，则执行function的this对象指向运行的组件或者页面的vue实例\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003evue mixin可接受的任意选项，如：data，methods，components\u003c/td\u003e\n            \u003ctd\u003e\u003c/td\u003e\n            \u003ctd\u003e\u003c/td\u003e\n            \u003ctd\u003e\n            将以mixin的方式，添加到每个渲染的页面的mixins中；\n            \u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n# Render\n```javascript\napp.use(ctx =\u003e {\n    ctx.render(文件路径|组件配置对象).then(html=\u003e{})\n})\n```\n\n# 更新日志\n\u003e 1.x对应的是koa1适用的版本，2.x对应的是koa2对应的版本；\n\n## 2.1.6  |  1.1.6\n- 解决全局组件中引用全局组件时渲染出错的问题；\n- 加入`filterHtml`配置项，用于过滤渲染后的html字符串\n\n## 2.1.5\n- fix issues[#1](https://github.com/imingyu/koa-vue-view/issues/1)\n\n## 1.1.2\n- fix issues[#1](https://github.com/imingyu/koa-vue-view/issues/1)\n\n## 2.1.3\n- 核心功能实现\n\n## 1.1.1\n- 核心功能实现\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimingyu%2Fkoa-vue-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimingyu%2Fkoa-vue-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimingyu%2Fkoa-vue-view/lists"}