Skip to content

mobile vue:示例代码改造指引

Y edited this page Mar 15, 2023 · 9 revisions

相关仓库github地址

运行项目

// 初始化和更新子模块
git submodule init && git submodule update

// 安装依赖,推荐使用 yarn
yarn install

// 运行
npm run dev

⚠️:分别 fork tdesign-mobile-vue 和 tdesign-common 两个仓库,后期有修改需要分别提交 pr。

改造要求:(以 NoticeBar 组件为例)

1. 修复使用错误,示例代码改用 script setup 语法糖

image

2. 组件 DEMO 与示例代码保持一致

企业微信截图_ce9f39ca-3ae9-4478-9c3d-3c346ddec115

⚠️1. 左侧的 "描述性文字" 和 codesrc/_common/docs/mobile/api/notice-bar.md 处修改,修改后需要另外提 prtdesign-common 库。

3. 对齐视觉稿

视觉稿:地址

4. 调试

通过 npm run dev 测试官网的示例代码是否符合预期

npm run dev
  • 官网右侧的demo示例能否正常展示 && 交互是否正常
  • 官网左边的示例代码是否正常展示

5. Demo示例改动,需要先重新更新Demo快照,然后执行测试,测试通过后再提交PR

// 更新 demo 快照
npm run test:demo
npm run test:snap-update

// 执行测试
npm run test