предисловие
Эта статья призвана дать вам представление о создании полного каркаса библиотеки пользовательского интерфейса: в том числе о том, как быстро и элегантно создать домашнюю страницу библиотеки пользовательского интерфейса, как разместить домашнюю страницу, как написать сценарии для улучшения вашего эффективность разработки, как генерировать CHANGELOG и т. д., представленные здесь Вот демонстрация для справки:
Инициализировать структуру каталогов
Основная структура кода библиотеки пользовательского интерфейса с открытым исходным кодом в основном делится на три части:
- Код самой библиотеки компонентов: эта часть кода будет опубликована на npm
- Код веб-сайта для предварительного просмотра примеров и просмотра документации: что-то вродеVant,ElementUIтакие сайты.
- Конфигурационные и скриптовые файлы: для упаковки и распространения и т. д.
Сначала мы инициализируем шаблон с помощью vue-cli3, а затем добавляем три новые папки в корневую директорию, одну для хранениякомпонентыкод (packages), один для храненияВеб-сайт для предварительного просмотра примеровкод (examples) (здесь прямо ставится шаблон инициализацииsrcкаталог изменен наexamples), один для хранениясценарийкод (build)
Имя файла можно назвать как вам нравится.
Завершить компонент
Конкретную организацию кода можно просмотретьИсходный код на Github, здесь следует отметить, что мы пытаемся назвать имя папки именем компонента, а затем создать новый в папкеindex.vueкомпоненты. Это сделано для удобства в дальнейшем мы используем код для непосредственной генерацииindex.jsСодержимое входного файла.
Разделение файлов стилей
Чтобы лучше обрабатывать стили, мы обрабатываем все файлы стилей отдельно (кодовый адрес), где Gulp в основном используется для обработки задач.
Публикация пакетов NPM
Пакет
Когда мы завершаем компонент, его можно упаковать.Упаковка очень проста благодаря vue-cli3.buildвведена командапостроить цельпараметры, просто выполните
vue-cli-service build --target lib --name vue-cards --dest lib packages/index.js
ты можешь поставитьpackagesВесь приведенный ниже код начинается с库Выкройка упакована.
В режиме библиотеки Vue является внешним. Это означает, что в пакете не будет Vue, даже если вы импортируете Vue в свой код. Если библиотека будет использоваться через упаковщик, она попытается загрузить Vue как зависимость через упаковщик; в противном случае она вернется к глобальной переменной Vue.
выпускать
Перед релизом нам нужно добавить.npmignoreфайл, положить некоторые, которые не нужно публиковать вnpmВ него записываются файлы или папки пакета, а способ записи и.gitignoreПоследовательный.
Как опубликоватьnpmПакет здесь не повторяется.
Документация и публикация
записывать
Возможно, большинство людей думают, что самое хлопотное в написании UI-библиотеки с открытым исходным кодом — это написание документации, как быстро и элегантно собрать такую библиотеку, какОфициальный сайт ElementUIА как быть с такими сайтами?
На сегодняшний день наиболее популярным способом написания документации являетсяmarkdownпиши, то нам нужно решить, какHTML-разметка документов Markdown, отображается прямо на странице.
Здесь мы можем использоватьvue-markdown-loaderПлагин, конкретную конфигурацию плагина можно посмотреть в папке проектаvue.config.jsдокумент.
Конкретный эффект от этого проекта показан на рисунке:
markdownнаписано, остальные части обычныеvueкомпоненты.
выпускать
Мы можем использовать функцию GithubPages для публикации нашего веб-сайта документации.В Интернете есть много руководств для конкретных методов использования, таких какНачало работы со страницами GitHub.
На самом деле есть очень простой способ, можно использоватьgh-pagesЭтот инструмент можно опубликовать на соответствующем складе одним щелчком мыши.gh-pagesветвь. Для конкретной конфигурации и использования, пожалуйста, обратитесь кbuild/publish-docs.jsдокумент.
Некоторые практики повышения эффективности разработки
в этом проектеbuildВ папке есть много файлов, которые могут значительно повысить эффективность нашей разработки. Давайте объясним их использование один за другим.
get-components.jsФайл в основном для полученияpackagesВсе каталоги компонентов в каталоге, построенном для насpackagesПодготовьте входной файл под.
build-entry.jsДокумент в основном основан наget-components.js, затем напишите код в/packages/index.js, сгенерируйте файл записи.
build-lib.jsФайлы в основном используются для некоторой подготовки к сборке перед публикацией пакетов npm, включая файлы ввода сборки, библиотеки сборки, файлы стилей сборки и т. д.
publish-docs.jsФункция файла — опубликовать документ на этом складе одним кликом.gh-pagesветвь.
release.shФайл сценария в основном собирает некоторые команды для публикации пакетов npm, включая множество операций git и npm.
Быстро сгенерировать CHANGELOG
CHANGELOG Мы можем сами писать MD-документы от руки, конечно, это неразумно. Мы предпочитаем использовать код для автоматической генерации, принцип — не что иное, как извлечение информации о коммите git и запись в файл, здесь мы можем использоватьconventional-changelogдля создания CHANGELOG. Чтобы генерировать более совершенные и правильные документы CHANGELOG, нам необходимо строго стандартизировать наши собственные записи отправки, мы можем использоватьconventional-changelogСтандартная запись о представлении:cz-conventional-changelog, конкретное использование может относиться кcz-cli. этого проектаpackage.jsonизinitСценарий фактически инкапсулирует связанные команды сценария, вы можете обратиться к нему.
Ссылаться на
- vant - Lightweight Mobile UI Components built on Vue
- element - A Vue.js 2.0 UI Toolkit for Web
- vue - Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
- Подробное объяснение: режим библиотеки Vue cli3 создает библиотеку компонентов и публикует ее в npm.