Welcome to watch Kagol and the village head live, hand in hand with you to submit PR for Vue DevUI open source component library.
Welcome to participate in the construction of Vue DevUI, you can add a small assistant wechat Devui-Official
Vue DevUI code repository:
Gitee.com/devui/vue-d…
B station live link:
www.bilibili.com/video/BV1GU…
Here is the text:
Steps to participate in open source projects
Steps to participate in open source:
- The fork warehouse
- Generate and configure the SSH public key
- Clone Personal repository code
- Local start-up project
- Develop and commit code locally
- Upstreams and sync the source repository up to date
- Submit a PR
The fork warehouse
Source warehouse: gitee.com/devui/vue-d…
Click the Fork button in the upper right corner of the source repository
Select and confirm your personal space in the pop-up box
This will jump to the personal warehouse space: gitee.com/kagol/vue-d…
Wait a few seconds, the warehouse fork is ready, you can see the name of the individual warehouse under the fork:
forked from DevUI/vue-devui
Generate and configure the SSH public key
Check the local public key:
cd ~/.ssh
Copy the code
Generate an SSH public key:
ssh-keygen -t rsa -C [email protected]
Copy the code
View and copy the SSH public key:
cat ~/.ssh/id_rsa.pub
Copy the code
Generally, it starts with SSH-RSA and ends with a long string of characters.
Configuring the SSH public key:
A:
Enter the link directly: gitee.com/profile/ssh…
Method 2:
Click the Settings button in the upper right corner:
Click SSH Public Key for security Settings in the navigation tree on the left:
The SSH public key configuration page is displayed.
Paste the copied public key into the public key text box and click OK to complete the SSH public key configuration.
Clone Personal repository code
Once the SSH public key is configured, you can clone the code.
SSH address for replication:
Enter the command in the VSCode terminal:
git clone [email protected]:kagol/vue-devui.git
Copy the code
Wait a few seconds and the repository code will be cloned.
Local start-up project
A quick way to get to know an open source project is to start by looking at the README document in the root directory, which provides an introduction to the project and quick instructions for getting started.
Let’s start the project by following the README document:
Yarn dev # NPM run devCopy the code
Develop and commit code locally
Add locally modified code to git staging:
git add .
Copy the code
Commit staging code to a local Git repository:
Git commit -m "feat: add treeCopy the code
Push local Git repository code to remote personal repository:
git push origin dev
Copy the code
Upstreams and sync the source repository up to date
To view the remote warehouse address:
git remote -v
Copy the code
By default, the Clone repository has the following two remote addresses:
$ git remote -v
origin [email protected]:kagol/vue-devui.git (fetch)
origin [email protected]:kagol/vue-devui.git (push)
Copy the code
To synchronize the latest source repository code, we need to configure an upstream address:
git remote add upstream [email protected]:devui/vue-devui.git
Copy the code
After configuration, we will check the remote warehouse configuration:
$ git remote -v
origin [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)
Copy the code
You can see two upstream addresses added.
Synchronize the latest source repository code to local:
git pull upstream dev
Copy the code
Submit a PR
Visit the PR page of the personal warehouse: gitee.com/kagol/vue-d…
Click on the new Pull Request button in the upper right:
The source branch selects the branch of personal repository Kagol /vue-devui, and the target branch selects the branch of devui/vue-devui:Write the title and description of the PR, select a TAB, view the changes, make sure the submitted code is ok, click the Create button:
The PR is created and automatically redirected to the PR details page:Gitee.com/devui/vue-d…The following is the Vue DevUI component library project manager to your submitted PR code review, no problem can be closed ~
The Tree component example
Steps:
- Use the command to create a new component tree
- Generate a new component library entry file for the Tree component
- Generate the left navigation of the site for the Tree component
- Generate a demo document for the Tree component
- Preview the tree component demo document
- Write the basic render logic of the Tree component
\
Use the command to create a new component tree
yarn cli:create
Copy the code
Select component Component
Generate a new component library entry file for the Tree component
yarn cli:create
Copy the code
Select the vue – devui
Generate the left navigation of the site for the Tree component
yarn cli:create
Copy the code
Select vitepress/sidebar
Generate a demo document for the Tree component
Create sites/components/tree/index. The md file
Preview the tree component demo document
yarn dev
Copy the code
Visit: http://localhost:3000/components/tree/
Write the basic render logic of the Tree component
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>
}
}
})
Copy the code
Use the Tree component in the demo
sites/components/tree/index.md
A component that represents a nested structure. Most of the structure of everything in the world is a tree structure. The use of tree control can be a complete display of the hierarchy, and with the expansion of the selection and other interactive functions. :::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: 'secondary 1-1, children: [{label:' level 3 '1-1-1}]}}, {label:' level 2 ', children: [{label: 'secondary 2-1, children: [{label: 'triple the 2-1-1'}}, {label: 'secondary 2-2, children: [{label:' level 3 '2-2-1}]}]}, {label:' level 3 'children: [{label: 'secondary 3-1', children: [] {label: 'level 3' 3-1-1}}, {label: 'secondary 3-2, children: [{label: 'triple the 3-2-1'}}}]]]) return {data}}}) < / script > ` ` ` : : :Copy the code
Component props and TS type files
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>
Copy the code
Done!