py-revue

revue - Python Vue Binding

revue 期望提供一个前端 Vue 后端 Flask，快速开发标注工具 / 可视化页面的最佳实践，它可以帮助你

1. 生成一个静态页面托管在 oss 上
2. 生成一个标注工具，把比较重的任务放在后端计算

Usage

项目模板

vue 组件默认放在 python 文件同级的 components 目录下，可以通过 Vue 类的 component_folder 参数控制

目录结构参考 examples 目录下的模板

• vue 模板，编写 component 参考 vue 文档
• vue@next 模板，编写 component 参考 vue@next 文档
• react 模板，编写 component 参考 react 文档
• 使用 router 的例子
• 使用自定义 vue 插件的例子
• 一个简单的带进度条的标注工具
• 更多示例...

数据

通过 app.data 可以把用户自定义数据绑定在页面上，要求数据可以被 json 序列化，绑定数据有两种用法，例如：

1. 直接赋值提供数据

   app.data['foo'] = 'bar'
   

   前端直接通过 props 访问

2. 通过装饰器定义数据，被装饰器包裹的函数没有参数

   @app.data
   def data():
       return {}
   

   数据会被懒加载，在前端 component 中通过函数调用来访问

   this.data().then((value) => console.log(value))
   

函数调用

通过 app.method 可以用户自定义函数，要求输入输出都是可以被 json 序列化的数据，例如：

@app.method
def func(value: int) -> int:
    return value + 1

在前端 component 中通过函数调用来访问

this.$revue.func(1).then(value => console.log(value))

多页面

通过 app.route 可以用户自定义路由，要求返回一个 Page 对象，例如：

from revue import Page

@app.route('/user/<username>')
def func(username: str) -> dict:
    return Page(root='user.vue')

路由规则，参考 Flask 的定义

模块引用 & 插件系统

通过 app.use 可以使用指定插件，合法的插件包括：

1. 字符串，代表拼接到 html 页面上的一段代码，例如：'<script src="https://unpkg.com/vue-session/index.unpkg.js"></script>'
2. 可执行对象（callable），返回一个字符串，代表拼接到 html 页面上的一段代码，例如：lambda options: '<script src="https://unpkg.com/vue-session/index.unpkg.js"></script>'
3. 一个 Plugin 对象的子类，需要实现 install 方法

通过 app.use(ComponentFolder("path/to/components")) 可以额外添加一个 components 目录，可以把一些公用前端组件放在一个目录中，通过这种方式添加进来，参考 examples/addComponentFolder 添加的 components 目录可以是一个 s3 路径，但目前只支持放在 s3://pages-oss/ 下

编译 & 发布

1. revue 使用前端编译，一般情况下开发时无需安装 npm 环境，只需要安装 revue
2. app.run() 可以打开一个服务，app.publish() 可以生成静态文件并托管在 oss 上
3. app.cli() 可以提供一个包含常用操作的 CLI
4. 对于前端性能比较敏感的工具，编写好的前端组件可以通过命令行工具 revue build PACKAGE / revue release PACKAGE VERSION 预先编译好，并传到 oss 上，加快页面加载速度，但编译时需要安装 npm + webpack 环境，通常你并不需要这么做

已知问题

1. 支持 vue / vue@next / react，但三种实现不同，会有不同的已知问题
2. 引入第三方包比较麻烦，需要找 UMD 打包，并看 js 代码中模块注册到 window 的名字，也许可以通过引入 amd 或 commonjs 来解决