[Vue Advanced] Как разработать набор библиотек пользовательского интерфейса для бронзовых игроков?

Vue.js
[Vue Advanced] Как разработать набор библиотек пользовательского интерфейса для бронзовых игроков?

предисловие

возобновить:

  1. При локальном запуске проекта ange-ui вам необходимо установить vuepress глобально.В настоящее время vuepress имеет версии 0.x и 1.x (только что выпущенные, см.1.x Документация) серия, при установке последней версии vupress не удается запустить проект (спасибо@_Woo la la la поезд свистокпредлагается), этот проект будет иметь следующие проблемы при использовании 1.x vuepress:
  • Ошибка отказа в авторизации
  • Не совместим с последней версией sas-loader (7.x)
  1. Используйте 0.x, чтобы избежатьnpm install vuepress@0.14.11 -gОфициальная версия vuepress 1.x, выпущенная несколько дней назад:

Спасибо за поддержку!

Даже если это бронза, в ней должно быть закодировано сердце короля!

output

На Github есть бесчисленное множество библиотек пользовательского интерфейса для Vue, и есть много зрелых библиотек, которые продвигались и использовались. Часто мы сами разрабатываем набор UI-библиотек не потому, что хотим быть круче и конкурировать с другими (на самом деле, мы не можем этого сделать, если только вы не сражаетесь в одиночку. Ведь это не только техническая работа, но также и ручная работа), мы просто исходим из бронзы, глядя на короля или для удовлетворения внутренних потребностей.

Здесь я расскажу вам историю пошаговой самостоятельной разработки UI-библиотеки.

Оригинальный адрес:github.com/qiud...

адрес проекта:Ange UI

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

  1. Определенная внутренняя сила. Так называемая железная конструкция должна быть сложной сама по себе, и необходимо разработать компоненты с высокой степенью повторного использования.Vue.jsа такжеCSS3Есть еще определенные технические требования. Итак, каким крутым я должен быть, чтобы написать эту библиотеку пользовательского интерфейса? Это зависит от высоты реализации вашей библиотеки пользовательского интерфейса.
  2. Некоторые трюки. На Github есть много UI-библиотек о Vue: Six Meridians Excalibur и Dugu Nine Swords. Что бы люди ни писали, мы просто будем следить. У кого-то может быть большое мнение, разве это не имитация? Здесь мы должны торжественно заявить, что мы не подражаем, мы просто приближаемся к эталону. Потому что ерунда - это стандарт.

Необходимая архитектура библиотек пользовательского интерфейса

Зрелая библиотека пользовательского интерфейса с открытым исходным кодом обычно имеет следующие характеристики:

  • Содержит исходный код компонента
  • Полная документация
  • Соответствует стандартам проверки Eslint
  • Комплексное модульное тестирование
  • Полная экология строительства

В результате их структура каталогов также проявляется в двух основных формах:

image
&
image
Немного похоже, здесь мы развиваемся по первой архитектуре.

  • build: сохранить файл конфигурации сборки
  • документы: официальная документация
  • src: исходный код компонента
  • test: модульный тестовый пример (здесь не рассматривается)
  • eslintrc: стандарт спецификации разработки, основанный на eslint-plugin-vue.

Создание среды разработки пользовательского интерфейса

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

Приступим к сборке конфигурации упаковки (по сути, это конструкция на основе вебпака, которую мы делали давно, а сейчас много используется cli, и конфигурация не будет писаться, код): Сначала создайте в корневом каталогеconfigа такжеbuildпапку, а затем создайте новые файлы в двух каталогах следующим образом:

image

  • build-lib.js: скрипт, выполняемый узлом, считывает и выполняет конфигурацию библиотеки для сборки;
  • webpack.base.conf.js: общедоступная конфигурация сборки;
  • webpack.lib.conf.js: Конфигурация для упаковки компонентов пользовательского интерфейса;
  • index.js: информация о конфигурации переменных;
  • prod.env.js: объявляет текущую среду сборки как конфигурацию производственной среды;

