로컬 개발

로컬 개발 (Local Development)

출처: 문서

본문

프로젝트 부트스트랩 ​

아래 명령어 하나로 프로젝트의 모든 의존성이 설치돼요.

pnpm i

웹사이트 미리보기 ​

아래 명령어를 실행하면 기존 컴포넌트를 모두 미리 볼 수 있는 웹사이트가 열려요.

pnpm docs:dev

로컬 개발 ​

Local development guide를 참고하면 돼요.

  • 아래 명령어로 로컬 개발 환경을 시작할 수 있어요.
pnpm dev
  • 그리고 내 컴포넌트를 play/src/App.vue에 추가해요.

App.vue

<template>
  <!-- Add your component here -->
</template>

<script setup lang="ts">
// make sure this component is registered in @element-plus/components
</script>

필요에 따라 App.vue 파일을 수정하면서 개발하면 돼요.

개발 중 유용한 명령어들 ​

컴포넌트 템플릿 생성 ​

아래 명령어로 컴포넌트 템플릿을 생성할 수 있어요.

pnpm gen
# eg.
pnpm gen awesome
pnpm gen awesome-button

이렇게 하면 packages/components/awesome와 packages/components/awesome-button 디렉토리에 컴포넌트 템플릿이 생성돼요.

로케일 파일 동기화 ​

아래 명령어를 실행하면 en.ts 로케일 파일의 새 필드를 다른 로케일 파일로 동기화하고, 번역이 필요한 부분에 // to be translated 주석을 추가해 줘요.

pnpm locale:sync

더 알아보기 (Learn more)