手把手搭建基于React的前端UI库（一）-- 项目初始化-灵析社区

1、使用dumi创建

dumi是一个开源的负责组件开发及组件文档生成的工具，这里仅为了方便组件库文档展示使用。在最后打包发布时，dumi不参与打包，所以这里使用dumi是可以的。

接下来就开始记录实操步骤。

首先安装 node，并确保node >= 10.13 && node < 17.6.0。这里作者亲测，node 17.6.0是不兼容的，而作者本地使用的v16.14.2可以完全兼容。

在空白的地方新建文件夹

mkdir dux-ui && cd ./dux-ui

然后执行安装命令，这里我选择站点式的创建方式

$ npx @umijs/create-dumi-lib        # 初始化一个文档模式的组件库开发脚手架
# or
$ yarn create @umijs/dumi-lib

$ npx @umijs/create-dumi-lib --site # 初始化一个站点模式的组件库开发脚手架
# or
$ yarn create @umijs/dumi-lib --site

在根目录下执行命令

npm install
npm run dev

然后项目就跑起来了！（盗用官网的图，仅供参考）

2、文件目录

脚手架搭建起项目后，可以看到初始文件目录、

里为了开发方便，我们把自定义的组件放在单独的components文件夹下：

然后修改src下的index文件中组件的导入路径：

export { default as Foo } from './components/Foo';

修改dumi配置文件.umirc.ts，新增menu展示路径：

import { defineConfig } from 'dumi';

export default defineConfig({
  title: 'test-dumi',
  favicon:
    'https://user-images.githubusercontent.com/9554297/83762004-a0761b00-a6a9-11ea-83b4-9c8ff721d4b8.png',
  logo: 'https://user-images.githubusercontent.com/9554297/83762004-a0761b00-a6a9-11ea-83b4-9c8ff721d4b8.png',
  outputPath: 'docs-dist',
  mode: 'site',
  
  // 新增
  menus: {
    // 需要自定义侧边菜单的路径，没有配置的路径还是会使用自动生成的配置
    '/components': [
      {
        title: '组件',
        path: '/components',
        children: [
          // 菜单子项（可选）
          'components/Foo/index.md',
        ],
      },
    ],
  },
});

修改package.json

然后执行

npm run docs

可以看到跑起来了

至此，项目就搭建起来了！本章到此结束，下一节会逐步记录各个组件的开发过程。

手把手搭建基于React的前端UI库 （一）-- 项目初始化-灵析社区

1、使用dumi创建

2、文件目录

手把手搭建基于React的前端UI库（一）-- 项目初始化-灵析社区