Разве это не означает, что есть только один упакованный файл конфигурации? Почему так много файлов? Правильно, хоть мы и любители, но хотим быть и профессионалами, верно (хорошо для расширенного управления конфигурацией)!

мы видимconfig/index.jsесть то, что?

image
Кажется, аннотация тоже очень понятная? Эти определения в конечном итоге применяются кwebpack.lib.conf.jsсередина.

посмотри сноваbuild/webpack.base.conf.jsКонфигурация ключа внутри:

image
в базовой комплектацииentryа такжеoutputБудетwebpack.lib.conf.jsперезаписать;rulesОпределите серию правил преобразования загрузчика, где здесь определена проверка eslint.eslint-loader.

последний взглядbuild/webpack.lib.conf.jsКонфигурация:

image
Lib внутри LIBentryПравило - переходить к разным файлам ввода по переданным значениям параметров (компонентов), у одного только один./src/index.js, это входной файл для внешней регистрации пользовательского интерфейса (это позволяет нам ввести весь пользовательский интерфейс), другой файл является регистрационным входным файлом для каждого компонента пользовательского интерфейса (это позволяет нам вводить компоненты по мере необходимости);

Позвольте мне сначала дать вам карту, чтобы интуитивно почувствовать структуру каталогов исходного кода:

image

Какой из них вы взяли, когда действительно упаковывали его? Правда идти! существуетbuild-lib.js, упаковка выполняется три раза, а выход упаковки следующий:

image
Выходные данные первого пакета сжаты (сожмите файл таблицы стилей CSS, вы можете видеть, что выходной файл имеет суффикс min), второй раз несжатый, а последний раз упаковать каждый компонент отдельно. (PS: Очень хочу пометить картинку красным кружком, но аппарат не позволяет... Несколько раз подавился... Можете порекомендовать полезный инструмент для разметки скриншотов под системой Ubuntu? )

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

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

import Ange from 'ange-ui'
Vue.use(Ange)

под любопытствомVue.useЧто ты делаешь? На самом деле это регистрация/установка плагина.Согласно внутреннему определению использования, он регистрирует плагин, вызывая метод установки.Тогда Анж должен бытьFunction(будет использоваться какinstallвызов метода) или содержащийinstallметодObject.

Я понимаю почему, ноinstallЧто написано в методе?

Представьте, что мы хотим иметь возможность ссылаться на этот плагин в любом месте проекта, поэтому каждый из наших компонентов должен быть зарегистрирован глобально? Например, зарегистрируйте компонент глобально следующим образом:

Vue.component('pagination', pagination)

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

Настроить структуру каталогов

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

image
существуетindex.js в каталоге srcопределено в файлеinstallметод:

import './scss/ange.scss'  // 引入组件样式表，也可以让用户在使用的时候自行引入
import components from './components'

function install(Vue, opts = {}) {
    Object.values(components).forEach((each) => {
        Vue.component(each.name, each)
    })
}

if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default {
    version: '1.0.0',
    install,
    ...components
}

Основная логика установки заключается в циклической глобальной регистрации всех компонентов. каталог компонентовindex.jsОн состоит в том, чтобы отображать объекты компонентов один за другим, а затем каждый компонент также имеетindex.js, его роль заключается в внедрении метода установки для текущего компонента. Конечно,installВнутри компонента зарегистрирован глобально, поэтому мы можем ссылаться на компоненты по требованию.

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

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

<template>
    <component :is="'button'"></component>
</template>

<script>
export default {
    name: 'ag-button',
    props: {}
}
</script>

компонент является встроенным компонентом vue,isпараметр установлен наbutton, указывая, что окончательный отображаемый HTML-кодbuttonметка, мы также можем использовать метку кнопки напрямую,Но наш компонент-кнопка — это не обязательно кнопка, это может быть и тег, для лучшего расширения здесь используется компонент.

Объявление параметров компонента

