Упакуйте свою собственную библиотеку компонентов - VUE

"Подходит для толпы: поговорим о компонентах вместе"

"Время просмотра: 30 минут"

"Описание: Делимся опытом, приглашаем обсудить"

предисловие

В настоящее время в сообществе vue появляется все больше и больше больших и малых библиотек компонентов, и превосходные компоненты с открытым исходным кодом становятся все более и более распространенными, такими как

ПК:View ui,Element ui, BootstrapVue ,Ant Design Vue, МайкрософтMS Design, карты:vue-baidu-map,vue-amap, графикvue-echarts,vue-easetable, и многие, многие другие

Мобильный:Vux,VantПодожди, в последнее время было жаркоFutter

Затем, как выбрать подходящую библиотеку компонентов перед построением фреймворка, как выбрать отличные компоненты с открытым исходным кодом в процессе разработки, как инкапсулировать общие части в бизнес-компоненты и как накапливать и поддерживать функциональные компоненты, накопленные проектом. это то, о чем мы должны думать.

Как выбрать подходящую библиотеку компонентов (подборка)

Будь то проект быстрого питания или архитектура с постоянным улучшением архитектуры, очень важно выбрать надежную и подходящую библиотеку компонентов пользовательского интерфейса при построении архитектуры, что связано с последующим обслуживанием архитектуры системы, накоплением компоненты, и осаждение проекта. Как только будет выбрана незрелая библиотека компонентов, вся архитектура будет повсюду наступать на ямы. Итак, как выбрать подходящую библиотеку компонентов

В сравнении

1.1 Сравнивая количество github-звезд, это может отражать популярность проектов с открытым исходным кодом со стороны

1.2 Сравнивая эстетику и интерактивный опыт компонентов, архитектуры быстрого питания могут выбирать фреймворки со схожими специфическими деловыми отношениями.

1.3 По сравнению с сообществом, относительно полное и активное сообщество будет поддерживать все больше и больше компонентов

1.4 Сравнивая стабильность и полноту API, для разработчиков надежный API не может быть важнее.
Практика + Реализация

2.1 Независимо от того, является ли это библиотекой компонентов или функциональным компонентом, практика заключается в проверке того, прост ли компонент в использовании и наиболее реалистичен ли способ использования компонента, который вы выбрали, чтобы получить наиболее реалистичную обратную связь.
матч бизнес

Выбор соответствующего технического решения в соответствии с вашим бизнесом сократит ненужные проблемы в процессе разработки, а выбор соответствующего UI-фреймворка для бизнес-ориентированного и дисплейно-ориентированного бизнеса позволит получить вдвое больший результат при вдвое меньших усилиях.
консультироваться

Это также быстрый способ проконсультироваться с лидерами отрасли.

Пример: Ван Эргоу сравнил github-звезду начальной загрузки элемента iview, количество компонентов и API компонентов, когда он выбрал библиотеку компонентов пользовательского интерфейса для архитектурного преобразования, и, наконец, проконсультировался с коллегами, которые усердно работали над внешним интерфейсом для много лет и, наконец, выбрал iview (view ui), который до сих пор неизвестен и занимается оптимизацией и улучшением архитектуры на основе пользовательского интерфейса представления и накопления компонентов.Большое количество бизнес-компонентов зависит от пользовательского интерфейса представления.Если Ван Эргоу хочет преобразовать архитектуру в элемент пользовательского интерфейса, он должен отказаться от бизнес-компонентов, основанных на представлении пользовательского интерфейса.Использование двух библиотек компонентов может привести к огромным проектам и сложному обслуживанию.Поэтому при выборе библиотеки компонентов пользовательского интерфейса тщательно обдумайте, и это очень вероятно, что вы станете партнером, который всегда будет сопровождать вас~

Как выбрать хорошие компоненты с открытым исходным кодом

В дополнение к выбору подходящей библиотеки компонентов, нам необходимо придумать наши собственные идеи для разработки таких компонентов, когда мы сталкиваемся с некоторыми компонентами, которые не доступны в библиотеке компонентов во время процесса разработки. Один из методов - найти отличный открытый источник Компоненты. Как найти, первый Baidu, перейдите в Github для поиска, вы также можете пойти в Nuggets / Zhihu и другие сообщества, чтобы найти компоненты, которые могут удовлетворить наши функции и внедрять их. Если нет компонентов, нам нужно кодировать и Реализуйте их себя как функциональные компоненты, которые мы накопили.

Итак, как выбрать компоненты, отвечающие нашим требованиям, из множества компонентов:

