Skip to main content

Create the First Component Library

Preparations​

  1. Have a Tencent Cloud account;
  2. Activate Low-code Cloud Development
  3. Install Node.js
  4. Install Cloudbase CLI
Note

If npm install -g @cloudbase/cli fails, you may need to follow this document to install npm in a non-system administrator directory or modify the default npm directory.

Step 1: Create a Cloud Component Library

In the WeDa console - Applications menu, open the editor of any application, locate the Component Library Management module, and create the component library mydemo.

Step 2: Associate the local component library​

tcb lowcode create mydemo
Tip

The identifier mydemo used for creating the local component library must match the cloud one to associate with the cloud component library.

Or use the command tcb lowcode create to complete the association via intelligent prompts.

Step 3: Debug the local component library​

cd mydemo
tcb lowcode debug

After executing the above command, enter the page editor, click on the ··· in the top-left corner, enable the Custom Component Development mode to preview local components.

?Note: If the cli version is below 2.2.11, it is recommended to upgrade to 2.2.11; otherwise, the debug mode will open the old version of the editor.

You can debug on this page:

  • Drag the component to the editing area and view the effect.
  • Configure properties in the component's Properties panel and view the effect.
  • Configure styles in the component's Styles panel and view the effect.

Step 4: Publish the local component library​

tcb lowcode publish
Tip

Publishing the local component library is equivalent to updating the draft version of the cloud component library. You still need to publish the draft as a formal version in the console.

Step 5: Publish the Cloud Component Library​

Open the component details page of the mydemo component library and publish it.

After the component library is published, exit the custom development mode in the editor to preview the actual effect.

Step 6: Use the Custom Component Library in Applications​

The usage method is similar to Step 3: Debug the local component library, but this is the application editor in Normal Mode. After editing the application, it can be published normally.

Upgrade Announcement: Custom Components Cli Upgrade Reminder​

Starting from August 111, 2023, cli tools above 2.2.111 will no longer be maintained. Please execute the following command to upgrade:

Execute the following command to upgrade your cli tool.

npm install -g @cloudbase/cli