Quick Start

通过示例快速上手使用

使用代码生成工具生成的代码。提供了通过终端命令和 VsCode 集成两种使用方式。

Install

# global install
yarn global add @aoviz/cli

# project or product directory
yarn add @aoviz/code-gen

Concept

代码生成依据模板文件和元数据组合生成代码，一个模版可以对应多个组合元数组，根据所需生成的页面选择适合自己的元数据。在项目或产品目录新增 .aoviz-tmp 目录，用来放置和之相关的模版文件内容。模版文件的目录结构如下：

--- .aoviz-tmp
    --- list
        --- index.js
        --- metadata
            --- example.json
            --- complexity.json
    --- detail
        --- index.js
        --- metadata
            --- example.json
            --- complexity.json
    --- modal
        --- index.js
        --- metadata
            --- example.json
            --- complexity.json

模板文件的定义如下：

const { Template } = require('@aoviz/code-gen');
module.exports = [
  {
    template: Template`
      function Aoviz() {
        return 'aoviz'
      }
    `,
  }
]

元数据的定义为 .json 文件，与选中的模版进行组合生成代码。

查看更多配置

Generation

通过终端生成

选用终端生成时执行以下命令：

aoviz code-gen file-name -t list -m example

默认将文件生成在当前执行命令的目录下，也可以通过 -o 参数指定生成的目录。-t 与 -m 参数分别指定模版和元数据，如果不指定终端会弹出选择交互功能，通过终端交互选择所需配置。

建议在每个模块的 pages 目录下生成。

通过 VsCode 生成

在 VsCode 中安装 Create tempalte file for datagrand 插件，通过右键菜单选择目录，选择模版和元数据，输入文件名称，即可生成代码。