diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 5927e8dd5..0b4b13558 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -27,7 +27,9 @@ It's welcomed to pull request, And there are some tips about that: ```bash git clone git@github.com:youzan/vant.git -yarn +cd vant + +npm run bootstrap npm run dev diff --git a/.github/CONTRIBUTING.zh-CN.md b/.github/CONTRIBUTING.zh-CN.md index b74406816..6b41c907b 100644 --- a/.github/CONTRIBUTING.zh-CN.md +++ b/.github/CONTRIBUTING.zh-CN.md @@ -5,21 +5,24 @@ 以下是关于向 Vant 提交代码的指南。在向 Vant 提交 Issue 或者 PR 之前,请先花几分钟时间阅读以下文字。 ## Issue 规范 -如果遇到问题,请先确认这个是否已经在 issue 中有记录或者已被修复。你可以直接搜索已有的 Issue 或者 PR。 +如果遇到问题,请先确认这个是否已经在 issue 中有记录或者已被修复。你可以直接搜索已有的 Issue 或者 PR。 提 Issue 时,请用简短的语言描述遇到的问题,并添加出现问题时的环境和复现步骤 ## Pull Request 规范 -- 在开始大量代码修改之前,建议先开一个 Issue 进行讨论 + - 如果遇到问题,建议保持你的 PR 足够小。保证一个 PR 只解决一个问题或只添加一个功能。 - 当新增组件或者修改原有组件时,记得增加或者修改测试代码,保证代码的稳定 -- 在提交 PR 之前,请先进行 rebase 操作,保证提交时的 history 是干净的 - 在 PR 中请添加合适的描述,并关联相关的 Issue ## 初始化项目: ```bash -yarn +git clone git@github.com:youzan/vant.git + +cd vant + +npm run bootstrap npm run dev ``` @@ -30,7 +33,7 @@ npm run dev - 仓库的组件代码都位于 `packages` 下,每个组件一个文件夹 - 所有的组件样式代码都位于 `packages/vant-css/src` 下,`vant-css` 也会在发布时单独发包 -- `docs/markdown` 目录下是文档网站的代码,根据语言划分为 zh-CN 和 en-US,本地开发时可以在根目录下运行 `npm run dev` 开启文档网站。 +- `docs` 目录下是文档网站的代码,本地开发时可以在根目录下运行 `npm run dev` 开启文档网站 项目目录大致如下: @@ -39,7 +42,8 @@ vant ├── build # 组件打包配置和编译需要的脚本 ├── docs # 文档网站代码 ├── packages # 组件源代码 -├── test # 组件测试代码 +├── test # 单元测试代码 +├── types # TS 类型定义 ``` ## 添加新组件 @@ -48,17 +52,19 @@ vant - 添加 Vue 代码 -以添加新组件 `Button` 为例,首先在 `packages` 目录下新建目录 `button`,用 `index.js` 或者 `index.vue` 文件做为组件入口,需要的话可以建其他文件来组织代码。测试代码放在组件目录下的 `test` 文件夹中,示例代码放在组件目录下的 `demo` 文件夹中。 +以添加新组件 `Button` 为例,首先在 `packages` 目录下新建目录 `button`,用 `index.js` 或者 `index.vue` 文件做为组件入口,需要的话可以建其他文件来组织代码。 - 添加样式代码 -组件对应的样式需要放到 `packages/vant-css/src` 目录下,`Button` 组件的话需要新建一个文件 `button.css`。如若个组件样式比较复杂,为了方便组织代码可以在 `packages/vant-css/src` 下面新建一个同名目录 `button`,里面可以放一些 partial 样式。 +组件对应的样式需要放到 `packages/vant-css/src` 目录下,`Button` 组件的话需要新建一个文件 `button.css`。新添加的 `button.css` 文件需要在 `packages/vant-css/src/index.css` 中手动 import。 -新添加的 `button.css` 文件需要在 `packages/vant-css/src/index.css` 中手动 import。 +- 添加文档、示例和测试 -- 添加文档 +组件文档放在组件目录下,并以 `en-US.md` 和 `zh-CN.md` 作为文件名,测试代码放在组件目录下的 `test` 文件夹中,示例代码放在组件目录下的 `demo` 文件夹中。 -新组件的文档编写,需要在 `docs/markdown` 下各个语言中新建对应同名文档 `button.md`,在 `docs/demos` 下创建组件示例,并在 `docs/src/doc.config.js` 中进行配置组件名称 +- 将组件添加到文档网站 + +在 `docs/src/doc.config.js` 中进行配置组件名称,即可将将组件添加到文档网站 ## 组件文档如何编写 @@ -69,15 +75,15 @@ vant 组件的 API 说明,请以表格的形式书写,表格包含以下列: -| 参数 | 说明 | 类型 | 默认值 | 备选值 | -| ------------ | ------------- | -------- | ---------- | ----------------- | -| visible | 是否可见 | bool | `false` | `true` \| `false` | +| 参数 | 说明 | 类型 | 默认值 | +| ------------ | ------------- | -------- | ---------- | +| visible | 是否可见 | bool | `false` | #### Event 说明 组件的 Event 说明,请以表格的形式书写,表格包含以下列: -| 事件名 | 说明 | 参数 | +| 事件名 | 说明 | 参数 | |-----------|-----------|-----------| | click | 点击按钮时触发 | event:事件对象 | @@ -94,13 +100,3 @@ vant #### 样式 组件样式使用 `precss`,语法请参考 [precss 文档](https://github.com/jonathantneal/precss). - -#### 关于 z-index - -为了防止 `z-index` 滥用,我们规定了组件库内部的 `z-index` 使用规范。 - -`z-index` 优先级(从高到低): - -* 特殊组件:Toast 永远在最上面,[3000, +∞) -* ‘用完就关’ 的组件:Dialog, Pop, Actionsheet, ImagePreview 等 [2000, 3000) -* 其他:组件内部用来控制层次的 z-index 的区间 [-10, 10],尽可能写小,一般1,2,3这种就够了。