vuecomp starter

iniciador de vuecomp

Documentación: https://windlil.github.io/vuecomp-starter/

introducir

La plantilla de desarrollo de biblioteca de componentes Vue3 + Typecript de código abierto hace que sea simple y fácil crear una biblioteca de componentes completamente funcional y desarrollarla de acuerdo con la disposición de directorios acordada, de modo que los desarrolladores solo tengan que centrarse en el desarrollo de componentes y la redacción de documentación sin prestando atención a otras configuraciones engorrosas.

Admite la implementación automática de sitios web de documentación, lo que puede ayudar a implementar en GithubPage con un solo clic.

Creo que muchos amigos esperan desarrollar una biblioteca de componentes por sí mismos. Esto es algo muy satisfactorio, pero la mayoría de las personas están atrapadas en las primeras etapas de construcción y empaquetado del desarrollo de la biblioteca de componentes, y vuecomp-starter nació para esto.

característica

• El desarrollo convencional reduce en gran medida la carga de trabajo de los desarrolladores
• Las etapas previas a la construcción y empaquetado de la biblioteca de componentes se han completado y usted solo necesita concentrarse en el desarrollo de los componentes.
• Desarrollada de acuerdo con el directorio acordado, la biblioteca de componentes empaquetados puede admitir la importación bajo demanda y coopera perfectamente con TreeShaking.
• Integre Vitepress, cree archivos según la ubicación acordada y el enrutamiento se configurará automáticamente. Solo necesita concentrarse en escribir el contenido del documento.
• Admite escritura de enrutamiento convencional para entornos de prueba, eliminando la necesidad de escribir archivos de enrutamiento
• Equipado con un script de creación automatizado completo para reducir el tedioso proceso de creación de archivos.
• Modifique los métodos de desarrollo simplemente modificando las variables de entorno
• Admite la implementación automática de documentación.

Se recomienda leer este documento en detalle durante el desarrollo inicial.

Instalar

 # 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

Introducción al comando de scripts

• pnpm build : empaqueta la biblioteca de componentes.
• pnpm docs:dev : habilita el servicio de documentación.
• pnpm comp:play : abre el entorno de prueba de componentes.
• pnpm docs:build : documentación de embalaje.

Guión de automatización:

• pnpm comp:create [component name] : crea un archivo de componente e impórtalo automáticamente al archivo raíz de exportación.
• pnpm comp:new [component name] : crea un archivo de componente del entorno de prueba.
• pnpm docs:new [component name] : crea una nueva documentación del componente.
• pnpm component:create [component name] : pnpm comp:create , pnpm comp:new , pnpm docs:new comandos de combinación, recomendados.

introducción a la configuración del entorno

Durante el desarrollo inicial, debe modificar la configuración del archivo .env en el directorio raíz.

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

Convenciones de desarrollo de componentes

Se recomienda utilizar la siguiente estructura de directorios para el desarrollo de componentes:

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

Se recomienda utilizar el comando pnpm component:create [component name] para crear un nuevo componente que ayude a automatizar los tediosos pasos de introducción y creación.

Si no utiliza comandos automáticos, puede desarrollar de acuerdo con el patrón de los componentes de muestra creados por la plantilla. Este método será bastante tedioso, por lo que se recomienda utilizar comandos para crear nuevos componentes.

Convenciones de desarrollo de documentos

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

Solo necesita prestar atención a la escritura del archivo md en docs/guide/components/ , y se creará automáticamente un nuevo contenido de la barra lateral y enrutamiento. No es necesario prestar atención a otros archivos de configuración.

️ Tenga en cuenta que se debe utilizar el siguiente formato en el archivo md para determinar el nombre de la barra lateral:

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

Para conocer el contenido específico del documento de descripción del componente, consulte el componente de muestra.

Implementación automatizada

El archivo específico está en ./.github/workflows/deploy.yaml

示例：
git tag [email protected]

git add .

git commit -m 'chore: update'

git push

git push origin [email protected]

Licencia

MIT