Smart Web Ui 🚀

📦 安装

# 选择你喜欢的包管理器
npm install smart-web-ui vue@^3 ant-design-vue@^3
# 或
yarn add smart-web-ui vue@^3 ant-design-vue@^3
# 或
pnpm add smart-web-ui vue@^3 ant-design-vue@^3

🚀 快速使用

全量引入（推荐用于快速原型开发）

// main.js
import { createApp } from 'vue'
import SmartWebUI from 'smart-web-ui'
import 'smart-web-ui/dist/style.css'
const app = createApp(App)
app.use(SmartWebUI)

按需引入（推荐用于生产环境）

// 组件文件中
import {MyButton,MyInput} from 'smart-web-ui'
// vite.config.js 配置自动导入
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      imports: ['smart-web-ui']
    })
  ]
}

🎨 主题定制

通过 CSS 变量覆盖

/* 在你的全局 CSS 中 */
:root {
  --s-primary-color: #1677ff;
  --s-border-radius: 6px;
  --s-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

通过 SCSS 变量（需要配置构建工具）

// vite.config.js
export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "smart-web-ui/src/styles/variables";`
      }
    }
  }
}

🛠 开发指南

本地开发

git clone xxxxx/smart-web-ui.git
cd smart-web-ui
npm install
npm dev

生产构建

npm build

组件测试

npm test

❓ 常见问题

Q: 样式与 Ant Design 冲突？

确保 ant-design-vue 的样式在 smart-web-ui 之后导入

Q: 如何支持 SSR？

组件库已提供 SSR 兼容版本，使用默认导入方式即可

Q: 为什么需要 peerDependencies？

我们保持与 vue/ant-design-vue 的解耦，让您可以灵活控制版本