Полное руководство по созданию библиотеки компонентов girly vue~~

Vue.js

предварительный просмотр

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

Заполните структуру каталогов проекта

После git clone для зависимостей локальной установки выполните npm run serve для разработки локальной библиотеки компонентов, npm run docs:dev для разработки официального веб-сайта библиотеки компонентов. Как правило, после того, как тест одного компонента пройден в src/demo.vue, он вносится в .vuepress/components и размещается на официальном сайте библиотеки компонентов.

├─docs               // vuepress开发目录
│  ├─.vuepress
│  │  ├─components   // 在markdown中可以使用的vue组件
│  │  ├─dist         // vuepress打包目录
│  │  │  ├─assets
│  │  │  │  ├─css
│  │  │  │  ├─img
│  │  │  │  └─js
│  │  │  ├─components
│  │  │  │  ├─basic
│  │  │  │  ├─form
│  │  │  │  ├─navigation
│  │  │  │  ├─notice
│  │  │  │  └─other
│  │  │  └─guide
│  │  │
│  │  ├─config.js    // vurepess配置修改入口,包括左边sidebar,右上方nav导航菜单,favicon等
│  │  ├─style.style  // 覆盖vuerpress默认主题样式
│  │  └─public       //公共资源入口，如favicon
│  ├─static
│  │  ├─img
│  │  └─js
│  └─views          // vuepress视图文件，格式是markdown
│      ├─components
│      │  ├─basic
│      │  ├─form
│      │  ├─navigation
│      │  ├─notice
│      │  └─other
│      ├─design
│      │  └─color
│      └─guide
├─src              // 组件库源码目录
│  ├─button
│  ├─cascader
│  ├─collapse
│  ├─container
│  ├─datepicker
│  ├─form
│  ├─icon
│  ├─layout
│  ├─notice
│  ├─plugins
│  ├─slide
│  ├─tab  
│  ├─step
│  ├─sticky
│  └─index.js    // 组件库源码组件入口文件,执行npm run build的目标文件
├─package.json   // 与npm发布相关，记录版本号，包入口文件地址

Производство библиотеки компонентов обучения получит

  • Изучите навыки упаковки компонентов, хороший дизайн интерфейса и освойте процедуры проектирования компонентов.
  • Консолидация основы js/css
  • Глубокое понимание vue

Производственный процесс

  1. Компонентный дизайн/разработка
  2. опубликовать нпм
  3. Отображение официального сайта производства

Компонентный дизайн/разработка

Часто используемые vue apis включают

  • $children : получить дочерние компоненты текущего компонента.
  • $parent: получить родительский компонент текущего компонента.
  • $options: параметры инициализации для текущего экземпляра Vue, вы можете использовать этот параметр, чтобы получить имя компонента.
  • $refs: объект, содержащий все элементы DOM и экземпляры компонентов, для которых зарегистрирован атрибут ref.
  • $el: корневой элемент DOM, используемый экземпляром Vue.
  • обеспечить и внедрить : эту пару параметров необходимо использовать вместе, чтобы позволить компоненту-предку внедрить зависимость всем своим потомкам.Обратите внимание, что он не является реактивным. Внедренный объект может быть шиной событий экземпляра vue.
  • $on: компонент прослушивает пользовательские события.
  • $emit: компонент запускает пользовательское событие.
  • .sync: синтаксический сахар. В одностороннем потоке данных родительский компонент изменяет входящие реквизиты после того, как родительский компонент прослушивает намерение дочернего компонента изменить реквизиты. Использование .sync не требует явного отслеживания пользовательских событий, инициированных внутри компонента родительским компонентом. Чтобы изменить значение, родительскому компоненту нужно только написать: x.sync="bindValue", обратите внимание, что событие, инициированное дочерним компонентом, должно быть "update:x", чтобы этот синтаксический сахар вступил в силу .
  • Обновленная функция ловушки жизненного цикла, которая вызывается после повторного рендеринга и исправления виртуального DOM из-за изменений данных, может использоваться при взаимодействии родительских и дочерних компонентов.
  • Функция ловушки жизненного цикла beforeDestoryed/ destory, все прослушиватели событий компонента будут удалены после destory. Примечание. Если вы добавляете прослушиватели событий в dom внутри компонента, вам необходимо вручную связаться с прослушивателями, которые вы добавили, когда компонент будет уничтожен. Более того, когда компонент уничтожен, элемент DOM все еще сохраняется на странице и его необходимо удалить вручную.Вы можете вызвать нативный js API, node.remove(), чтобы удалить узел DOM.

