‌“优秀的UI库是产品体验的基石，更是团队效率的倍增器”‌ —— 来自博主

🛠️ 1. 工程化搭建

1.1 项目结构设计

├── packages
│   ├── core          # 组件核心代码
│   ├── theme         # 主题系统
│   ├── docs          # 文档系统
│   └── playground    # 开发调试环境
├── scripts          # 构建脚本
└── package.json

1.2 技术选型矩阵

1.3 基础配置示例

// vite.config.ts
export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'packages/core/index.ts'),
      name: 'MyUI',
      fileName: 'my-ui'
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

🔧 2. 核心开发模式

2.1 组件封装规范

<!-- Button组件示例 -->
<script setup lang="ts">
defineOptions({
  name: 'MButton', // 全局组件名
  inheritAttrs: false
})

const props = defineProps({
  type: {
    type: String as PropType<'primary' | 'success'>,
    default: 'primary'
  }
})

const emit = defineEmits<{
  (e: 'custom-click', payload: Event): void
}>()
</script>

<template>
  <button 
    class="m-button" 
    :class="[`m-button--${type}`]"
    v-bind="$attrs"
    @click="emit('custom-click', $event)"
  >
    <slot />
  </button>
</template>

2.2 插件安装系统

// core/install.ts
import type { App, Plugin } from 'vue'

export const makeInstaller = (components: Plugin[] = []) => {
  const install = (app: App) => {
    components.forEach(component => {
      app.use(component)
    })
  }

  return {
    install
  }
}

🚀 3. 高级特性实现

3.1 按需加载方案

// 自动导入组件
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [
        (name) => {
          if (name.startsWith('M')) {
            return { importName: name.slice(1), path: 'my-ui' }
          }
        }
      ]
    })
  ]
})

3.2 主题定制系统

// theme/default.scss
:root {
  --m-primary-color: #409eff;
  --m-border-radius: 4px;
}

@mixin button-variant($color) {
  background-color: $color;
  border-color: darken($color, 5%);

  &:hover {
    background-color: lighten($color, 5%);
  }
}

📖 4. 文档与测试

4.1 交互式文档配置

// .storybook/main.ts
export default {
  stories: ['../packages/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-essentials'],
  framework: '@storybook/vue3-vite'
}

4.2 组件测试用例

// __tests__/Button.spec.ts
import { mount } from '@vue/test-utils'
import MButton from '../src/Button.vue'

test('renders content', () => {
  const wrapper = mount(MButton, {
    slots: {
      default: 'Test Button'
    }
  })

  expect(wrapper.text()).toContain('Test Button')
})

🚢 5. 发布与维护

5.1 发布流程优化

# 版本管理
npm version patch/minor/major

# 自动生成CHANGELOG
npx conventional-changelog -p angular -i CHANGELOG.md -s

5.2 持续集成配置

# .github/workflows/publish.yml
name: Publish Package

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npm run build
      - run: npm publish --access public
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

🧠 架构决策记录（ADR）

‌扩展工具链‌：

• unplugin-vue-components – 组件自动导入
• changesets – 版本管理工具
• plop – 组件脚手架生成

欢迎在评论区交流你的UI库开发经验！🚀