Вы изучили структуру приложения этого vue3?

Предисловие: Некоторое время назад начали внедряться приложения, разработанные на основе vue3, поэтому обратите внимание на некоторые open source проекты вокруг vue3 в сообществе. Случайно увидел WeBankWeBankFinTechкоманда с открытым исходным кодом Fes.jsрешение. В дизайнерской идее этой схемы особенности быстрого старта, простоты использования и высокой масштабируемости побудили меня к дальнейшему изучению проекта.

1. Начальный этап нового проекта

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

• Как унифицировать управление полномочиями?

• Как единообразно инкапсулировать библиотеку запросов на основе Axios (унификация повторяющихся запросов, регулирование запросов, обработка исключений ошибок и т. д.)

• Как внедрить в систему микроинтерфейса в качестве подприложения (при условии, что оно основано на qiankun)

• Как поделиться ответными данными?

• Как управлять информацией о конфигурации?

1.1 Вы можете сделать это

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

не видел этогоFes.jsДо этого решения для вышеуказанной проблемы мое решение было

• Инкапсуляция путем поддержки общедоступной библиотеки инструментов, такой как вторичная инкапсуляция axios
• Разработайте простой скаффолд, интегрируйте эти штуки в шаблон, а потом тяните его через командную строку
• непосредственно черезvue-cliСоздавайте шаблоны, а затем настраивайте модификации конфигурации и т. д., просто используйте документы, инструменты и шаблоны для расширения возможностей.

Но есть ли лучшее решение?

Картинка цитата из статьи«Лучшие методы исследований и разработок Ant Front-end»

1.2 Другие решения - фреймворк (плагин)

Дети, которые изучают реакцию, знают, что в сообществе реагирования есть подключаемый интерфейсный фреймворк. UmiJS, которого нет в мире vue, и чем мы поделимся дальше Fes.js,就是vue中的 UmiJS, Многие функции Fes.js заимствованы из UmiJS. UmiJS имеет встроенную маршрутизацию, построение, развертывание, тестирование и т. д., а также поддерживает плагины и наборы плагинов для удовлетворения иерархических требований функций и вертикальных доменов.

По сути, это более удобная и быстрая разработка средних и фоновых приложений. Ядром фреймворка является插件管理, предоставляемые встроенные плагины инкапсулируют много логики, связанной со строительством, и имеют богатую экологию плагинов, которую необходимо обрабатывать в бизнесе.脏活累活Положитесь на плагины для решения, и пользователям нужно только简单配置или按照规范просто используйте

Вы даже можете объединять плагины в наборы плагинов, как в Babel.plugin 和 preset, или Эслинтаrule 和 config. Встречайте бизнес разных случаев с плагинами и наборами плагинов

Расширения через плагиныimport from UmiJS Способность, например, похожа на картинку ниже, очень похожа?vue 3изComposition APIдизайн

Дальнейшее чтение:

• Некоторое предварительное понимание системы плагинов UmiJS

2. Fes.js

Официальное введение: Fes.js — это простое в использовании решение для внешнего интерфейса. Fes.js 2.0 основан на Vue 3.0 и маршрутизации, одновременно поддерживает маршрутизацию конфигурации и маршрутизацию по соглашению и соответствующим образом расширяет функции. Он соответствует полной системе подключаемых модулей, охватывающей жизненные циклы времени компиляции и времени выполнения, и поддерживает различные функциональные расширения и бизнес-потребности.

2.1 Поддержка условной маршрутизации

Что такое договорная маршрутизация? Обычная маршрутизация также называется文件路由, то есть не требуется никакой ручной настройки, файловая система маршрутизируется, и все больше и больше фреймворков сейчас поддерживают обычную маршрутизацию, включая упомянутый выше UmiJS и SSR'ы.nuxtПодождите, сэкономьте нам время на ручной настройке маршрутизации. Дополнительные сведения о настройке маршрутизации на fes см.документация по маршрутизации

2.2 поддержки плагина

По сути, плагин являетсяnpmпакет для расширения функций Fes.js с помощью плагинов.В настоящее время Fes.js имеет несколько плагинов с открытым исходным кодом. И плагин может управлять временем компиляции и временем выполнения проекта.Документация по плагину

Адрес источника плагина链接. fesjs также поддерживает разработчиков自定义插件, подробности см.插件化开发文档

Одноклассник Бинбин: Что значит поддерживать время компиляции и время выполнения?

Это можно понять так: Если это конфигурация во время компиляции, то есть при упаковке, соответствующая конструкция кода завершается в соответствии с конфигурацией, а конфигурация во время выполнения - это когда код выполняется в браузере, он будет основываться на конфигурации чтения.Обработка, если вам интересно, вы можете глубоко понять исходный код плагина fesjs и научиться выполнять обработку в соответствии со временем компиляции и временем выполненияссылка на исходный код fes-plugin-access

2.3 Как используется Fes.js

Fes.js предоставляет инструменты командной строкиcreate-fes-app, Создайте шаблон проекта непосредственно через эту команду после глобальной установки, структура проекта выглядит следующим образом

затем бегиnpm run devВы можете начать свой путь в Фес, как показано ниже.

2.4 Почему стоит выбрать Fes.js

