npm 包 @design-systems/cli 使用教程

简介

@design-systems/cli 是一个用于创建设计系统的命令行工具，能够快速建立一个基本的设计系统所需的基础设施，包括组件库、样式表、文档等。

@design-systems/cli 是基于 npm 包管理器构建的，支持在多种项目中使用，比如 React、Vue、Angular 等。

本文将介绍如何安装和使用 @design-systems/cli，并提供一些示例代码。

安装

使用 npm 包管理器进行安装：

npm install -g @design-systems/cli

使用

初始化项目

安装完成后，可以使用 @design-systems/cli 快速创建一个设计系统项目：

design-systems init

初始化完成后，将会生成一个包含设计系统项目必须文件的目录，并且会为你创建一个你自己的设计系统包。

创建组件

使用 @design-systems/cli 来创建组件：

design-systems create component Button

这将创建一个名为「Button」的组件模板，并放置到默认组件目录。如果你需要指定组件模板存放目录，可以使用 --path 参数：

design-systems create component Button --path src/components

更新组件

当组件发生变化时，使用 @design-systems/cli 更新组件：

design-systems update component Button

同样，你也可以指定组件模板存放目录：

design-systems update component Button --path src/components

删除组件

当你不再需要一个组件时，使用 @design-systems/cli 删除组件：

design-systems delete component Button

同样，你也可以指定组件模板存放目录：

design-systems delete component Button --path src/components

示例代码

创建一个简单的 Button 组件

在项目目录下运行以下命令：

design-systems create component Button

这将在 src/components 目录下创建一个 Button 组件，Button 组件包含以下文件：

src/components/Button/Button.css

.Button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

src/components/Button/Button.js

import React from 'react'
import './Button.css'

const Button = ({ children, onClick }) => (
  <button className="Button" onClick={onClick}>{children}</button>
)

export default Button

src/components/Button/Button.spec.js

-- -------------------- ---- -------
------ ----- ---- -------
------ - ----- - ---- --------
------ ------ ---- ----------

----------------- ---- -- -- -
  --------- ------- ---- ------ -- --------- -- -- -
    ----- ------- - ---------
    ----- ------- - ------------- ----------------------- ------------
    ----- ------ - ----------------------
    ------------------------
    ----------------------------------
  --
--

结论

@design-systems/cli 是一个非常有价值的命令行工具，能够帮助我们快速创建设计系统所需的基础设施。在进行设计系统项目开发时，能够有效提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f40544adbf7be33b25671e0