跳到主要内容

常用 npm 资源

制作 PPT​

Slidev​

https://sli.dev/

Slidev 是一个基于 Vue.js 的幻灯片制作工具，可用于快速创建演示文稿。它支持 Markdown 语法，可自定义主题和样式，还提供代码高亮、图表等功能。

npm install -g slidev
// 创建一个名为 slides.md 的文件
---
title: 我的演示
---

# 第一页

这是第一张幻灯片

---

# 第二页

这是第二张幻灯片

运行命令：

slidev slides.md

然后打开浏览器访问默认地址即可查看演示文稿。

命令行脚本​

zx​

https://google.github.io/zx/

zx 是一个基于 Node.js 的脚本工具，可以让用户以更简洁的方式编写和运行脚本，支持直接在脚本中使用 shell 命令。

npm install -g zx
// example.js
const { $ } = await import("zx");

// 执行一个简单的 shell 命令
$`echo "Hello, zx!"`;

运行脚本：

node example.js

它会输出 “Hello, zx!”，展示了 zx 在脚本中运行 shell 命令的基本功能。

组件库开发​

Storybook​

https://storybook.js.org/

Storybook 是一个用于构建和展示 UI 组件的开发工具，支持多种框架，可帮助开发者独立开发和测试组件。

安装代码片段：

npm install @storybook/react --save-dev

配置代码片段：

// .storybook/main.js
module.exports = {
  stories: ["../src/**/*.stories.js"],
};

组件代码片段：

// src/Button.stories.js
import React from "react";
import Button from "./Button";

export default {
  title: "Button",
  component: Button,
};

export const Primary = () => <Button primary>Primary Button</Button>;

运行 Storybook：

npx storybook

访问浏览器即可查看组件故事。