Нативный js API включает в себя:

  • target.addEventListener(type, listener[ useCapture])/removeEventListener Поскольку это является базовым для спецификации DOM2, почти все браузеры поддерживают это, и не требуется никакого специального кода совместимости между браузерами.
  • Node.contains() возвращает логическое значение, чтобы указать, является ли входящий узел потомком этого узла. Он в основном используется для мониторинга событий, чтобы определить, была ли нажата целевая область.
  • window.scrollY Получает расстояние прокрутки в вертикальном направлении документа.
  • Element​.get​Bounding​Client​Rect() возвращает размер элемента и его положение относительно области просмотра, возвращает объект, включая ширину/высоту/слева/справа/сверху/снизу. В основном используется для расчета позиционирования.

Краткое изложение технических моментов

Идея компонентного проектирования включает в себя единый центр событий потока данных/eventBus, а ядром является компонентная коммуникация.

  • Единый поток данных: изменения данных односторонние, то есть через реквизиты только родительский компонент может изменять данные, а дочерний компонент не может активно изменять реквизиты. Примером этого является компонент сворачивания/вкладки/слайда, где родительский компонент управляет выбранным значением. Идея одностороннего потока данных делает модификацию данных более продуманной, а логику — более понятной.
  • Разработка подключаемого модуля Vue: Когда следует использовать разработку подключаемого модуля?Когда компонент явно не вызывается в коде, не прописывается напрямую в шаблоне, а монтируется в документ путем вызова метода в цепочке прототипов Vue. Например, модальное модальное окно/всплывающее окно всплывающего окна. Основная идея дизайна плагина состоит в том, чтобы предоставить метод установки, который добавляет пользовательский метод X в цепочку прототипов vue, вводит компонент a в X, получает конструктор компонента Constructor через Vue.extend(a), а затем использует новый конструктор ({propsData}) Получите экземпляр компонента vm, а затем подключите экземпляр компонента к документу.
import modal from '../notice/modal'

export default {
  install (vue, options) {
    const Construtor = vue.extend(modal)

    let modalVm // 保证全局只有一个modal实例
    let lastOption
    vue.prototype.$modal = (options) => {

    if (lastOption !== JSON.stringify(options)) { //! modalVm
        modalVm = new Construtor({ propsData: options })
        modalVm.$mount()

        document.body.append(modalVm.$el)
      }
      lastOption = JSON.stringify(options)
      modalVm.isVisible = true
    }
  }
}
  • eventBus: когда использовать eventBus Когда изменения состояния требуют уведомления нескольких дочерних компонентов. Например, в компоненте вкладки, когда выбранное значение изменяется, заголовок вкладки должен воспринять изменение и заставить короткую строку подсказки перейти к выбранному тегу.Элемент вкладки должен воспринять изменение, чтобы текст стал выбранный стиль, и панель вкладок должна воспринимать изменения. При изменении отображается выбранная панель.
  • Рекурсия: используется при проектировании каскадных компонентов. Подобно функции fn, используйте setTimout(fn, millseconds) для вызова самой себя, чтобы добиться рекурсивного эффекта setInterval. Компонент может рекурсивно вызывать себя до тех пор, пока атрибут имени предоставляется внутри. Позволяет шаблону компонента вызывать себя рекурсивно. Указав параметр имени, его легко отладить, и вы можете увидеть метку компонента с дополнительной семантической информацией в консоли.
  • Медиа-запрос и гибкий макет: принцип адаптивного макета — это медиа-запрос и процентный макет, и имя класса вступает в силу, когда оно находится в пределах определенного размера; в большинстве связанных с макетом используется гибкий, который очень прост в использовании. я вижу в деталяхУчебное пособие учителя Руан Ифэн
тип компонента компоненты один поток vue разработка плагина eventBus Дом и события для манипулирования нативным js рекурсия Медиа-запросы и гибкие макеты
База кнопка кнопка - - - - - -
База значок значок - - - - - -
База сетка сетка - - - - - yes
База макет - - - - - yes
форма поле ввода ввода - - - - - -
форма каскад каскадный селектор yes - - - yes -
форма формаформа - - - - - -
форма средство выбора даты - - - yes - -
навигация вкладки - - yes - - -
навигация шаг за шагом - - - - - -
Уведомление подсказки для тостов - yes - yes - -
Уведомление всплывающее окно - - - yes - -
Уведомление модальное модальное поле - yes - yes - -
разное свернутьСвернуть панели yes - yes - - -
разное слайд-карусель yes - - - - -
разное липкий - - - - - -

Три элемента дизайна компонентов

  1. props: вы можете обратиться к Ele.me или antd. Вам нужно подумать о том, как легко использовать его и хорошо расширять с точки зрения пользователя. Как правило, вам необходимо проверить тип и действительное значение, а также установить значение по умолчанию.
  2. слот: содержимое слота распределяется. Используя слот области, слот также может получить внутренний метод компонента, так что пользовательская страница содержимого может вызывать внутренний метод компонента. Например, во всплывающем окне всплывающее окно, пользователь хочет добавить кнопку для ручного закрытия.
  3. событие: компонентное событие. С точки зрения пользователя, например, в компоненте выбора даты пользователь хочет работать, когда панель даты открывается или закрывается. Обычно это используется в интерактивных компонентах пользовательского интерфейса.

