前言
本文作者是华为开源组件库Vue DevUI的负责人kagol。
感谢他的无私分享！
配套视频
点下面观看我和kagol视频直播实录，学习更轻松！别忘了关注+三连！
参与开源项目的详细步骤
步骤：
- fork仓库
- 生成和配置SSH公钥
- clone个人仓库代码
- 本地启动项目
- 本地开发和提交代码
- 设置upstream和同步源仓库最新代码
- 提交PR
fork仓库
源仓库：https://gitee.com/devui/vue-devui
点击源仓库右上角的Fork按钮
img
在弹出框中选择自己的个人空间并确认
img
这时会跳转到个人仓库空间：https://gitee.com/kagol/vue-devui
img
等待数秒，仓库就fork好了，可以看到个人仓库名称的下面有一个：
forked from DevUI/vue-devui
img
生成和配置SSH公钥
检查本地公钥：
cd ~/.ssh
生成SSH公钥：
ssh-keygen -t rsa -C [email protected]
查看并拷贝SSH公钥：
cat ~/.ssh/id_rsa.pub
一般是以ssh-rsa开头，中间一长串字符，以个人邮箱结尾。
配置SSH公钥：
方式一：
直接输入链接：https://gitee.com/profile/sshkeys
方式二：
点击右上角的设置按钮：
img
再点击左侧导航中安全设置的SSH公钥：
img
即可进入SSH公钥配置页面。
把刚才复制下来的公钥粘贴到公钥文本框中，点击确定即完成SSH公钥配置。
clone个人仓库代码
配置好SSH公钥，即可以clone代码啦。
复制SSH地址：
img
在VSCode终端中输入命令：
git clone [email protected]:kagol/vue-devui.git
等上数秒，即可完成仓库代码的克隆啦。
本地启动项目
要想快速了解一个开源项目，一般是先看下根目录下的README文档，里面有该项目的介绍，和快速上手的说明。
我们照着README文档将项目先启动起来：
# 安装依赖
yarn
# npm i
# 本地启动
yarn dev
# npm run dev
本地开发和提交代码
将本地修改的代码添加到git暂存区：
git add .
将暂存区的代码提交到本地git仓库:
git commit -m "feat: 增加基础版tree组件"
将本地git仓库代码push到远程个人仓库：
git push origin dev
设置upstream和同步源仓库最新代码
查看远程仓库地址：
git remote -v
默认情况下clone的仓库有以下两个远程地址：
$ git remote -vorigin [email protected]:kagol/vue-devui.git (fetch)origin [email protected]:kagol/vue-devui.git (push)
为了同步源仓库最新代码，我们需要配置一个upstream地址：
git remote add upstream [email protected]:devui/vue-devui.git
配置完我们在查看下远程仓库配置：
$ git remote -vorigin [email protected]:kagol/vue-devui.git (fetch)origin [email protected]:kagol/vue-devui.git (push)upstream [email protected]:devui/vue-devui.git (fetch)upstream [email protected]:devui/vue-devui.git (push)
可以看到多了两个upstream地址。
同步源仓库最新代码到本地：
git pull upstream dev
提交PR
访问个人仓库的PR页面：https://gitee.com/kagol/vue-devui/pulls
点击右上角的新建Pull Request按钮：
img
源分支选择个人仓库kagol/vue-devui的分支，目标分支选择devui/vue-devui的分支：
编写PR的标题、描述，选择一个标签，查看下改动的内容，确保提交的代码没有问题，点击创建按钮：
img
PR就创建好了，并自动跳转到PR详情页面：https://gitee.com/devui/vue-devui/pulls/111
后续就是Vue DevUI组件库项目的管理员对你提交的PR进行代码检视，没问题就可以合入啦～
Tree组件的案例
步骤：
- 使用命令创建一个新组件tree
- 给tree组件生成新的组件库入口文件
- 给tree组件生成网站左侧导航
- 给tree组件生成demo文档
- 预览tree组件的demo文档
- 编写tree组件的基本渲染逻辑
使用命令创建一个新组件tree
yarn cli:create
选择组件component
给tree组件生成新的组件库入口文件
yarn cli:create
选择vue-devui
给tree组件生成网站左侧导航
yarn cli:create
选择vitepress/sidebar
给tree组件生成demo文档
创建sites/components/tree/index.md文件
预览tree组件的demo文档
yarn dev
访问：http://localhost:3000/components/tree/
编写tree组件的基本渲染逻辑
devui/tree/src/tree.tsx
import { defineComponent, toRefs } from 'vue'
import { treeProps, TreeProps } from './tree-types'
import './tree.scss'
export default defineComponent({
name: 'DTree',
props: treeProps,
emits: [],
setup(props: TreeProps, ctx) {
const { data } = toRefs(props)
console.log('data:', data, data.value)
return () => {
return <div class="d-tree">{
data.value.map(item => {
return <div>{item.label}</div>
})
}</div>
}
}
})在demo中使用tree组件
sites/components/tree/index.md
# Tree 树
一种表现嵌套结构的组件。
### 何时使用
文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
:::demo
```vue
<template>
<d-tree :data="data"></d-tree>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const data = ref([{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}])
return {
data
}
}
})
</script>
```
:::
import type { PropType, ExtractPropTypes } from 'vue'
export interface TreeItem {
label: string
children: TreeData
[key: string]: any
}
export type TreeData = Array<TreeItem>;
export const treeProps = {
data: {
type: Array as PropType<TreeData>,
default: () => [],
}
} as const
export type TreeProps = ExtractPropTypes<typeof treeProps>完成！