Сначала выберите список компонентов, отвечающих функциональным требованиям.
Во-вторых, сравнивая масштабируемость и эстетику, предпочтительнее хорошая масштабируемость и более удобный интерфейс.
Наконец, практикуйтесь, практикуйтесь, хорошие компоненты или нет, другие говорят, что это не имеет значения, поместите их в наш проект и внедрите.

🤔 Как накопить и сохранить функциональные компоненты

Помимо выбора подходящей библиотеки компонентов, в процессе разработки проекта у менеджера проекта всегда будут возникать какие-то необъяснимые идеи и какие-то странные интерактивные компоненты.В этом случае есть два решения.Первое – найти решение-замену и использовать свое решение. во-вторых, быть послушным и послушным, чтобы убедить опыт проекта. В начале работы вы обычно выбираете второй.Поработав долгое время,вы обычно выбираете первый.Если вы проработали 1-2 года и все еще находитесь во втором,то вы можете задуматься над Это.

🤺 Итак, как накапливать и поддерживать компоненты, которые мы разработали сами:

Какие компоненты стоит поддерживать

Компоненты, отвечающие следующим условиям, заслуживают обслуживания:

лучший интерактивный опыт
Сообщество не соответствует нашим потребностям
Часто используется, но не создает высокой связи для нашего конкретного бизнеса.

Идея компонентной упаковки

Если мы разделим компонент от кодирования до представления на уровень представления, уровень обработки данных и уровень API

Затем для инкапсуляции компонентов нам нужно определить слой отображения и данные для обработки, а фиксированный формат данных соответствует нашему шаблону компонента.

