Fractal 开源项目使用教程

Fractal 开源项目使用教程

fractalA tool to help you build and document website component libraries and design systems.项目地址:https://gitcode.com/gh_mirrors/fra/fractal

1. 项目的目录结构及介绍

Fractal 项目的目录结构清晰，便于管理和扩展。以下是主要的目录和文件介绍：

fractal/
├── docs/
│   ├── guides/
│   ├── api/
│   └── index.md
├── src/
│   ├── components/
│   ├── layouts/
│   └── assets/
├── tests/
│   ├── unit/
│   └── integration/
├── .gitignore
├── .editorconfig
├── .eslintrc.json
├── fractal.config.js
├── package.json
└── README.md

• docs/: 包含项目的文档，分为用户指南和API文档。
• src/: 包含项目的源代码，包括组件、布局和静态资源。
• tests/: 包含单元测试和集成测试。
• .gitignore: 指定Git版本控制系统忽略的文件和目录。
• .editorconfig: 配置编辑器代码风格。
• .eslintrc.json: 配置ESLint代码检查规则。
• fractal.config.js: 项目的配置文件。
• package.json: 项目的依赖管理文件。
• README.md: 项目的基本介绍和使用说明。

2. 项目的启动文件介绍

Fractal 项目的启动文件主要是 fractal.config.js。这个文件负责配置项目的各种设置，包括组件路径、静态资源路径、模板引擎等。以下是一个基本的 fractal.config.js 示例：

const fractal = require('@frctl/fractal').create();

fractal.set('project.title', 'My Fractal Project');
fractal.set('project.version', '1.0.0');

fractal.components.set('path', __dirname + '/src/components');
fractal.docs.set('path', __dirname + '/docs');

fractal.web.set('builder.dest', __dirname + '/build');

module.exports = fractal;

• project.title: 设置项目的标题。
• project.version: 设置项目的版本号。
• components.path: 设置组件的路径。
• docs.path: 设置文档的路径。
• web.builder.dest: 设置构建输出的目标路径。

3. 项目的配置文件介绍

Fractal 项目的配置文件 fractal.config.js 是项目的核心配置文件。以下是一些常见的配置项：

• project.title: 项目的标题，显示在Fractal的界面中。
• project.version: 项目的版本号。
• components.path: 组件的路径，指定Fractal从哪里加载组件。
• docs.path: 文档的路径，指定Fractal从哪里加载文档。
• web.builder.dest: 构建输出的目标路径，指定构建后的文件存放位置。

此外，还可以配置模板引擎、静态资源路径、自定义主题等。以下是一个更详细的配置示例：

const fractal = require('@frctl/fractal').create();
const mandelbrot = require('@frctl/mandelbrot');

fractal.set('project.title', 'My Fractal Project');
fractal.set('project.version', '1.0.0');

fractal.components.set('path', __dirname + '/src/components');
fractal.components.set('default.preview', '@preview');

fractal.docs.set('path', __dirname + '/docs');

fractal.web.set('builder.dest', __dirname + '/build');

fractal.web.theme(mandelbrot({
    skin: 'black',
    format: 'yaml',
    lang: 'zh',
    nav: ['search', 'components', 'docs'],
    panels: ['notes', 'html', 'view', 'context', 'resources']
}));

module.exports = fractal;

• components.default.preview: 设置默认的预览模板。
• web.theme: 设置Fractal的主题，可以使用默认的Mandelbrot主题，并进行自定义配置。

通过这些配置，可以灵活地调整Fractal项目的行为和外观，

fractalA tool to help you build and document website component libraries and design systems.项目地址:https://gitcode.com/gh_mirrors/fra/fractal