vuecomp starter

vuecomp-starter

Documentação: https://windlil.github.io/vuecomp-starter/

introduzir

O modelo de desenvolvimento de biblioteca de componentes Vue3 + Typescript de código aberto torna simples e fácil construir uma biblioteca de componentes totalmente funcional e desenvolvê-la de acordo com o arranjo de diretório acordado, para que os desenvolvedores só precisem se concentrar no desenvolvimento de componentes e na escrita de documentação sem prestando atenção a outras configurações complicadas.

Suporta implantação automática de sites de documentação, que podem ajudar a implantar no GithubPage com um clique.

Acredito que muitos amigos esperam desenvolver uma biblioteca de componentes por conta própria. Isso é algo muito gratificante, mas a maioria das pessoas está presa nos estágios iniciais de construção e empacotamento do desenvolvimento da biblioteca de componentes, e o vuecomp-starter nasceu para isso.

característica

• O desenvolvimento convencional reduz muito a carga de trabalho dos desenvolvedores
• As etapas de pré-construção e empacotamento da biblioteca de componentes foram concluídas e você só precisa se concentrar no desenvolvimento dos componentes.
• Desenvolvido de acordo com o diretório acordado, a biblioteca de componentes empacotada pode suportar importação sob demanda e coopera perfeitamente com TreeShaking
• Integre o Vitepress, crie arquivos de acordo com o local acordado e o roteamento será configurado automaticamente. Você só precisa se concentrar em escrever o conteúdo do documento.
• Suporta gravação de roteamento convencional para ambientes de teste, eliminando a necessidade de gravar arquivos de roteamento
• Equipado com um script de criação automatizado completo para reduzir o tedioso processo de criação de arquivos
• Modifique os métodos de desenvolvimento simplesmente modificando variáveis ​​de ambiente
• Apoie a implantação automática de documentação

Recomenda-se a leitura detalhada deste documento durante o desenvolvimento 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

Introdução ao comando de scripts

• pnpm build : empacota a biblioteca de componentes.
• pnpm docs:dev : Habilita o serviço de documentação.
• pnpm comp:play : Abra o ambiente de teste de componentes.
• pnpm docs:build : Documentação de empacotamento.

Roteiro de automação:

• pnpm comp:create [component name] : Crie um arquivo de componente e importe-o automaticamente para o arquivo raiz de exportação.
• pnpm comp:new [component name] : Crie um arquivo de componente do ambiente de teste.
• pnpm docs:new [component name] : Crie uma nova documentação do componente.
• pnpm component:create [component name] : pnpm comp:create , pnpm comp:new , pnpm docs:new comandos de mesclagem, recomendados.

introdução à configuração do env

Durante o desenvolvimento inicial, você precisa modificar a configuração do arquivo .env no diretório raiz.

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

Convenções de desenvolvimento de componentes

Recomenda-se usar a seguinte estrutura de diretórios para desenvolvimento de componentes:

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

Recomenda-se usar o comando pnpm component:create [component name] para criar um novo componente para ajudar a automatizar as tediosas etapas de introdução e criação.

Se você não usar comandos automáticos, poderá desenvolver de acordo com o padrão dos componentes de amostra criados pelo modelo. Este método será bastante tedioso, por isso é altamente recomendável usar comandos para criar novos componentes!

Convenções de desenvolvimento de documentos

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

Você só precisa prestar atenção à gravação do arquivo md em docs/guide/components/ , e o novo conteúdo e roteamento da barra lateral será criado automaticamente. Não há necessidade de prestar atenção a outros arquivos de configuração.

️ Observe que o seguinte formato precisa ser usado no arquivo md para determinar o nome da barra lateral:

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

Para obter o conteúdo específico do documento de descrição do componente, consulte o componente de amostra.

Implantação automatizada

O arquivo específico está em ./.github/workflows/deploy.yaml

示例：
git tag [email protected]

git add .

git commit -m 'chore: update'

git push

git push origin [email protected]

Licença

MIT