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 команды слияния, рекомендуется.

введение в конфигурацию env

Во время первоначальной разработки вам необходимо изменить конфигурацию файла .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

Вам нужно только обратить внимание на запись файла md в разделе docs/guide/components/ , и новое содержимое боковой панели и маршрутизация будут созданы автоматически. Нет необходимости обращать внимание на другие файлы конфигурации.

️ Обратите внимание, что для определения имени боковой панели в файле 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]

Лицензия

Массачусетский технологический институт