mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
ac814d3a22
* ci: add locale:sync scripts * chore: remove el.datepicker.week * chore: execute locale:sync commands * chore: rename LocaleObject to TranslatePair
78 lines
1.3 KiB
Markdown
78 lines
1.3 KiB
Markdown
---
|
|
title: Local Development
|
|
lang: en-US
|
|
---
|
|
|
|
# Local Development
|
|
|
|
## Bootstrap project
|
|
|
|
With command
|
|
|
|
```shell
|
|
pnpm i
|
|
```
|
|
|
|
the project will install all dependencies.
|
|
|
|
## Website preview
|
|
|
|
With command
|
|
|
|
```shell
|
|
pnpm docs:dev
|
|
```
|
|
|
|
the project will launch website for you to preview all existing component.
|
|
|
|
## Local development
|
|
|
|
See [Local development guide](https://github.com/element-plus/element-plus/blob/dev/CONTRIBUTING.md)
|
|
|
|
1. With command
|
|
|
|
```shell
|
|
pnpm dev
|
|
```
|
|
|
|
will start the local development environment.
|
|
|
|
2. Add your component into `play/src/App.vue`
|
|
|
|
```vue [App.vue]
|
|
<template>
|
|
<ComponentYouAreDeveloping />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// make sure this component is registered in @element-plus/components
|
|
</script>
|
|
```
|
|
|
|
Modify `App.vue` file per your needs to get things work.
|
|
|
|
## The following commands are also useful during development
|
|
|
|
### Generate component template
|
|
|
|
With command
|
|
|
|
```shell
|
|
pnpm gen <component-name>
|
|
# eg.
|
|
pnpm gen awesome
|
|
pnpm gen awesome-button
|
|
```
|
|
|
|
will generate a component template in `packages/components/awesome` and `packages/components/awesome-button` directory.
|
|
|
|
### Sync locale files
|
|
|
|
With command
|
|
|
|
```shell
|
|
pnpm locale:sync
|
|
```
|
|
|
|
will sync the new fields from the `en.ts` locale file to other locale files and add the comment `// to be translated`.
|