@lexiang/design v0.1.24

乐享 PC 端组件库

基于 TDesign 适配桌面端的组件库，适合在 vue 2.6 技术栈项目中使用。

官网

npm：@lexiang/design

测试环境：https://lexiangla.net/design/getting-started

正式环境：https://lexiangla.com/design/getting-started

快速开始

安装 npm 依赖，初始化和拉取 tdesign

yarn install
yarn sub:init

开发调试

使用组件文档调试

组件要求文档先行，文档中有具体的组件调用，可以在组件文档中调试组件

yarn site:dev

访问http://localhost:16001/design到对应的组件页面进行调试

使用 yalc 调试

# 全局安装yalc
yarn global add yalc

# design项目，每次变更后构建推送
yarn serve
yalc push

# 目标项目，以swan项目举例，仅需执行一次
yalc add @lexiang/design
swan-yarn-watch

脚本

• sub:init: 子模块初始化和拉取
• tdesign:update: tdesign 子模块更新
• wasp:update: 更新 wasp 图标库
• generate:usage: 顶部组件可配置例子自动生成
• wasp:update: 更新 wasp 子模块和 icon manifest
• site:dev: 组件文档开发环境
• site:build: 组件文档生产环境构建产物
• site:preview: 组件文档本地预览生产构建产物
• dev: 组件开发环境
• build: 组件生产构建
• pub: 组件 npm 发布

组件开发

组件目录

components
  │── cus-component // 自建组件
  │  ├── _example // 组件示例
  │  │    └── base.vue
  │  ├── _usage // 可配置的组件示例
  │  │    ├── index.vue // 跑`generate:usage`脚本自动生成
  │  │    ├── props.json // 可配置的属性
  │  ├── cus-component.md // 组件文档
  │  ├── cus-component.index // 组件
  │  └── index.ts // 组件入口
  └── ext-config-provider // tdesign组件扩展

组件规范

• 乐享自建组件前缀统一为TCus
• TDsign 组件扩展前缀统一为TExt

组件适配原则

以适配 tag-input 为例

1. 分析所需适配的组件组成，例如 tag-input 由 input、tag 组成，那么组件适配的优先级，应该先考虑 input 和 tag 的适配，再考虑 tag-input 的适配
2. 针对单一组件，优先适配 token, 例如 tag-input 中，tdesign 提供了对应的 token（style/web/components/tag-input/_var.less），此时应该优先用 token 覆盖的方式来适配
3. 降级覆盖 class，token 不满足时，考虑通过 class 覆盖的方式适配
4. 递归组件适配到顶层，基础组件适配完后，再重复流程适配到顶层组件