Девятиэтажная платформа, начинающаяся с земли: компоненты Ma Liang

Эта статья является третьей в серии статей «Использование, проектирование и реализация системы Codeliang».

Мы предоставим серию статей, которые знакомят с реализацией Codeliang.

• Открытие: правильный способ открыть код
• Как Ма Лян разработал масштабируемую онлайн-платформу для создания веб-страниц
• Волшебная ручка открыта, как мне ее использовать

о чем мы говорим, когда говорим о компонентах

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

На следующем рисунке представлена ​​структурная схема редактора codeliang.

Как видите, ядром всего редактора является компонент, а другие конфигурации или функции обслуживают компонент.

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

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

Разработка компонента Codeliang

gods-pen

gods-pen основывается на nodejsИнструмент командной строки , предоставляет инструменты для охвата всего процесса разработки компонентов кода.

npm install gods-pen-cli -g # install gods-pen

Посмотреть справкуgods-pen help, доступно четыре подкоманды

Создать компонент

gods-pen create my-component

Введите имя и описание компонента в соответствии с подсказками и выберите категорию компонента.

Структура файла проекта выглядит следующим образом

Как видите, это типичный проект vue. Все верно, сам компонент codeliang ничем не отличается от обычного компонента vue, но на основе обычного компонента vue мы добавляем некоторые условные поля, чтобы компонент мог быть распознан и настроен редактором codeliang.

/src/index.vueЭто компонент, который вы только что создали. Основная работа по разработке компонента заключается в разработке функций для этого компонента.

/src/example.vueПриведены некоторые простые примеры кода и инструкции.

preview/Файлы в каталоге используются для предварительного просмотра разработки.Файлы в этой папке не будут упакованы в окончательный выпуск.При необходимости вы можете изменить код в нем по мере необходимости, например реквизиты тестовых компонентов.

icon.pngБудет выпущен как компонент значка с компонентом в репозиторий компонентов, вы должны заменить этот файл на значок вашего компонента.

[README.md](http://readme.md)Он представляет собой подробную инструкцию по использованию компонента, поддерживает уценку, а также будет загружен в репозиторий компонентов вместе с выпуском компонента.Описание компонента можно посмотреть в редакторе кода.

Я не знаю, замечали ли вы, что при создании компонента последним шагом является выбор «создавать ли компонент конфигурации свойств».Так называемый компонент конфигурации свойств заключается в том, что вы можете использовать этот пользовательский компонент в редакторе. для настройки свойств компонента вместо использования редактора, предоставляемого по умолчанию.editor/Под папкой находится компонент конфигурации свойств. На самом деле, независимо от того, решите ли вы создать этот компонент или нет, эта папка существует. Единственное отличие состоит в том, что когда вы выбираете «Да», веб-пакетentryконфигурация будет содержатьeditor/index.vueфайл, и наоборот, поэтому, когда вам нужен настраиваемый компонент конфигурации свойств, и вы не выбрали «Да» раньше, вwebpack.config.jsсерединаentryдобавить под полеeditor: './editor/index.vue'Вот и все.

разработка компонента

Компоненты Codeliang основаны на vue.После определенного понимания структуры vue можно легко разрабатывать компоненты codeliang.

На приведенном выше рисунке зависимости установлены, проект запущен, а компонент просто изменен, чтобы показать «привет, мир».

На рисунке ниже давайте разработаем простой компонент карты, который содержит картинку, строку текста, а картинку и текст можно настроить

До сих пор он выглядел как обычный компонент vue, принимающий два параметра.imgа такжеlineКак сказать редактору признать, что он должен предоставить разумный аргумент и управлять вводом, а затем посмотреть на его преобразование

Вы видите, мыimgпараметры иlineпараметры добавляются сeditorполе и указаноeditor.typeа такжеeditor.label,typeДля «изображения» это означает, что редактор должен предоставить селектор изображения для этого параметра,label"Картинка" означает, что параметр должен отображаться в редакторе как "Картинка", подробнееtypeПожалуйста, обратитесь к типу вводаДокументация.

Сборка и выпуск компонентов

Разработка компонента завершена, и красивая картинка готова к заменеicon.pngВ качестве значка компонента напишите файл readme компонента и подтвердите его.package.jsonНомер версии компонента (versionполе) актуально, китайское название компонента (labelполе) настроено и готово к публикации.

Если репозиторий компонентов не был настроен ранее, сначала выполните команду установки.

# 设置为官方组件仓库 godspen.ymm56.com
gods-pen config registry https://godspen.ymm56.com

Выполнение релиза (с автоматическими сборками)

gods-pen publish -t [access-token]

вaccess-tokenПожалуйста, получите его в фоновом режиме управления codeliang - пользовательские настройки.

Это выпущено успешно, используйте его

слухи

рутинаискать опыт,рутинапопросить звезду.