В 2015 году дизайнер Фрэнсис Берриман и инженер Google Chrome Алекс Рассел придумали термин прогрессивные веб-приложения для описания приложений, использующих преимущества новых функций, поддерживаемых современными браузерами, которые позволяют пользователям обновлять веб-приложения до прогрессивных веб-приложений в своей собственной операционной системе (ОС). . Они надежные, быстрые и привлекательные. Короче говоря, это толчок к тому, чтобы привнести в Интернет естественные возможности. В настоящее время PWA становится больше, вот демонстрация веб-сайта, использующего PWA, вы можете проверить здесь.
Недавно в Google IO 2017 Адди Османи (технический менеджер Google, работающий над Chrome и веб-платформой) рассказал о pwa во многих фреймворках JavaScript, включая vuejs.
За два месяца до Google IO Адди Османи отправил выпуск в официальный репозиторий vuejs, чтобы предложить официальный шаблон vue pwa для vue-cli, после чего Эван Ю, как автор vuejs, согласился с предложением Адди. Итак, после Google IO ровно 1 июня 2017 года Адди выпустила шаблон pwa в vue-cli. Теперь вы можете создать проект pwa, набрав команду в своем терминале следующим образом.
$ vue init pwa <yourProjectName>
Шаблон был настолько мощным, что в него входило предварительное кэширование оболочки приложения + статические ресурсы (prod) сервис-воркером, предварительная загрузка сценария (асинхронный фрагмент) с использованием <link rel="preload">, манифест веб-приложения + значки, удобное для мобильных устройств мета-окно просмотра и оценка Lighthouse 90+. / 100. Но он не имеет встроенных компонентов, поэтому в этом посте я предложу некоторые из мобильных компонентов, чтобы ускорить разработку пользовательского интерфейса в прогрессивных веб-приложениях vuejs. Вот списки мобильных компонентов для создания PWA в vuejs.
- Vuetify
Vuetify.js - это структура семантических компонентов для Vue.js 2. Он нацелен на предоставление чистых, семантических и повторно используемых компонентов, которые упрощают создание вашего приложения. Vuetify.js использует шаблон проектирования Google Material Design, заимствуя реплики из других популярных фреймворков, таких как Materialize.css, Material Design Lite, Semantic UI и Bootstrap 4. Vuetify.js поставляется с хорошей документацией и компонентом полной поддержки, его очень легко изучить.
2. Mint UI
Пользовательский интерфейс Mint, созданный в стиле iOS, довольно легкий. Когда все импортировано, сжатый код занимает всего ~ 30 КБ (JS + CSS) gzip-пространства. Пользовательский интерфейс Mint поставляется с небольшим размером и полной поддержкой, но документацию так сложно понять, потому что она слишком проста, а некоторые документы были вырезаны. Наконец, хотя пользовательский интерфейс mint поддерживает английский язык в документации, но в живом примере все еще используется китайский язык, так что плохо.
3. Материал Vue
Vue Material - это легкий фреймворк, построенный в точном соответствии со спецификациями Material Design. Создавайте мощные и хорошо продуманные веб-приложения, которые поместятся на любом экране. Материал Vue имеет сходство с угловыми компонентами материала, если вы когда-либо использовали угловой материал, вы можете легко переключиться.
4. Keen UI
Keen UI разработан как облегченная библиотека пользовательского интерфейса Vue.js с простым API. Keen UI вдохновлен Материальным дизайном Google, но Keen UI не является фреймворком CSS, и поэтому вы не найдете в нем системы сеток или стилей для типографики. Вместо этого основное внимание уделяется созданию интерактивных компонентов многократного использования.
5. Вум
Vum - это сборка UI Framework с Vue.js для мобильного веб-приложения. Vum имеет функцию, полную структуру страницы (заголовок, контент, нижний колонтитул), множество мощных компонентов, простоту использования и расширения, а также высокопроизводительную анимацию CSS3. Vum - это дизайн iOS, основанный на пользовательском интерфейсе mint, но в нем меньше компонентов, чем в пользовательском интерфейсе mint.
В заключение, Vuetify является наиболее полным и мощным компонентом для приложений vuejs, поставляется с хорошей документацией и, наконец, имеет интеграцию с NUXT для создания проекта рендеринга на стороне сервера. Поэтому я сделаю vuetify своим главным приоритетом. Но если вы хотите выбрать простоту, вам следует рассмотреть Mint UI или Keen UI как свой выбор. Если вы предпочитаете дизайн на основе Android, вы можете выбрать Vuetify, а если вы предпочитаете использовать дизайн на основе iOS, вам следует перейти в пользовательский интерфейс Mint.
