Помните опыт разработки компонентов element-ui

Element Vue.js Webpack Открытый исходный код

предисловие

После ухода из старого клуба делать было нечего, учитывая прежние требования к системе управления фоном, мне нужен был компонент для предварительного просмотра картинок, но в element-ui, использованном в проекте, этого компонента не было, поэтому я начал написать этот компонент самостоятельно.

Готов к работе

Во-первых, разветвите библиотеку element-ui в свой собственный репозиторий git и клонируйте ее локально.

Сначала взгляните на структуру каталогов основного проекта element-ui.

projectDirectory

+-- build  工程脚手架配置文件
|
+-- examples 工程文档目录,也就是element-ui官网
|
+-- lib 执行打包后的文件
|
+-- packages 各个组件所在的目录,也是接下来开发的重点
|
+-- src element-ui工程中各个公用文件,包含了入口文件
|
+-- test 测试用例文件目录
|
+-- types typescript声明文件目录

Конечно, вам нужно знать спецификации разработки их команды, прежде чем начинать разработку.Во-первых, взгляните на руководство по вкладу element-ui.

qq 20180814225150

qq 20180814225245

Как только вы это узнаете, вы можете начать программировать.

Шаги развития

Подготовьте среду

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

npm i yarn -g

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

yarn

каталог сборки

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

пройти черезmake newСоздайте структуру каталогов компонентов

Насколько я знаю, имя этого make не предусмотрено пакетом npm.Основная функция этого инструмента - обеспечить удобство разработчикам C++.Под платформу windows ставить сложнее,поэтому сразу смотрим в make-файле.

qq 20180814234703

Видно, что при выполнении make new выполняется команда узла, что эквивалентно косвенному выполнению команды узла.Тогда мы можем пропустить установку make и использовать соответствующую команду напрямую.Команда узла выглядит следующим образом.

node build/bin/new.js $(filter-out $@,$(MAKECMDGOALS))

Давайте сначала посмотрим, что делает исполняемый файл new.js.

qq 20180814235028

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

node build/bin/new.js test-component '测试组件'

посмотреть, что случилось

qq 20180815000211

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

запустить проект

qq 20180815000859

Проанализировав команду, мы можем узнать, что в среде разработки вам нужно запустить команду dev.После запуска проекта откройте браузер и введитеhttp://127.0.0.1:8085для предварительного просмотра проекта.

npm run dev

qq 20180815001634

Написать код

В это время вы можете увидеть свой только что созданный компонент на странице списка компонентов, так как написать эту страницу, ответ находится в автоматически созданном файле md, откройте element/examples/docs/zh-CN/test-component .md файл, отредактируйте его здесь, вы можете увидеть изменения на веб-странице, вот пример компонентов, которые я написал ранее.

2018-08-15_003404

Содержание разделено на три части

  1. Исполняемый файл скрипта, верхняя часть картинки обёрнута скриптом скрипта
  2. Демонстрационный файл, часть, завернутая в ```html в середине картинки, код, завернутый в шаблон, в итоге будет отрендерен на странице, а часть скрипта является просто текстовым примером и выполняться не будет. скрипт в верхней части картинки выполняется.
  3. Описание опций параметров, расположенное в нижней части рисунка

Конечно, вы также можете написать код стиля, чтобы изменить стиль, отображаемый на странице после рендеринга компонента.

Поняв этот шаг, вы можете начать писать бизнес-код, откройте element/packages/test-component/src/main.vue, это файл, в котором находится бизнес-логика, цель этой статьи не в том, чтобы научить вас, как код, но это нужно для понимания процесса разработки element-ui, поэтому я не буду подробно объяснять код здесь. Полный код, который я разработал ранее, можнокликните сюдаПредставление, которое включает в себя код js, код css, тестовые примеры и файлы объявления машинописного текста.

прецедент

Совершенный проект, конечно, незаменим для тестовых случаев.На мой взгляд, значение модульного тестирования заключается в проверке бизнес-логики, которую вы сейчас разрабатываете, чтобы вы могли вовремя найти ошибки и снизить затраты на обслуживание при сопровождении проекта в будущее. element-ui использует тестовую среду mocha и библиотеку утверждений chai.Поскольку проект уже построен, стоимость обучения для разработчиков очень низкая.Необходимо только изучить использование библиотеки утверждений chai.Что касается использования chai библиотека утверждений,Смотри сюда, я не учу вас тут писать тестовые случаи, и какие функции нужно тестировать.Я думаю вы сами это поймете прочитав тестовые примеры других компонентов element-ui.

файл объявления машинописного текста

Поскольку я не очень хорошо знаю машинописный текст, после небольшого изучения ts я примерно понимаю, что функция файла объявления ts заключается в предоставлении объявления типа открытого API в библиотеке для библиотеки, написанной не на ts. Основная функция должна быть Для того, чтобы редактор мог понять открытые API в библиотеке, он предоставляет интеллектуальную подсказку.Если что-то не так, пожалуйста, укажите на это.

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

2018-08-18_154029

Как видите, каждая функция объявляет тип для входящих параметров и возвращаемого типа.

PR-код

На этом этапе код в основном написан. После прохождения теста и компиляции его можно объединить и отправить. Если вы делаете несколько коммитов, вы должны сначала использовать команду git rebase, чтобы объединить несколько коммитов в один. Вы также увидите это в руководстве по вкладу.намекать, после завершения слияния отправьте его в свой собственный репозиторий github, а затем отправьте запрос на включение, и тогда вы получите официальный ответ.Я должен похвалить официальное лицо elm здесь.Ответ будет каждый раз, и эффективность очень высока.

qq 20180818155129

Был жестоко отвергнут (〒︿〒), поэтому, когда вы решите разрабатывать компоненты element-ui, сначала подумайте, что это за компонент element-ui, который сейчас недоступен, но нужен.

заключительные замечания

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

возобновить

Имитируя элемент ui для сборки набора компонентов vue для разработки конфигурации webpack, на этой основе можно инкапсулировать нужные вам функции

GitHub.com/Ричард-Ч О…