Dumi 静态站点生成器使用教程

Dumi 静态站点生成器使用教程

dumi Static Site Generator for component library development 项目地址: https://gitcode.com/gh_mirrors/du/dumi

1. 项目目录结构及介绍

Dumi 项目的目录结构如下：

• .dumi: Dumi 的配置文件夹，存放着 Dumi 的配置文件。
• .github: 存放与 GitHub 相关的配置文件，如 Actions 工作流文件。
• .husky: 存放 husky 相关的配置文件，用于在提交代码前执行预提交钩子。
• assets-types: 资源类型目录，可能包含不同类型的资源文件。
• bin: 可执行脚本目录。
• compiled: 编译后的文件目录。
• crates/: 存放 Rust 相关的项目文件。
• docs: 文档目录，存放 MarkDown 文件等。
• examples: 示例项目或代码目录。
• scripts: 脚本目录，存放构建、部署等脚本文件。
• src: 源代码目录，存放项目的主要代码。
• suites: 套件目录，可能包含测试套件。
• tests: 测试目录，存放单元测试和集成测试代码。
• dumirc.ts: Dumi 的配置文件，用于定义 Dumi 的行为。
• .editorconfig: 编辑器配置文件，用于统一不同开发者编辑器的设置。
• .eslintrc.js: ESLint 配置文件，用于定义代码质量规则。
• .fatherrc.ts: Father 项目的配置文件，如果项目中使用了 Father。
• .gitignore: Git 忽略文件，用于定义不需要提交到 Git 的文件和目录。
• .npmrc: npm 配置文件，用于定义 npm 的行为。
• .prettierrc.js: Prettier 配置文件，用于定义代码格式化规则。
• .stylelintrc: Stylelint 配置文件，用于定义 CSS/SCSS 格式化规则。
• Cargo.lock 和 Cargo.toml: Rust 项目的依赖和配置文件。
• CONTRIBUTING.md: 贡献指南文件，指导如何为项目贡献代码。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文件。
• index.d.ts: 类型定义文件。
• mako.config.json: Mako 配置文件，如果项目中使用了 Mako。
• package.json: npm 包配置文件，定义了项目的依赖和脚本。
• plugin-utils.d.ts 和 plugin-utils.js: 插件工具的类型定义和 JavaScript 文件。
• pnpm-lock.yaml 和 pnpm-workspace.yaml: Pnpm 锁和 workspace 配置文件。
• rust-toolchain: Rust 工具链配置文件。
• rustfmt.toml: Rust 格式化工具配置文件。
• tech-stack-utils.d.ts 和 tech-stack-utils.js: 技术栈工具的类型定义和 JavaScript 文件。
• tsconfig.json: TypeScript 配置文件。
• vitest.config.ts: Vitest 测试框架的配置文件。

2. 项目的启动文件介绍

Dumi 项目的启动通常是通过 package.json 中的脚本实现的。以下是一些常见的启动脚本：

• start: 用于启动本地开发服务器。
• build: 用于构建生产环境的静态站点文件。
• serve: 用于本地预览构建后的静态站点。

例如，启动本地开发服务器的命令可能如下：

npm start
# 或者
yarn start

这会启动一个本地服务器，通常可以通过浏览器访问 http://localhost:8000 来查看项目。

3. 项目的配置文件介绍

项目的核心配置文件是 .dumi/dumirc.ts，以下是该文件的一些基本配置选项：

• siteTitle: 网站标题。
• base: 网站的根路径。
• publicPath: 输出文件的公共路径。
• menus: 自定义菜单配置。
• navs: 自定义顶部导航配置。
• links: 在页头添加额外的链接。
• analyze: 是否启用分析工具。
• exportStatic: 是否导出为静态站点。

例如，一个简单的配置文件可能如下所示：

export default {
  siteTitle: '我的组件库文档',
  base: '/',
  publicPath: '/',
  // 更多配置...
};

以上就是 Dumi 静态站点生成器的基本使用教程。通过以上介绍，你可以开始搭建自己的组件库文档站点了。

dumi Static Site Generator for component library development 项目地址: https://gitcode.com/gh_mirrors/du/dumi