Например

Идеи разработки средства выбора даты для сложных компонентов

  1. Разработан на основе оригинального всплывающего компонента
    После нажатия на элемент A (поле ввода) может появиться элемент B (панель даты).

  2. Создать панель даты
    Создайте 7 * 6 = 42 даты, 6 строк, чтобы гарантировать, что один месяц может быть полностью отображен на панели. Наиболее удобный способ расчета здесь — использовать временные метки для вычисления временной метки первого дня месяца и дня недели, и тогда 42 даты могут быть рассчитаны за один раз. Нет необходимости считать последний месяц и следующий месяц в трех секциях, задача такого рода заключается в рассмотрении граничных условий, таких как наступление предыдущего года и следующего года. Эти 42 даты представлены в visibleDays в вычислении.

    visibleDays () {
   let { year, month } = this.display
   let defaultObj = new Date(year, month, 28)
   var curMonthFirstDay = helper.getMonthFirstDay(defaultObj)
   var curMonthFirstDayDay = helper.getDay(curMonthFirstDay) === 0 ? 7 : helper.getDay(curMonthFirstDay)
   let x = curMonthFirstDayDay - 1 // 前面需要补多少位
   var arr = []
   for (let i = 0; i < 42; i++) {
     arr.push(new Date(curMonthFirstDay.getTime() + (-x + i) * 3600 * 24 * 1000))
   }
   return arr
 },

  3. реквизит принимает значение, тип — дата
    Когда отображается дата на панели даты, добавляется вычисляемый класс, а также добавляются «сегодня», «выбранная дата», «доступно», «предыдущий месяц», «следующий месяц», чтобы различать стиль.

  4. Реализовать выбранную дату
    Скажите родительскому компоненту изменить намерение данных, чтобы позволить родительскому компоненту изменять входящие реквизиты, которые используются при использовании нашего компонента.Основные знания здесь заключаются в том, что v-модель компонента является синтаксическим сахаром, а v-model= "x" будет преобразован в: value="a" @input="a=$event". В то же время данные, отображаемые в поле ввода на панели, также должны измениться соответствующим образом, поэтому здесь используется свойство вычисляемого, такое как formattedValue в вычисленном.

     formattedValue: {
     return this.value instanceof Date ? helper.getFormatDate(this.value) : ''
 }

  5. Достичь клика в предыдущем году/месяце, в следующем году/месяце
    Нам нужно знать, какой год и месяц отображаются в данный момент.Эти данные хранятся внутри компонента, поэтому объявите объект отображения в данных.

    display: {
     year: (this.value && this.value.getFullYear()) || new Date().getFullYear(),
     month: (this.value && this.value.getMonth()) || new Date().getMonth()
   }

    Когда вы щелкаете, год/месяц экранного объекта изменяется.Поскольку visibleDays также является вычисляемым свойством, оно зависит от экранного объекта, поэтому, когда вы щелкаете предыдущий год/месяц и следующий год/месяц, отображаемая дата также изменения.

  6. год реализации
    Производство панели года, сгенерируйте 12 лет, нажмите на 1-й (12-й) год, чтобы отобразить верхние (нижние) 12 лет. Здесь вам нужно только привязать события к первому и последнему элементам DOM визуализируемого года, а прослушиватель событий передает значение элемента, по которому в данный момент щелкнули, для расчета предыдущих или следующих 12 лет. Точно так же, когда вы нажимаете на год, используйте $emit, чтобы уведомить родительский компонент об изменении значения.

  7. Месяц выбора реализации
    Непосредственно напишите 12 месяцев до смерти. Аналогичным образом, когда вы нажимаете на месяц, используйте $emit, чтобы уведомить родительский компонент об изменении значения.

  8. Добавьте кнопки [Сегодня] и [Очистить] на панели
    При нажатии используйте $emit, чтобы уведомить родительский компонент об изменении значения, новой даты() и ''

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

  10. Пользователь может изменить значение в поле ввода и должен оценить его достоверность.
    Если он действителен, $emit уведомляет родительский компонент об изменении значения. Если он недействителен, он вернется к исходному значению при потере фокуса. Здесь вам нужно использовать собственный js для изменения значения ввода. Обратите внимание, что здесь нельзя напрямую изменять formattedValue, хотя значение поля ввода привязано: value="formattedValue", но поскольку formattedValue является вычисляемым свойством и зависит от this.value, this.value не изменится, когда пользователь вводит недопустимое значение, поэтому интерфейс не будет обновляться, поэтому вам нужно вручную изменить значение value.

    setValueManually ($event) {
   if (!helper.isValidDate($event)) {
     this.$refs.inputWrapper.$refs.input.value = this.isDate(this.value) ? helper.getFormatDate(this.value) : ''
     return
   }
   this.$emit('input', new Date($event))
 }

  11. Полный
    Добавьте пользовательские события компонента во всплывающую панель даты и панель закрытия даты, то есть вызовите $emit для запуска событий showDatepicker и closeDatepicker.

