Проект Vue3 - давайте разработаем vue быстрее (1)

предисловие

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

Эта статья представляет собой непрерывную статью, разделенную на следующие этапы, каждый этап будет создавать статью (эта статья является первым разделом):

Введение и поток использования всего проекта, а также цели и невыполненные цели

Общий анализ vue3.0, используемого во фронтенде, и какие питы мы будем использовать позже

Как бэкэнд nodejs выполняет строгую квалификацию типа, аналогичную java springMVC
Как реализовать автоматическое развертывание кластера всего проекта на маленьком сервере

почему я это делаю

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

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

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

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

Затем, когда мы вводим библиотеку компонентов, похожую на elemntui, мы фактически используем только несколько компонентов, которые будут расширять main.js, когда все они будут импортированы Что мне делать, если одно введение слишком хлопотно? В настоящее время, разве не здорово, что мы можем напрямую выбирать нужные нам компоненты на веб-странице для создания уникального пакета elementui.

что я сделал

Цели, достигнутые проектом на данном этапе, можно показать на следующей блок-схеме.

Общая реализация относительно проста, а такие функции, как изоляция пользователей и контроль разрешений, еще не реализованы.

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

Было представлено так много, что я верю, что большие парни, которые увидят это, зайдут и захотят попробовать этот скромный маленький веб-сайт:пользовательская библиотека компонентов пользовательского интерфейса(Через 5 секунд после открытия он автоматически перейдет на главную страницу. Если у вас есть какие-либо вопросы о веб-сайте, вы можете связаться со мной. Контактная информация находится в конце статьи)

Какой проект я построил

Для начала представим весь проект в целом:

Vue3.0 для выбора front-end фреймворка, ts для общей настройки и реализации важных функций, js для файлов vue и написания API композиции
Бэкэнд использует экспресс-фреймворк, весь проект написан на ts, а общая конфигурация использует режим java srpingMVC (студенты, которые писали java, выглядят очень дружелюбно)
Docker используется для общего развертывания, swarm используется для кластеризации (почему бы не использовать k8s? используется для построения образа, срабатывает

На самом деле, будь то интерфейс или сервер, или развертывание сервера, проблем действительно много.После использования множества сложных операций они будут объяснены одна за другой медленно.

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

как используется веб-сайт

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

Ниже приводится описание использования каждой страницы:

титульная страница

Ган, я понятия не имею, что делать со скриншотами.
Я не буду говорить ничего, что видно с первого взгляда, следующие индексы соответствуют тем же функциям
Окно поиска посередине может искать компоненты непосредственно по имени, нажмите ввод или нажмите кнопку (появится ввод)

1. Создайте новый компонент (откройте страницу редактирования)

2. Откройте управление корзиной

3, тип компонента фильтра

1. Разверните компонент отображения

2. Добавьте компонент в корзину

3. Щелкните остальные, чтобы перейти на страницу редактирования компонента.

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

Библиотека компонентов в целом представляет собой простую функцию поиска по списку, и каждое маленькое поле также можно щелкнуть.Пожалуйста, попробуйте, когда вы нажмете на него.

1. Поиск компонентов по названию

2. Выберите категорию компонента

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

Слева название пакета библиотеки npm.
Над списком находится информация о версии и оператор установки.

1. Поиск компонентов (введите, чтобы открыть новое окно)

2. Создайте новый пакет npm

3. Опубликовать пакет npm

отредактируйте страницу

Самое главное редактировать страницу, там много функций

Общее отображение страницы должно отображать файл index.vue Когда мы создаем новый компонент, нам нужно добавить файл vue, а затем записать его в index.vue (Примечание: нет необходимости вводить регистрацию, он был зарегистрирован автоматически)
Вам нужно выбрать компонент для использования файла записи, который используется в качестве записи при создании npm.

1. Добавляйте шаблоны кода и редактируйте их визуально

2. Откройте нижний функциональный модуль.

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

4. Закройте блок кода, вы можете повторно войти в него, нажав на левую сторону (вы также можете вручную перетащить область отображения блока кода)

5. Откройте управление файлами, внимательно прочитайте приведенные выше советы.

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

Завершенные функции:

Выпуск пакетов npm
Компонент онлайн-редактирование, сохранение, генерация, управление
Общая страница дисплея и рабочий процесс
Добавление шаблонов кода и поддержка сторонних библиотек
Опубликовано в вашей собственной библиотеке npm (потому что пользователи еще не открыты)

Незавершенная функция:

Опубликовать историю пакетов npm
История компонента
Управление пользователями и правами
Скачать проект для управления локализацией
Содержит общие библиотеки компонентов пользовательского интерфейса, такие как element и vant.
Шаблоны кода и сторонние библиотеки идеально подходят
Загрузить файлы для добавления компонентов
Добавить сервис изображений
Логика документации для использования документации по npm и компонентам
Компоненты внутри сайта реализуют взаимную регистрацию и вызов

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

Следующая глава: Vue3.0 — это не маленькая проектная практика (2)

Основное содержание: Как использовать vue3 для разработки и управления моими проектами, а также реализовать мою собственную функцию библиотеки компонентов без какой-либо зависимости от библиотеки пользовательского интерфейса (с высокоуровневым набором методов проверки).

export default class ValidaDue {
    value: any
    ValidaObject: BindingObj

    @ValidateDec.validationFn
    private static validation: Function

    @ValidateDec.resetStatus
    private static resetStatus: Function

    @ValidateDec.registerTrigger
    private static registerTrigger: Function

    /**
     * 构造函数
     * @param {ValidaPorops} props 传入传递对象
     * @param {Function} emit 回调函数
     * @param {Element} dom 传入监听dom
     */
    constructor(props: ValidaPorops, emit: Function, dom: RefDom) {
        this.value = ref(props.modelValue);

        emit('update:modelValue', this.value);

        this.ValidaObject = reactive({
            value: this.value,
            rules: props.rules,
            check: true,
            errorMsg: ''
        });

        this.ValidaObject.validation = ValidaDue.validation(this.ValidaObject);

        this.ValidaObject.resetStatus = ValidaDue.resetStatus(this.ValidaObject);

        onMounted(() => {
            if (this.ValidaObject.validation) ValidaDue.registerTrigger(dom.value, this.ValidaObject);
        });

        const obj: any = inject('form', null);

        obj?.push(this.ValidaObject);
    }

}

адрес проекта

Запись доступа к сервису:http://39.103.204.208:9988/assemble/#/Show/index

конец

Это все содержание этой статьи.Если у вас есть какие-либо вопросы или вы хотите, чтобы я помог с разработкой, не стесняйтесь комментировать и писать мне в личные сообщения, а также вставьте мой QR-код WeChat ниже.