Skip to main content
Version: 2.x

开始入门

准备​

开始前，我们需要准备本地开发环境。

  1. NodeJS (>=12)
  2. Yarn (1.x)，安装方式：执行 npm install -g yarn
  3. Lerna，安装方式：执行 npm install -g lerna

提示

Windows 环境下需要将 yarn global bin 命令输出的目录添加到 Path 环境变量。操作方式参考 https://jingyan.baidu.com/article/8ebacdf02d3c2949f65cd5d0.html

创建一个新的 Git 仓库​

对于客户私有定制的构件及小产品（通常由项目研发、交付团队等负责）应按客户或团队新建 Git 仓库，为此我们提供了两种快速生成 Brick Next 仓库的工具。

使用 GitHub Template Repository​

如果你打算将你的新仓库直接托管在 GitHub 上，我们提供了一个模板仓库 https://github.com/easyops-cn/next-template-repo，只需点击界面上的 Use this template 即可初始化一个新的 Brick Next 仓库。

初始化后，你需要按照 README.md 的提示一次性批量修改部分文件中的仓库名等内容。

使用 Create-Next-Repo​

如果你打算将你的新仓库托管在内网（例如自己搭建的 GitLab），我们提供了一个 CLI 工具 @next-core/create-next-repo 来一键生成 Brick Next 仓库。

请执行如下命令创建一个新的仓库：

# 创建 Brick Next 仓库，my-repo 为新仓库的名称
npx @next-core/create-next-repo@latest my-repo
# 如果 npx 提示 `OK to proceed? (y)` 请输入 y 或直接点击回车键
cd my-repo
yarn

提示

由于该工具将从 GitHub 下载样板仓库，因此可能需要你先开启上网代理。

创建一个新的微应用​

  1. 运行 yarn yo
  2. 选择 a new package of micro-apps
  3. 输入小产品的 ID，例如 hello-world

一个新的微应用就已经建好。接下来定义它的 storyboard.json。

提示

新建的微应用在目录 ./micro-apps/* 下，* 为小产品的 ID，如 hello-world。

{
  "routes": [
    {
      "path": "/hello-world",
      "bricks": [
        {
          "brick": "div",
          "properties": {
            "textContent": "Hello world",
            "style": {
              "padding": "32px"
            }
          }
        }
      ]
    }
  ]
}

提示

记得吗？我们的构件就是包括 Custom Element 在内的标准的 HTMLElement，由于我们还没有创建自定义构件，这里我们可以直接使用原生 HTML 元素。

我们定义了一个路由信息，它：

  • 匹配 URL 路径 /hello-world。
  • 渲染的构件为 div。
  • 为构件设置了几项属性：textContent 和 style。

在项目一级目录执行 yarn serve --auto-remote --server YOUR-EASYOPS-SERVER-ADDRESS

提示

YOUR-EASYOPS-SERVER-ADDRESS 为安装了 easyops 平台的机器的域名或 ip ，如果是集群部署，则为部署了 api-gateway 的那台机器的 ip

这个命令表示你直接使用 easyops 平台已安装的所有 micro-apps 和 bricks，除了 hello-world

--auto-remote 会自动识别本地的 micro-app 或 brick，也可以手动指定 --remote --local-micro-apps=hello-world

在浏览器中输入 http://localhost:8081/hello-world 去看看效果吧。

我们再试一下修改 Storyboard 的配置，将 brick 的值设置为 button，将 padding 更名为 margin，保存后浏览器就会自动刷新并按新的配置显示。

提示

在开发环境中，对 storyboard.json 的修改将触发浏览器刷新，新的配置将立即生效。

试着从构件库找一个内置构件看看效果。

{
  "routes": [
    {
      "path": "/hello-world",
      "bricks": [
        {
          "brick": "div",
          "properties": {
            "textContent": "Hello world",
            "style": {
              "padding": "32px"
            }
          }
        },
        {
          "template": "cmdb-instances.instance-list",
          "params": {
            "objectId": "HOST"
          }
        }
      ]
    }
  ]
}

没错，你会发现基于优维平台去定制化自己所需页面是如此简单。下来将以一个经典例子来讲解编排相关的配置，如路由、菜单、参数等。点击进入编排详解。

更新 next-repo 的框架代码​

next-repo 我们一直在不断的更新，以提供更好更方便的框架能力，在 Brick-Next 相关仓库中执行 yarn renew 即可自动更新框架相关依赖（并可能自动执行一些代码修订操作）。