Инструмент прототипирования для быстрого воплощения ваших идей Vue 3 в жизнь.

OverVue – это инструмент для создания прототипов Vue, который был первоначально запущен в 2019 году. Он позволяет инженерам быстро и легко создавать проекты прототипов и экспортировать шаблонный код для использования в своей любимой IDE. С тех пор OverVue прошел четыре итерации и использовался во всем сообществе разработчиков интерфейсов, получив на момент написания этой статьи более 2100 звезд на GitHub. Однако его основные зависимости устарели и застряли в прошлом. Чтобы сохранить актуальность OverVue в мире открытого исходного кода, ему потребовались некоторые серьезные обновления, не последним из которых был Vue 3.

Vue 3 — это новейшая крупная версия фреймворка, которая была официально запущена в сентябре 2020 года. Теперь, когда она становится все более популярной, наша команда увидела прекрасную возможность полностью переработать OverVue. Встречайте OverVue 5.0: самый популярный в отрасли (а теперь и самый современный) инструмент прототипирования Vue с открытым исходным кодом.

Итак, что нового в Vue 3?

API композиции

По мере роста компонентов общая проблема заключается в том, что они становятся менее читабельными и, следовательно, менее удобными в сопровождении. Чтобы решить эту проблему, в Vue 3 появился Composition API. В настоящее время функции (или логические проблемы) организованы по параметрам компонентов. В приведенном ниже примере логика функций поиска и сортировки находится в объекте данных, а также в методах. В более крупных компонентах для функций характерно иметь соответствующий код, разбитый на другие параметры, такие как реквизиты, вычисляемые методы и методы жизненного цикла.

Используя Composition API, мы можем сделать компоненты более удобочитаемыми, объединив наш код поиска и сортировки. Все начинается с метода настройки. В Vue 3 вы пишете так называемые функции композиции, чтобы хранить всю логику для каждой функции. Затем они вызываются из метода установки, и вы получаете ту же функциональность, что и в Vue 2.x.

Это только одна из многих новых функций, которые предоставляет Composition API, дополнительную информацию можно найти в Документации по Vue.

Встроенная поддержка TypeScript

Хотя предыдущие версии Vue можно было модифицировать для использования с TypeScript, поддержка не была полноценной и могла вызвать множество проблем. В Vue 3 TypeScript поддерживается «из коробки» и рассматривается как первоклассный гражданин. По мере роста приложений они могут легко использовать преимущества статической типизации для предотвращения ошибок во время выполнения.

‹телепорт› Компонент

Портал — это концепция, известная в мире React, и эта функция была создана под тем же именем в бета-версиях Vue 3. При запуске название было изменено на teleport. Телепорт очень удобен при работе с модальными окнами или другими условно отображаемыми компонентами, которые разработчик хочет отобразить в рамках текущей иерархии. В приведенном ниже примере, когда modalOpen оценивается как true, компонент PopUp будет отображаться в div с идентификатором «teleport-target».

<!-- In some nested Vue component --> 
<NestedComponent>
   <teleport to="#teleport-target">
    <div v-if="modalOpen">
     <PopUp />
    </div>
   </teleport>
 </NestedComponent> 
<!-- before closing body tag in index.html --> 
<div id="teleport-target"></div>

Источник фрагмента кода: VueSchool

Фрагменты

Благодаря фрагментам в Vue 3 шаблоны теперь могут иметь несколько корневых компонентов.

Vue 2.x

<!-- Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>Native TypeScript Support

Vue 3.x

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

Другие обновления в OverVue 5.0

Инструменты разработчика Vue 6.0

Vue Devtools был обновлен до версии 6.0 и, используя платформу Quasar, теперь запускается автоматически, когда приложение запускается в режиме разработки. Приведенное ниже окно удаленного инструмента разработки мгновенно откроется и подключится к экземпляру приложения для упрощения отладки!

Зависимости

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

  • Квазар 1.0 в Квазар 2.4.2
  • Vuex 3 — Vuex 4.0.2
  • Электрон с 5.0.13 по Электрон 16.0.4

Следующие шаги

Теперь, когда OverVue был обновлен до Vue 3, он готов к дальнейшим итерациям. Мы хотели бы увидеть возможность экспорта TypeScript, переписывание приложения на TypeScript (включая миграцию Vuex на Pinia) и возможность экспортировать проекты с соответствующими тестами. Если вы хотите внести свой вклад, перейдите по ссылкам ниже и не забудьте отметить и разветвить наш репозиторий на GitHub!

Сайт | Гитхаб | ЛинкедИн

Спасибо!

Огромное спасибо разработчикам OverVue, которые работали до нас: Дину Охаши, Дину Чангу, Дрю Нгуену, Джозефу Эйзеле, Александру Хавасу, Керианн Лин, Джоджу Алаоде, Эллисон Пратт, Фаразу Моаллеми, Шону Грейсу, Терри Тилли, Николас Скиллачи, Алекс Лу, Джеффри Сул, Кеннет Ли, Райан Бендер и Сонни Нгуен.

Команда OverVue 5.0:

Габриэлла Кохаби — LinkedIn/GitHub

Росс Ламерсон — LinkedIn/GitHub

Шэнон Ли — LinkedIn/GitHub

Зоу МакГрат — LinkedIn/GitHub

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.