Py-revue NPM | npm.io

revue - Python Vue Binding

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

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

Usage

项目模板

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

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

数据

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

直接赋值提供数据
```
app.data['foo'] = 'bar'
```
前端直接通过 props 访问
通过装饰器定义数据，被装饰器包裹的函数没有参数
```
@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 可以使用指定插件，合法的插件包括：

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

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

编译 & 发布

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