@zat-design/sisyphus-vue-mobile

vue H5 组件

众安科技 H5 业务组件库

项目

• vitepress: 组件文档目录
• style: 组件 token/自定义覆盖样式
• packages: 公共组件开发目录

启动项目

# 本地运行
$ npm run dev

# 打包（支持单组件打包 在packages对应目录下执行）
$ npm run build

# 文档预览
$ npm run preview

#### 项目 packages

## 启动项目

组件目录结构

packages
├── ProImageUpload
│   ├── components.d.ts
│   ├── demo      // demo 目录
│   │   ├── index.md
│   │   └── normal.vue
│   ├── env.d.ts
│   ├── index.ts
│   ├── package.json
│   ├── src
│   │   ├── index.ts
│   │   └── index.vue
│   ├── tsconfig.json
│   ├── vite.config.ts
│   └── yarn.lock

开发规范

我们的代码风格都使用： 两个空格缩进 vscode 的 eslint 插件控制。

注意代码风格，请按照 eslint 规范写代码。 提交之前修复所有的语法问题

• 基础语法风格：

  • js 中全部使用单引号，html 模板中使用双引号
  • 函数声明时，圆括号后面要留空格
  • 对象写在一行时：{ key: value } -- {} 里面要有一个空格，冒号后面要有一个空格
  • 注释 //后面要空格 ‘// 注释’
  • js 变量不要用 var 直接用 let const

• 命名习惯

  • vue 组件全部帕斯卡(大驼峰)命名 BarFoo 首字母大写

  • views 下面的页面使用小驼峰命名 barFoo

  • page 页面的 name 字段用两个单词大驼峰 UserDetail、AgendaList

  • 函数以动词开头 如：getOrderDetail, setUserName 等

  • 获取数据方法命名 getData （保持全局统一）

  • 常量用全大写字符，两个单词间用下划线连接 如：ORDER_TYPES

  • 样式命名 -使用 BEM 命名约定，避免 CSS 样式的冲突和混淆 如：nut-address__header__title， - 表位置或局部的 用 top left right bottom header footer side nav menu 等 - 项目中已经有的约定命名： - 简写 mb20, mt20, ml10, mr10: margin-top/bottom/left/right 等 tar,tac,tal: text-align: right/center/left - 常用“块”级命名 block-title,block-content: 在编写 标题+内容 块布局时约定的样式提取 - 其他参考 src/assets/styles/common/base.less

    样式规范

• vue 编程规范：

  • page 页面，使用 setup 语法糖 <script setup lang="ts">，尽量不用setup() {return{}}方式
  • vue 组件 声明 props 时，defineProps 都采用对象方式，声明每个 prop 的类型，是否必填 或 默认值
  • vue 组件 声明 emit 时，defineEmit 都要把事件定义清楚
  • 每个 vue 文件组件添加 name 属性， 如：orderList.vue 页面 name: 'OrderList' 这样便于在 vue-devtool 中调试识别。
  • 每个 vue 页面 root 的元素的 ZaPageWrap 组件 传入 main-class 以 "page-文件名" 如：page-order-list page-order-detail
  • 每个 vue 组件的 root 元素的 class 以 "zat-文件名" 如： zat-order-item zat-side-bar
  • 页面声明过定时器的，一定要记得离开时销毁
  • 声明的 pinia store 变量，要写注释
  • 一些通用逻辑，抽取到 hooks 目录下，返回可观测数据 ref 或 reactive 类型状态
  • 异步函数调用，尽量用 async/await Promise，少用 cb 方式回调函数
  • 开发业务时，多采用组件化开发，将可共用的部分尽量提取出来放到全局 components 下。 复杂的页面，尽量将页面拆分成组件，放到当前页面目录下 components 下

• 其他

  • 提交 commit 时 message 要写详细 commit -m ' 类型 + 影响的范围 + 摘要 + 具体修改的内容' 最简单的如下：
  • commit -m 'fix 注册页 修复表单页输入框验证错误问题'
  • commit -m 'feat core 模块 新开发核心企业授信管理页+签发管理页面' 常用类型 feat: 新开发、fix: 修复 bug、chore: 其他修改

• 新建页面模板

  • 空页面 直接拷贝过去简单修名称和 class 即可 views/_template + index.vue

样式规范

• 所有的主题相关的颜色，必须使用变量
• 样式类的，必遵循 design-token 落地规范，使用变量
• 所有页面顶部的 class 必须要写，覆盖 NUTUI 的样式，提取出来到 cover.scss 中

文档书写规范

• 在组件目录下demo目录书写 index.md 文件

注：demo 的 .vue 文件暂时不支持预览引入的文件

<!-- normal  -->
::: Preview src="zat-button/normal"
:::

or

<!-- normal -->
<Preview src="zat-button/normal" />

• 组件需要暴露的组件或者方法 应该在目录下的 index.ts 中 和 zat-design 目录下 component.ts 文件导出

• 组件书写好注释（参考code-comments），插件会自动生成，只需要在 md 文件末尾加上 docgen 块,

:::docgen
:::