опубликовать нпм

  1. Используйте режим библиотеки vue cli3 для упаковки кода, измените «сборку» в package.json: «vue-cli-service build --target lib --name sakura src/index.js» и выведите версию сборки umd после упаковка, см.vue cli. Что такое umd?Унифицированное определение модуля, совместимое с common.js (спецификация на стороне узла) / AMD (спецификация на стороне браузера) / ES6 (сторона узла не полностью поддерживается) и другими модульными решениями для обеспечения работоспособности кода. в различных средах.
    File                     Size                     Gzipped

dist/sakura.umd.min.js    13.28 kb                 8.42 kb
dist/sakura.umd.js        20.95 kb                 10.22 kb
dist/sakura.common.js     20.57 kb                 10.09 kb
dist/sakura.css           0.33 kb                  0.23 kb
  2. Укажите запись модуля «main» в package.json: «dist/sakura.umd.min.js»
     "name": "heian-sakura-ui",
  "version": "0.0.6",
  "private": false,
  "main":"dist/sakura.umd.min.js",
  "description": "an UI framework based on Vue.js",
  3. Зарегистрировать пользователя на npm
  4. Введите в командной строке, обратите внимание, что каждый выпуск должен изменить «версия»: «0.0.x» в package.json, а для «частного» должно быть установлено значение false для выпуска
    npm adduser // 提示输入注册的用户名
npm publish

Производство официального сайта

использовать вью пресс

  1. Использование в существующих проектах

    # 安装依赖
npm install -D vuepress
# 创建一个 docs 目录
mkdir docs

    Конфигурация скрипта в package.json

    {
"scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
}
}

    Затем запустите npm run docs:dev для доступа

  2. Простая конфигурация
    Создайте новый файл config.js в папке docs/.vuepress.

    module.exports = {
    base:'/sakura-ui/',
    title: 'Sakura UI',
    description: 'Inspiration from heian sakura',
    head: [
      ['link', { rel: 'icon', href: '/favicon.ico' }]
    ],
    themeConfig: {
      nav: [
        { text: 'Home', link: '/' },
        { text: 'Github', link: 'https://github.com/Firenzia/sakura-ui/' },
      ],
      sidebar: [
          {
              title: '开发指南',
              collapsable: true,
              children: [
                'views/guide/install.md',
                'views/guide/get-started.md'
              ]
            },
            {
              title: '设计',
              collapsable: true,
              children: [
                'views/design/color/',
              ]
            },
            {
              title: '组件',
              collapsable: true,
              children: [
                'views/components/basic/',
                'views/components/form/',
                'views/components/navigation/',
                'views/components/notice/',
                'views/components/other/'
              ]
            },
        ]
      }
  }

  3. Используйте компоненты vue
    Как упоминалось на официальном сайте, все файлы *.vue, найденные в .vuepress/components, будут автоматически зарегистрированы как глобальные асинхронные компоненты, на которые можно ссылаться в уценке.Я использую vue-highlightjs для подсветки кода в файлах vue.проверить здесь

  4. писать документацию
    Так как все страницы должны быть обработаны сервером Node.js при генерации статического HTML, для компонентов, которые не очень дружелюбны к SSR (например, включая пользовательские директивы), вы можете обернуть их во встроенный компонент ClientOnly и обратить внимание to потому что это ssr, функции beforeCreate и created жизненного цикла внутри компонента не могут получить доступ к API браузера/DOM и могут быть вызваны только в beforeMount и смонтированы.

    ---
title: 'Basic 基础'
sidebarDepth: 2
---
## Icon 图标
<ClientOnly>
  <sakura-icon/>
<font size=5>Attributes</font>
| 参数| 说明 | 类型 | 可选值 | 默认值 |
| :------ | ------ | ------ | ------ | ------ |
| name | 图标名称 | string |- | - |
| color | 图标颜色, 支持常见颜色和十六进制颜色 | string |- | - |

</ClientOnly>

  5. Переопределить стили темы по умолчанию
    Добавьте style.styl в .vuepress для охвата.

  6. Развернуть на гитхабе
    На официальном сайте все четко.кликните сюда. Добавьте deploy.sh в корневой каталог проекта и запустите ./deploy.sh непосредственно из командной строки под Windows, чтобы опубликовать его на страницах github.

Эпилог

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

Категории