vuecomp starter

vuecomp-스타터

문서: https://windlil.github.io/vuecomp-starter/

소개하다

오픈 소스 Vue3 + Typescript 구성 요소 라이브러리 개발 템플릿을 사용하면 모든 기능을 갖춘 구성 요소 라이브러리를 간단하고 쉽게 구축하고 합의된 디렉터리 배열에 따라 개발할 수 있으므로 개발자는 별도의 작업 없이 구성 요소 개발과 문서 작성에만 집중하면 됩니다. 다른 성가신 구성에주의를 기울이십시오.

한 번의 클릭으로 GithubPage에 배포하는 데 도움이 되는 문서 웹 사이트의 자동 배포를 지원합니다.

많은 친구들이 스스로 컴포넌트 라이브러리를 개발하고 싶어 한다고 생각합니다. 이는 매우 만족스러운 일이지만, 대부분의 사람들은 컴포넌트 라이브러리 개발의 초기 구성 및 패키징 단계에 갇혀 있고, 이를 위해 vuecomp-starter가 탄생했습니다.

특성

• 기존 개발은 개발자의 작업량을 크게 줄여줍니다.
• 컴포넌트 라이브러리의 사전 구성 및 패키징 단계가 완료되었으므로 컴포넌트 개발에만 집중하면 됩니다.
• 합의된 디렉터리에 따라 개발된 패키지 구성 요소 라이브러리는 주문형 가져오기를 지원하고 TreeShaking과 완벽하게 협력합니다.
• Vitepress를 통합하고 합의된 위치에 따라 파일을 생성하면 라우팅이 자동으로 구성됩니다. 문서 내용 작성에만 집중하면 됩니다.
• 테스트 환경을 위한 기존 라우팅 작성을 지원하므로 라우팅 파일을 작성할 필요가 없습니다.
• 지루한 파일 생성 프로세스를 줄이기 위해 완전한 자동 생성 스크립트를 갖추고 있습니다.
• 간단한 환경변수 수정으로 개발방법 수정
• 문서 자동 배포 지원

초기 개발 중에 이 문서를 자세히 읽어보는 것이 좋습니다.

설치하다

 # install degit
npm  i -g degit

# clone starter
degit windlil/vuecomp-starter [your project name]

# switch to your project directory
cd [your project name]

# install dependence
pnpm i

# open docs
pnpm docs:dev

스크립트 명령 소개

• pnpm build : 구성요소 라이브러리를 패키징합니다.
• pnpm docs:dev : 문서 서비스를 활성화합니다.
• pnpm comp:play : 구성 요소 테스트 환경을 엽니다.
• pnpm docs:build : 패키징 문서입니다.

자동화 스크립트:

• pnpm comp:create [component name] : 컴포넌트 파일을 생성하고 자동으로 내보내기 루트 파일로 가져옵니다.
• pnpm comp:new [component name] : 테스트 환경 컴포넌트 파일을 생성합니다.
• pnpm docs:new [component name] : 새 컴포넌트 문서를 생성합니다.
• pnpm component:create [component name] : pnpm comp:create , pnpm comp:new , pnpm docs:new merge 명령이 권장됩니다.

환경 구성 소개

초기 개발 중에 루트 디렉터리에 있는 .env 파일의 구성을 수정해야 합니다.

 # CSS预处理器 默认支持sass和less
CSS_PREPROCESSOR = 'scss'
# 用于添加组件命名前缀，建议采用首字母大写格式，最后生成的组件会采取类似这种格式:<vc-button></vc-button>
COMPONENT_NAME = 'Vc'

구성 요소 개발 규칙

구성 요소 개발에는 다음 디렉터리 구조를 사용하는 것이 좋습니다.

 ├─packages
|    ├─components
|    |     ├─style
|    |     |   └index.scss          // 组件库全局样式
|    |     ├─src
|    |     |  ├─components.ts       // 导出所有组件
|    |     |  ├─index.ts            // 全局注册所有组件
|    |     |  ├─button              // 组件文件
|    |     |  |   ├─index.ts        // 在此进行导出和局部注册
|    |     |  |   ├─src             // ❗实际开发中只需要关注到src下的文件
|    |     |  |   |  ├─button.vue 
|    |     |  |   |  ├─style
|    |     |  |   |  |   └index.scss

지루한 소개 및 생성 단계를 자동화하는 데 도움이 되는 새 구성 요소를 생성하려면 pnpm component:create [component name] 명령을 사용하는 것이 좋습니다.

자동 명령어를 사용하지 않을 경우 템플릿으로 생성된 샘플 컴포넌트의 패턴에 따라 개발할 수 있는데, 이 방법은 꽤 지루하므로 새로운 컴포넌트를 생성할 때는 명령어를 사용하는 것이 좋습니다!

문서 개발 규칙

 ├─docs
|  ├─index.md               // 文档首页内容
|  ├─guide              
|  |   ├─features.md        // 特性
|  |   ├─started.md         // 快速上手
|  |   ├─components         // 各组件的具体说明
|  |   |     └button.md

docs/guide/components/ 아래의 md 파일 작성에만 주의하면 되며, 새로운 사이드바 콘텐츠와 라우팅이 자동으로 생성됩니다. 다른 구성 파일에는 주의할 필요가 없습니다.

️ 사이드바의 이름을 결정하려면 md 파일에서 다음 형식을 사용해야 합니다.

 ---
sider_text="按钮 button"
---

구성요소 설명 문서의 구체적인 내용은 샘플 구성요소를 참조하세요.

자동화된 배포

특정 파일은 ./.github/workflows/deploy.yaml 에 있습니다.

示例：
git tag [email protected]

git add .

git commit -m 'chore: update'

git push

git push origin [email protected]

특허

MIT