1
2

npm install -D eslint prettier
npm install -D eslint-config-prettier eslint-plugin-prettier

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// .eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "eslint-config-prettier"  // prettier 必须放在最后，用于关闭与 Prettier 冲突的 ESLint 规则
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",  // 将 Prettier 格式化问题报告为 ESLint 错误
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
  }
}

1

npm install -D husky lint-staged

1
2
3
4
5
6

// package.json
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"]
  }
}

1
2
3
4
5

# 在已有项目中初始化（推荐）
npx storybook@latest init --type react

# 启动 Storybook 开发服务器（默认 localhost:6006）
npm run storybook

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

// Button.stories.jsx
import React from 'react'
import { Button } from './Button'

export default {
  // title：Storybook 左侧边栏中的分组路径，支持嵌套（'Form/Button/Primary' 会显示为 Form > Button > Primary）
  // 命名惯例：通常以组件路径或类别命名，方便在 Storybook 中快速找到
  title: 'Components/Button',
  // component：关联真实组件，Storybook 会自动读取组件的 PropTypes 或 TypeScript 类型，
  // 并在 Controls 面板中生成对应的表单控件
  component: Button,
  // argTypes：描述每个 prop 在 Controls 面板中的控制方式（定义在 default export 中，为所有 story 共享）
  // 不声明 argTypes 时，Storybook 会自动根据 prop 类型推断控件；但若要自定义控件类型（如 select 下拉），
  // 则必须在 argTypes 中显式声明
  argTypes: {
    variant: {
      // control：指定在 Storybook UI 中用哪种控件编辑这个 prop
      // 可选值：'text' | 'boolean' | 'number' | 'range' | 'select' | 'radio' | 'check' | 'color' | 'date'
      // select 会渲染为下拉选择框，最适合有固定枚举值的 prop
      control: 'select',
      // options：当 control 为 'select' 或 'radio' 时，定义可选值列表
      options: ['primary', 'secondary']
    }
  }
}

// 每一种渲染状态就是一个 named export（一个"故事"）
// Storybook 会将每个 named export 识别为一个独立的 Story，在侧边栏显示为单独条目
export const Primary = {
  // args：该故事的默认 props 值（会合并到 component 的 props 上）
  // 在 Storybook UI 中修改 args，预览会实时更新，适合手动测试各种 prop 组合
  args: {
    label: '点击我',
    variant: 'primary'
  }
}

export const Secondary = {
  args: {
    label: '取消',
    variant: 'secondary'
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// 主应用 main/src/index.js
import { registerMicroApps, start } from 'qiankun'

registerMicroApps([
  {
    name: 'react-sub',                        // 子应用名称（唯一标识符，用于日志和调试）
    entry: '//localhost:3001',              // 子应用入口地址（开发环境用 localhost，生产环境需改为真实 URL）
    container: '#micro-container',           // 子应用挂载的 DOM 节点（主应用中的一个 div 的 id）
    activeRule: '/react'                      // 激活规则：当浏览器路径以 /react 开头时，加载并渲染该子应用
  },
  {
    name: 'vue-sub',
    entry: '//localhost:3002',
    container: '#micro-container',
    activeRule: '/vue'
  }
])

start()  // 启动 qiankun，开始监听路由变化并按需加载子应用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// 主应用 App.jsx
function App() {
  return (
    <div>
      <nav>
        <Link to="/react">React 子应用</Link>
        <Link to="/vue">Vue 子应用</Link>
      </nav>
      {/* 子应用将挂载到这里 */}
      <div id="micro-container" />
    </div>
  )
}