Как и vue-cli, он может решать только основные задачи, такие как разработка, сборка и упаковка в нашем проекте, в то время как Fes.js может напрямую решать большинство бизнес-сценариев обычных промежуточных и фоновых приложений, включая следующие:

• Настраиваемый макет: решайте проблемы конфигурации, такие как макет, меню, навигация и т. д., аналогично механизму с низким кодом.
• Контроль разрешений: реализуйте комплексное управление разрешениями сайта с помощью встроенного подключаемого модуля доступа.
• Инкапсуляция библиотеки запросов: с помощью встроенного подключаемого модуля запросов, встроенной защиты от дублирования запросов, регулирования запросов, обработки ошибок и других функций.
• Интеграция с микроинтерфейсом: быстрая интеграция в систему микроинтерфейса с помощью встроенного подключаемого модуля qiankun.

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

3. Обзор vue 3

3.1 Новые функции

По сравнению с vue2.0, vue3.0 изменил несколько основных моментов, включая следующие:

• 性能提升: с основными браузерамиes6служба поддержки,es moduleЭто стало решением, которое действительно может быть реализовано и дополнительно оптимизирует производительность Vue.

• 支持typescript: ТС это类型检查Механизмы, препятствующие внесению неожиданных ошибок во время рефакторинга

• 框架体积变小: После оптимизации объема кадра, с одной стороны, это из-за введенияComposition APIдизайн при поддержкеtree-shakingВстряхивание дерева, введение API-интерфейсов модулей по мере необходимости, в конечном итоге избавит от бесполезных модулей, сделав окончательный упакованный пакет меньше по размеру.

• 更优的虚拟Dom方案实现: добавлен тегflag, виртуальный DOM Vue2 будет повторно сравнивать весь шаблон, независимо от того, насколько сильно он изменится, в то время как vue3 помечает динамический узел DOM.PatchFlag, просто отследите узел с помощью PatchFlag. А когда существует много уровней вложенности узлов, динамические узлы напрямую связаны с корневым узлом, то есть когдаdiff算法При достижении корневого узла dom динамически изменяющийся узел будет расположен непосредственно, а статический узел dom не будет пройден, что повысит эффективность.

• 引入Proxy特性: заменяет vue2Object.definePropertyДля достижения двусторонней привязки из-за собственных ограничений он может только захватить свойства объекта.Если значение свойства объекта является объектом, ему необходимо выполнить глубокий обход, чтобы добиться захвата, и он не может полностью захватить весь объект в прямом смысле.Прокси может полностью захватить весь объект

3.2 Об API композиции

vue3 заменяет исходный vue2 черезOptions APIЧтобы создать дизайн компонентов (вынуждая нас наслаивать код) и приняв дизайн, аналогичный React Hooks, с помощью компонуемого, малонавязчивого функционального API, мы делаем его более гибким для создания компонентов. Официальное определение:一组基于功能的附加API，可以灵活地组合组件逻辑

Из сравнения приведенного выше рисунка видно, чтоComposition APIа такжеOptions APIРазница в сборке компонентов, понятно, что сборка на основе Composition API будет понятнее. Мы найдем несколько разных точек vue3:

• Vue3 предоставляет два数据响应式API монитораrefа такжеreactive, разница между ними заключается в том, что reactive в основном используется для определения сложных типов данных, таких как объекты, а ref используется для определения базовых типов, таких как строки.
• vue3 предоставляетsetup(props, context)метод, который является необходимой записью для использования Composition API, эквивалентнойvue2.xВыполняется перед созданием после жизненного цикла beforeCreate, в методеprops参数Он используется для получения реквизитов, определенных в компоненте.Следует отметить, что реквизиты реагируют и не могут быть уничтожены с помощью es6 (это устранит отзывчивость реквизита).Если вам нужно отслеживать ответ, вам нужно использоватьwacth. а такжеcontext参数для получения атрибутов, получения слотов или отправки событий, таких какcontext.emit, потому что в настройках нетthisКонтекст, вы можете использовать контекст только для получения контекста горы

Больше практики о vue3 будет обновляться позже, этот выпуск в основном представляет собой краткий обзор.

Прошлые популярные статьи📖:

• Разработать большой экран визуальных данных от 0 до 1 (включено)
• Разработайте большой экран визуальных данных от 0 до 1 (ниже)
• Построение интерфейсной системы знаний Шуцзяна (часть 1)
• Построение внешней системы знаний Шуцзяна (ниже)
• Расскажите об инструментах ежедневной совместной работы для фронтенд-разработки
• Конфигурацию Babel тупо не могу понять
• Как лучше управлять интерфейсом API
• Что интервьюер спросил вас об узле
• передовой инжиниринг
• Вы изучили BFF и Serverless?
• Развертывание интерфейсной эксплуатации и обслуживания

Привет, я 🌲 Tree Sauce, пожалуйста, выпей 🍵 Запомни три раза подряд~

1. Не забудьте поставить лайк после прочтения, есть 👍 и мотивация

2. Обратите внимание на интересные вещи в интерфейсе официального аккаунта и пообщайтесь с вами об интересных вещах в интерфейсе.

3. Статья попала в Github frontendThings благодаря Star✨