Если мы поместим компонент в модель MVVM (где шаблон представления VM здесь, я сделаю его своего рода абстрактным контроллером Control для нашего родительского компонента

Затем, что нам нужно сделать, чтобы инкапсулировать компонент, это представление и шаблон, а контроллер родительского компонента управляет отображением нашего компонента.

Создать документацию

Хороший компонент может заставить вас запоминать дольше, создавая документы. С документами вы можете делиться ими с другими членами команды. Например, общие библиотеки компонентов пользовательского интерфейса имеют свои собственные документы, так как же мы создаем свои собственные документы?

Содержание документа должно быть простым и понятным, пример компонента/описание параметров реквизита/события прослушивания, описание события/описание слота, если выставлены внутренние события, добавьте другие описания событий.
Шаблоны документов, во-первых, мы можем создавать свои собственные инструкции по обслуживанию документов; во-вторых, мы можем использовать проекты с открытым исходным кодом, написанные документами; один официально запущен vueVuePress(Я использовал первый, потому что в то время не знал, что существует проект с открытым исходным кодом под названием VuePress), если вам интересно, вы можете изучить его самостоятельно.

Общие прототипы для разработки компонентов Vue

model, значение привязки (не по умолчанию должно быть включено в реквизиты), событие привязки (если пользователь должен создать событие по испусканию)
props, Нам лучше инкапсулировать компонент, чтобы определить тип и значение по умолчанию реквизита и четко объяснить его, валидатор правил проверки не использовался в реальном приложении.
emitпользовательское событие
$refs, чтобы получить события внутреннего облучения
slot, слот, хороший способ для нас настроить содержимое дисплея, передачу данных,$slotsЭто те части, которые нам нужно освоить. Есть два способа записи данных, новый и старый, например

// 旧写法
<div slot="tags" slot-scope="{item, formData}">;
    // 虚拟节点实例
    <InputNumber v-model="formData[item.config.fieldId]"></InputNumber>;
</div>
// 新写法  注意：新的插槽节点必须叫template，用div不行...实际用过
<template #tags="{item, formData}">;
    // 虚拟节点实例
    <InputNumber v-model="formData[item.config.fieldId]"></InputNumber>;
</template>;

Разрабатывать бизнес-компоненты

Бизнес-компоненты, какие компоненты называются бизнес-компонентами, в процессе разработки проекта детали определенного интерфейса могут вызываться в различных местах системы.Такие компоненты необходимо инкапсулировать как общедоступные бизнес-компоненты для использования системой , Если кто-то спросит, почему бы не скопировать, то зачем использовать vue?

👀 Как определить, какие компоненты являются общедоступными?

Привычка, обычное развитие - развить привычку разделения компонентов, независимо от того, является ли компонент общественности или нет, это не ошибается!
В разработке сначала разберитесь в бизнесе.Если вы хотите быть соленой рыбой, вы ничего не можете с этим поделать.Просто полагайтесь на привычку~ Поняв бизнес, вы, естественно, будете знать, какие компоненты нужно инкапсулировать.
Компоненты, которые повторяются в нескольких местах проекта и вызываются в нескольких сценариях, могут быть инкапсулированы как общедоступные компоненты.

👀 На что следует обратить внимание при инкапсуляции бизнес-компонентов?

Место хранения каталога компонента должно быть установлено, и если есть другие члены, следует уведомить об этом
Лучше всего аннотировать использование компонентов, чтобы облегчить последующую эксплуатацию и техническое обслуживание.

Выпуск библиотеки компонентов

Зачем публиковать библиотеку компонентов?Если вы поддерживаете много-много проектов, то эти самоинкапсулированные компоненты, от которых зависят наши проекты, не могут быть скопированы в каждый проект, какой позор~ Хотя я сделал это в начале... Теперь самое общим является публикация вашего собственного пакета компонентов в репозитории npm и установка его в ваш собственный проект через npm install **

Затем стоит подумать о том, какая система, которую создает библиотека компонентов, достойна выпуска. На самом деле выпуск библиотеки компонентов определяется не количеством компонентов, а вашими мыслями.Если у вас есть эта идея абстракции компонентов и накопления компонентов, можно выпустить даже небольшой компонент или даже с открытым исходным кодом ~ например us Есть много таких небольших компонентов, которые обычно используются, такие как компоненты перетаскивания/карусели/деревья и другие отдельные компоненты с открытым исходным кодом, поэтому не важно, какой системы достигает библиотека компонентов/компонент, главное заключается в том, что мы инкапсулируем компоненты мысли

Как опубликовать собственную библиотеку компонентов, упаковать + опубликовать

Пакет: vue официальныйплагинВ этой главе кратко рассказывается о методе установки подключаемого модуля vue, то есть о том, как мы должны его инкапсулировать, кроме того, загрузите отличную библиотеку компонентов с открытым исходным кодом, такую как element ui/view ui, и обратитесь к ней. гиганты, моя библиотека компонентов относится к методу инкапсуляции представления пользовательского интерфейса
Публикация: Публикация проста, а также много информации в Интернете.Как опубликовать первый собственный пакет npm, здесь я кратко расскажу о процессе и мерах предосторожности
1. Измените несколько важных элементов конфигурации package.json.
```
  // 包的名称
  "name": "ui",
  // 版本号，第一次发布就随便了，后面更新的版本号要递增
  "version": "1.6.8",
  // 发布出去的包默认的访问文件
  "main": "src/index.js",
  // 发布的文件集合，可以发布多个文件夹
  "files": ["src"],
```
1. Вам необходимо зарегистрировать собственную учетную запись npm, выполнить npm publish для публикации, вам будет автоматически предложено ввести пароль учетной записи.
```
  npm publish
```
Таким образом, ваш пакет будет выпущен.Это очень просто.Если вы его проверите, он находится в вашем проекте, npm install ui, а затем импортируете и регистрируете в основном файле... Я не буду вдаваться в подробности.

обновление компонента

Инкапсулированные компоненты может найти только тот, кто их использует.Никто не совершенен, не говоря уже о компонентах, которые могут не использоваться.Есть также некоторые новые поддержки, которые могут быть добавлены в различных сценариях, все из которых требуют от нас обновления библиотека компонентов. Вот основные моменты, на которые следует обратить внимание в связи с обновлением.

Меры предосторожности:

Не забывайте каждый раз изменять обновленный номер версии. Обновление с тем же номером версии сообщит вам, что вы не можете его обновить, а если номер версии меньше этого, оно также сообщит вам, что вы не можете его обновить.
Добавляйте новые функции в компоненты.Если вы добавляете новые функции, вам нужно добавлять новые функции, не изменяя исходные функции.Конечно, это зависит от нашего фактического использования.Если ваши компоненты нигде не используются, просто обновите их.
В компоненте появились новые функции, не забудьте дополнить документацию
Не забудьте добавить записи обновлений

На практике в ежедневных проектах используемые компоненты не могут поддерживать определенную функцию, потому что нет специальной команды R&D.Чтобы ускорить прогресс, модификация компонентов напрямую модифицируется в пакете зависимостей node_modules.Обновление компонента библиотека;

Эпилог

Выше приведены некоторые резюме моей собственной практики в рабочем процессе.Цель состоит в том, чтобы повысить эффективность разработки и уменьшить повторяющуюся работу, при упаковке моих собственных компонентов нет хорошего руководства.Хорошая среда обслуживания, лелеять ее, если нет, я надеюсь, что эта статья будет вам полезна~ В работе вы можете максимально использовать открытый исходный код, а открытый исходный код действительно благоухает!

Нет общедоступных интерфейсных фруктов

Инкапсулируйте собственную библиотеку компонентов