Skip to content

Latest commit

 

History

History
88 lines (58 loc) · 2.38 KB

CONTRIBUTING.md

File metadata and controls

88 lines (58 loc) · 2.38 KB
Raw

Contributing

First, thanks for being interested in contributing on this project!

Pre-request

Before starting, ensure your machine is having:

Node >= 18

pnpm >= 8

Setup

Fork Vexip UI and clone to your local machine and install dependencies:

pnpm install # pnpm i

Then you need to build once the packages under common (IMPORTANT):

pnpm run build:common

Component Development

We use a Vite project in dev-server a development server.

You can use the following command to start development server for specific component:

pnpm run serve [component]

After the server is successfully started, the demos of the components specified under docs/demos will be used as development cases.

The development server uses 8008 port and Chinese demos by default, you can add -p and -l parameters to the command to specify the port and language respectively:

pnpm run serve [component] -p [port] -l [language]

Documentation Development

We use VitePress as the documentation framework. You can start it locally with the following command:

pnpm run serve:docs

Create New Component

You can quickly create a new component using template files:

pnpm run create [component]

Wait patiently for the files to be created, then you can check the files in the following locations:

  • components/[component]/index.ts
  • components/[component]/props.ts
  • components/[component]/css.ts
  • components/[component]/style.ts
  • components/[component]/[component].vue
  • components/[component]/tests/ssr.spec.tsx
  • components/[component]/tests/[component].spec.tsx
  • docs/demos/[component]/basis/demo.en-US.vue
  • docs/demos/[component]/basis/demo.zh-CN.vue
  • docs/en-US/component/[component].md
  • docs/zh-CN/component/[component].md
  • style/[component].scss

In addition to the above template files, we also have some file name conventions:

  • components/[component]/symbol.ts is used to define types and some common constants and variables
  • components/[component]/helpers.ts is used to define some dedicated helper methods
  • components/[component]/hooks.ts is used to define some dedicated hook methods

After confirming, you can execute the bootstrap command:

pnpm run bootstrap

After finished, you can start developing the component and its documentation.