页面开发

新增页面

新增页面开发，可以通过 next add 命令添加：

next add page

模板语法

根据提示填写页面的基本信息：

• name：物料名称（命名规范为大驼峰式）
• title：物料标题，用于填充示例代码
• version：物料版本，默认 1.0.0
• description：物料描述
• category：物料分类，用于快速索引

填写完成之后，在 pages/ 目录下生成新的页面目录。

目录结构

├── blocks
└── pages
    └── example
        ├── config
        │   ├── mock.js                   # 模拟数据
        │   └── settings.json             # 页面配置
        ├── src                           # 模板源码
        │   └── main.js
        ├── build.json
        └── package.json

• mock.js 基于 JSON Schema 的页面模拟数据，可用于开发调试。
• settings.json：基于 JSON Schema 的页面模板，这些描述将转化为可视化表格，以供物料使用者进行配置；

开发调试

根据提示进入页面文件夹，安装依赖并开始开发：

cd blocks/HomePage
npm install
npm start

页面的主要代码在 src/ 目录下，src 是页面源码目录，所有源码都在这个目录下完成。

页面模板变量的设置在 config/ 目录下，最终用于生成供业务开发者使用的配置化表单。

构建发布

每个物料开发完成后，都需要先发布到 npm 才能使用。我们在当前路径执行 npm publish 发布 HomePage 页面：

npm publish

执行 publish 命令的时会自动执行 npm run build 和 npm run screenshot 脚本。build 命令执行页面的构建任务，而 screenshot 命令会生成页面截图，截图被用于物料中心展示。当然，你也可以手动截取图片作为页面预览，只需要截图以 screenshot.png 保存在当前目录即可。