# 使用物料

# 官方物料

AppWorks 默认提供丰富的 React 和 Rax 官方物料,以进一步提高开发效率。物料主要包括区块、模板、组件三种类型,更多关于物料的介绍可参考《关于物料》 (opens new window)

官方物料

# 使用模板创建项目

详细可查看《创建项目》

# 使用区块组装页面

  1. 点击左侧活动栏中的『AppWorks 插件图标』
  2. 找到『页面列表』视窗,点击『使用区块组装页面』
  3. 在右侧页面中根据引导完成页面的创建

创建页面

# 添加物料至源码中

  1. 打开一个 JSX 文件
  2. 在编辑器中点击右键,选择『Appworks: 添加组件』
  3. 在右侧的面板中点击对应的区块添加到源码中

添加物料

# 下载区块到本地

  1. 点击左侧活动栏中的『Appworks 插件图标』
  2. 找到『组件列表』视窗,点击『下载区块到本地』
  3. 在右侧页面中根据引导完成区块的下载

下载区块到本地

# 查找组件文档

  1. 打开一个 JSX 文件,在编辑器右上方点击『Appworks: 查找当前文件的组件』图标
  2. 搜索您需要查找文档的组件名
  3. 点击组件名后,选择打开组件文档的方式(仅一次)
  4. 浏览文档

您可以选择是否在 VS Code 浏览文档网页,这一功能依赖 Browser Preview (opens new window) 插件进行实现。 如果您希望在 VS Code 内部浏览文档,请先安装此插件。

查找组件文档

# 自定义物料源

如果需要了解如何定制物料源,可以参考《物料开发》 (opens new window)

# 接入

AppWorks 支持接入自定义物料源,以便在项目开发中更好地使用定制物料。接入方式:

  1. 点击 VS Code 编辑器左侧活动栏『Appworks 图标』,找到 WELCOME 视窗并点击『设置』按钮
  2. 点击『添加』按钮,输入物料源名称和物料源地址
  3. 点击『确定』按钮,完成自定义物料源的接入

接入自定义物料

# 使用

添加自定义物料源成功后,我们可以在创建应用、创建页面、编写页面组件时使用自定义物料,使用方式同上。

使用自定义物料