跳到主要内容

安装

Brick Next 被设计为可以逐步采用。您可以根据需要，尽可能少或尽可能多地使用 Brick Next 渲染用户界面。无论您是想体验 Brick Next，还是想在 HTML 页面中添加一些低代码能力，或者是启动一个复杂的基于 Brick Next 的应用，本节都将帮助您入门。

试用 Brick Next​

您不需要安装任何东西就可以试用 Brick Next。试试编辑下面的示例！

您可以直接编辑它，或者 Fork 一个 StackBlitz 上的项目。

在本地试用 Brick Next​

如果您想在本地计算机上试用 Brick Next：

  1. 安装 Node.js
  2. 打开 StackBlitz 上的入门项目，在 Project 面板上，找到下载按钮并点击它，下载项目文件到本地
  3. 解压下载的文件，然后打开一个终端，cd 到解压后的目录
  4. 使用 npm install 安装依赖
  5. 执行 npm start 启动本地服务器，按照提示在浏览器中查看代码运行效果

开始新的 Brick Next 项目​

如果您想开始一个新的 Brick Next 项目，您可以参考上面的步骤，但是下载这个项目。

这将激活 Brick Next 的完整功能，例如多应用和路由。

添加 Brick Next 到已有的项目​

如果您希望在已有的项目中添加一些低代码能力，您不需要将其重写为 Brick Next。只需将 Brick Next 添加到您的现有技术栈中，然后以低代码的形式在任何地方渲染由构件组成的 storyboards。

# First install the main packages
npm install --save @next-core/runtime @next-core/webpack

# Then install the brick packages you want to use
npm install --save @next-bricks/shoelace
npm install --save @next-bricks/basic @next-bricks/icons
webpack.config.js
const { RuntimePlugin } = require('@next-core/webpack');

module.exports = {
  // ...
  plugins: [
    new RuntimePlugin({
      brickPackages: [
        '@next-bricks/icons',
        '@next-bricks/basic',
        '@next-bricks/shoelace',
      ],
    }),
  ]
};
index.js
import('./bootstrap.js');
bootstrap.js
import { unstable_createRoot } from '@next-core/runtime';

const container = document.querySelector('#app');
const root = unstable_createRoot(container);

root.render(storyboard, {
  context,
});

浏览器支持​

Brick Next 构建的 Web 组件可在所有广泛使用的桌面和移动浏览器中原生运行。Custom Elements在 Chrome、Edge、Firefox 和 Safari中原生支持！

Brick Next 支持以下浏览器:

Brick Next VersionEdgeChromeFirefoxSafariInternet ExplorerPre-Chromium Edge
V3v90+v90+v88+v15+❌❌