0.0.1-alpha.20 • Published 1 year ago
@cosmic-design/san v0.0.1-alpha.20
Cosmic Design Components
一个基于 San 开发的 UI 组件库
Feature
- 完全开放的组件样式定制能力
- 支持多端:移动端、PC端
- 全面拥抱 TypeScript
使用组件
目前组件库提供了多种模块化规范,及全部打包和按需引入分包的编译产物,你可以结合适合的业务场景选择。
编译配置
全局提供 san 的依赖即可,编译选择 vite / rollup 等工具即可,无特别配置,可参考。
引入组件
组件库导出项目
/** package.json */
{
"exports": {
"./css/*": "./dist/css/*",
/** for @cosmic-design/san/css/Button.css */
/** for @cosmic-design/san/css/style.css */
/** for @cosmic-design/san/css/global.css */
"./*": {
"import": "./dist/esm/*/index.js",
"require": "./dist/cjs/*/index.js"
},
/** for @cosmic-design/san/Button */
".": {
"import": "./dist/esm/index.js",
"require": "./dist/cjs/index.js"
}
/** for @cosmic-design/san */
},
}
/dist
├── css
│ ├── style.css # 所有样式,适用于全部引入,包括组件和global
| ├── global.css # 全局样式,适用于按需引入
| ├── Button.css # 组件样式,适用于按需引入
├── esm
│ ├── index.js # 组件esm bundle,适用于 esm/ts + 全部引入
│ ├── index.d.ts # 所有组件类型
│ ├── Button
│ │ ├── index.js # 组件esm, 适用于 esm/ts + 按需引入
│ │ ├── index.d.ts # 所有组件类型
├── cjs
│ ├── index.js # 组件commonJS bundle,适用于打包引入
│ ├── index.d.ts # 所有组件类型
│ ├── Button
│ │ ├── index.js # 组件commonJS, 适用于按需引入
│ │ ├── index.d.ts # 组件类型
├── umd
│ ├── index.js # 组件umd bundle,适用于 umd/amd + 打包引入
│ ├── Button.js # 分组件umd,适用于 umd/amd + 按需引入
模块化及打包
Demo
ESM
- 全部引入
import '@cosmic-design/san/css/style.css';
import { Button } from '@cosmic-design/san';
- 按需引入
import '@cosmic-design/san/css/global.css'; // in global js
import '@cosmic-design/san/css/Button.css';
import Button from '@cosmic-design/san/Button';
CMD
全部引入 略
按需引入
/** CommonJS SSR **/
const Button = require('@cosmic-design/san/Button');
UMD/AMD
- AMD 配置
require.config({
packages: [
{
name: '@cosmic-design/san',
location: '/@cosmic-design/san/dist/es5',
main: 'index.js'
},
]
});
- 全部引入
<link rel="stylesheet" type="text/css" href="/@cosmic-design/san/dist/css/style.css"/>
require(['@cosmic-design/san', 'san'], function({ Button }, { Component }) {
});
- 按需引入
<link rel="stylesheet" type="text/css" href="/@cosmic-design/san/dist/css/global.css"/>
<link rel="stylesheet" type="text/css" href="/@cosmic-design/san/dist/css/Button.css"/>
require(['@cosmic-design/san/Button', 'san'], function(Button, { Component }) {
});
组件开发
目录结构
- 组件代码目录:
./packages/components
- 开发参考
Grid
/Button
组件
组件预览
- 本地预览环境目录:
./site
- 预览命令:
npm run build
- 多端预览适配及实现方案
组件单元测试
使用 san-test-utils 进行单元测试
提交代码
请使用npm run commit
,不要使用git commit
0.1.1-beta.e3d10c7
1 year ago
0.1.1-beta.a094706
1 year ago
0.1.1-beta.c46fae2
1 year ago
0.1.1-beta.3dc3380
1 year ago
0.1.1-beta.bc2614d
2 years ago
0.1.1-beta.6ea6869
2 years ago
0.1.1-beta.a57cb4c
2 years ago
0.1.1-beta.98ba66f
2 years ago
0.1.1-beta.72022a2
2 years ago
0.0.2-beta.9c694ae
2 years ago
0.0.1-alpha.20
2 years ago