Кращі мобільні компоненти для прогресивних веб-додатків у VueJs

Прогресивні веб-програми (Джерело: https://developers.google.com/web/progressive-web-apps/images/pwa-fast.png)

У 2015 році дизайнер Френсіс Берріман та інженер Google Chrome Алекс Рассел ввели термін "Прогресивні веб-програми", щоб описати додатки, використовуючи нові функції, підтримувані сучасними браузерами, які дозволяють користувачам оновлювати веб-додатки до прогресивних веб-додатків у рідній операційній системі (ОС) . Вони надійні, швидкі та привабливі. Коротше кажучи, це поштовх для залучення рідної сили до Інтернету. У наші дні PWA зростає, ось вітрина веб-сайту про те, що за допомогою PWA ви можете перевірити тут.

Нещодавно в Google IO 2017 Адді Османі (менеджер з інженерії в Google, що працює над Chrome & Web Platform) розповідав про pwa у багатьох рамках javascript, включаючи vuejs.

За два місяці до Google IO Адді Османі надіслав випуск до офіційного сховища vuejs з пропозицією про офіційний шаблон vue pwa для vue-cli, тоді Еван Ви як автор vuejs погодився із запропонованим Addy. Так, після Google IO, рівно 1 червня 2017 року Addy випустила шаблон pwa у vue-cli. Тепер ви можете створити проект pwa, набравши команду у своєму терміналі, як це.

$ vue init pwa 

Шаблон був настільки потужним, він включав службових служб, які попередньо кешували оболонку програми + статичні активи (prod), сценарій (асинхронний фрагмент), попереднє завантаження за допомогою , маніфест веб-додатків + favicons, мобільний мета-огляд перегляду , і оцінка маяка 90 + / 100. Але це не з вбудованими компонентами, тому в цій публікації я запропоную деякі мобільні компоненти, щоб прискорити розробку інтерфейсу в прогресивних веб-додатках vuejs. Ось переліки мобільних компонентів для створення PWA у vuejs.

  1. Вуйтефікувати

Vuetify.js - це семантичний компонент для Vue.js 2. Він має на меті забезпечити чисті, семантичні та багаторазові компоненти, які дозволять побудувати ваш додаток легким. Vuetify.js використовує схему дизайну матеріалу Material Google, беручи підказки з інших популярних рамок, таких як Materialize.css, Material Design Lite, Semantic UI та Bootstrap 4. Vuetify.js оснащений хорошою документацією та повною підтримкою, це дуже легко вивчити.

2. М’ятний інтерфейс

Базований на стилі iOS, м'ятний інтерфейс досить легкий. Коли все імпортовано, стислий код займає лише 30 кбіт (JS + CSS) простору gzip. Користувальницький інтерфейс Mint оснащений невеликим розміром і повною підтримкою, але документацію настільки важко зрозуміти, оскільки це занадто просто, а деякі документи були відрізані. Останнє, хоча mint UI має підтримку англійської мови в документації, але в прямому прикладі, який все ще використовує китайську мову, так погано.

3. Матеріал Vue

Vue Material - це легкий каркас, побудований точно відповідно до специфікацій Material Design. Створіть потужні та добре розроблені веб-програми, які можуть вміститися на кожному екрані. Матеріал Vue має схожість з кутовими компонентами матеріалу, якщо ви коли-небудь використовували кутовий матеріал, ви можете легко перемикатися.

4. Keen UI

Інтерфейс Keen розроблений як легка бібліотека інтерфейсу Vue.js з простим API. Keen UI натхненний матеріальним дизайном Google, але Keen UI - це не CSS, і як такий ви не знайдете в ньому сітчасту систему чи стилі для типографії. Натомість основна увага приділяється створенню багаторазових компонентів, які мають інтерактивність.

5. Вим

Vum - це збірка UI Framework з Vue.js для мобільного веб-сайту. Vum має функцію, повну структуру сторінки (заголовок, вміст, колонтитул), купу потужних компонентів, простий у використанні та розширенні і високопродуктивну анімацію CSS3. Vum - це iOS-дизайн, заснований на м'ятному інтерфейсі, але vum має менше компонентів, ніж м'ятний інтерфейс.

Висновок, Vuetify - це найповніший і потужний компонент для додатків vuejs, оснащений хорошою документацією, а останній також має інтеграцію з NUXT для побудови проекту надання сервера на стороні. Тож я ставлю вуетифіку як свій перший пріоритет. Але, якщо ви хочете вибрати простоту, ви повинні розглядати інтерфейс Mint або Keen UI як свій вибір. Якщо ви віддаєте перевагу дизайну на основі Android, ви можете вибрати Vuetify, а якщо ви віддасте перевагу використовувати дизайн на базі iOS, слід перейти до інтерфейсу Mint.