vuecomp starter

vuecomp-starter

Documentation: https://windlil.github.io/vuecomp-starter/

introduce

The open source Vue3 + Typescript component library development template makes it simple and easy to build a fully functional component library and develop it according to the agreed directory arrangement, so that developers only need to focus on the development of components and the writing of documentation without paying attention to other cumbersome configurations.

Supports automatic deployment of documentation websites, which can help deploy to GithubPage with one click.

I believe that many friends hope to develop a component library by themselves. This is a very fulfilling thing, but most people are stuck in the early construction and packaging stages of component library development, and vuecomp-starter is for this. And born.

characteristic

• Conventional development greatly reduces developers’ workload
• The pre-construction and packaging stages of the component library have been completed, and you only need to focus on the development of the components.
• Developed according to the agreed directory, the packaged component library can support on-demand import and perfectly cooperates with TreeShaking
• Integrate Vitepress, create files according to the agreed location, and routing will be automatically configured. You only need to focus on writing the document content.
• Supports conventional routing writing for test environments, eliminating the need to write routing files
• Equipped with a complete automated creation script to reduce the tedious file creation process
• Modify development methods by simply modifying environment variables
• Support automatic deployment of documentation

It is recommended to read this document in detail during initial development

Install

 # 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

Introduction to scripts command

• pnpm build : Package the component library.
• pnpm docs:dev : Enable documentation service.
• pnpm comp:play : Open the component testing environment.
• pnpm docs:build : Packaging documentation.

Automation script:

• pnpm comp:create [component name] : Create a component file and automatically import it into the export root file.
• pnpm comp:new [component name] : Create a test environment component file.
• pnpm docs:new [component name] : Create a new component documentation.
• pnpm component:create [component name] : pnpm comp:create , pnpm comp:new , pnpm docs:new merge commands, recommended.

env configuration introduction

During initial development, you need to modify the configuration of the .env file in the root directory.

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

Component development conventions

It is recommended to use the following directory structure for component development:

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

It is recommended to use the command pnpm component:create [component name] to create a new component to help automate the tedious introduction and creation steps.

If you do not use automatic commands, you can develop according to the pattern of the sample components created by the template. This method will be quite tedious, so it is strongly recommended to use commands to create new components!

Document development conventions

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

You only need to pay attention to the writing of the md file under docs/guide/components/ , and new sidebar content and routing will be automatically created. There is no need to pay attention to other configuration files.

️ Note that the following format needs to be used in the md file to determine the name of the sidebar:

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

For the specific content of the component description document, please refer to the sample component.

Automated deployment

The specific file is in ./.github/workflows/deploy.yaml

示例：
git tag [email protected]

git add .

git commit -m 'chore: update'

git push

git push origin [email protected]

License

MIT