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:

  1. The fork warehouse
  2. Generate and configure the SSH public key
  3. Clone Personal repository code
  4. Local start-up project
  5. Develop and commit code locally
  6. Upstreams and sync the source repository up to date
  7. 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:

  1. Use the command to create a new component tree
  2. Generate a new component library entry file for the Tree component
  1. Generate the left navigation of the site for the Tree component
  2. Generate a demo document for the Tree component
  1. Preview the tree component demo document
  2. 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!