Web Components for GSC Basic Team
npm install @gsc-basic/components
packages/components
index.js # 包入口(默认导出 install + re-export src/index.js)
package.json
vite.config.mjs # library build 配置(含 @ 别名)
uno.config.mjs # 本包 UnoCSS 配置(含 shadcn preset)
tsconfig.json # TS 项目编辑器别名:@/ -> src/(shadcn 组件使用 TS)
components.json # shadcn-vue CLI 配置(本仓库 shadcn 部分使用 TS:typescript=true)
tailwind.config.js # 仅用于满足 shadcn-vue CLI 的占位文件(真实样式用 UnoCSS)
src/
index.js # 组件库对外导出入口(仅导出业务组件)
styles/tokens.css # 设计变量(含 shadcn tokens + dark 覆盖)
/ # 对外组件(示例:Grid/、ConfigProvider/ 等)
index.js # withInstall 包装导出
src/*.vue # 组件实现
components/ui/** # shadcn-vue 生成/维护的内部 UI 组件(不要从 src/index.js 导出)
lib/** # 内部工具(例如 cn class 合并)
stories/*/.stories.js # Storybook stories
`
新增“对外组件”的推荐流程
1. 建目录:packages/components/src/
2. 写导出文件:packages/components/src/
推荐模板:
`js
import { withInstall } from '@gsc-basic/utils';
import Comp from './src/.vue';
export const GscComponentName = withInstall(Comp);
export default GscComponentName;
`
3. 在 packages/components/src/index.js 里 re-export:
`js
export * from './';
`
4. 增加 Storybook:packages/components/stories/
Storybook / stories 编写规范
- stories 目录:packages/components/stories/*/.stories.js
- 组件库对外组件:推荐从 @gsc-basic/components` 引入(走真实导出路径)