export default {
    name: 'ag-button',
    props: {
        // 按钮类别
        primary: Boolean,
        secondary: Boolean,
        dashed: Boolean,
        link: Boolean,
        // 按钮状态
        color: {
            type: String,
            validator (val) {
                return new Set(['success', 'warn', 'danger']).has(val)
            }
        },
        // 按钮尺寸
        size: {
            type: String,
            validator (val) {
                return new Set(['large', 'normal', 'small']).has(val)
            }
        },
        // 图标按钮
        icon: String,
        // 圆形按钮（一般结合图标按钮使用）
        circle: Boolean,
        // 外链按钮
        external: Boolean,
        // 异步按钮
        loading: Boolean
    }
}

Улучшение шаблонов компонентов

<template>
    <component
        :is="tag"
        class="ange-btn"
        :class="[ btnSize, color, {
            'default': isDefault,
            'primary': primary,
            'secondary': secondary,
            'dashed': dashed,
            'link': link,
            'icon': icon,
            'circle': circle
        }]"
        @click="$emit('click', $event)"
        :disabled="loading">
        <span class="ange-btn-content">
            <!-- 图标按钮依赖 ag-icon 组件 -->
            <ag-icon
                v-if="icon"
                :icon="icon" />
            <slot />  <!-- 插槽接收按钮文本 -->
        </span>
    </component>
</template>

<script>
export default {
    // ...
    computed: {
        tag () {
            return this.external ? 'a' : 'button'
        },
        isDefault() {
            const type = [this.primary, this.secondary, this.dashed, this.link]
            return type.every((each) => !each)
        },
        btnSize() {
            return this.size || 'normal'
        }
    }
}
</script>

Остальная часть работы заключается в написании таблицы стилей.Вы можете написать ее непосредственно в файле vue или создать новую таблицу стилей _scss/scss_.

Применение компонентов и эффект(Посмотреть онлайн)

image

Выше был разработан и выполнен компонент кнопки.node build-lib.jsилиnpm run build:lib(теперь package.json объявляет скрипт) вы можете упаковать эту структуру пользовательского интерфейса перед ее публикацией на платформе npm (если хотите...)

написать документ

Посмотреть онлайнAnge UI DocsНаписание хорошего документа — неотъемлемая часть библиотеки.Процесс написания можно протестировать и проверить с помощью фактического применения каждого компонента. Как было сказано ранее, наши документы должны быть разработаны на основе vuepress, и лаконичный метод написания Markdown очень удобен. здесь одингидОн может вам очень хорошо помочь, в нем рассказывается, как построить архитектуру, написать конфигурацию и развернуть ее онлайн, или обратитесь ко мне.складКонфигурация.

Предположениеdocs/views/button.mdтвоеbuttonКак вы ссылаетесь на свой компонент на странице документации компонента?

image
Пользовательский интерфейс Ange имеет встроенные таблицы стилей, которые можно импортировать сюда или импортировать только по мере необходимости.buttonКомпоненты:

import '@scss/ange.scss'
import Button from '@component/button'
Vue.use(Button)

На данный момент документ написан!

Последний последний, согласноvuepress docРазверните в свой репозиторий github и все!

Эта статья через компонент кнопкиот 0 до 1Разработка фреймворка Vue UI объясняется простыми словами: чем глубже вы понимаете Vue.js, тем сложнее функция компонента и тем более продвинутое использование вы будете использовать. Благодаря самостоятельно разработанной структуре пользовательского интерфейса мы также многого добились:

  • Пересмотр конфигурации веб-пакета
  • Глубокое понимание внутреннего механизма Vue, освоение более продвинутого использования Vue.
  • Закрепить основу js и css3
  • Овладение парадигмами программирования и шаблонами проектирования

PS: CSS на самом деле является очень важной частью разработки пользовательского интерфейса, и каждый может разрабатывать компоненты в соответствии со своим стилем. Вот несколько отличных сайтов для подбора цветов:

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

The end.

Категории