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

1.пва

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

• Надежность — Мгновенная загрузка и отображение даже в нестабильной сетевой среде.
• Опыт - Отзывчивый, с плавной анимацией в ответ на действия пользователя
• Sticky — как родное приложение на устройстве, с иммерсивным пользовательским интерфейсом, который пользователь может добавить на рабочий стол.

Все видят этот вопрос, как pwa достигает вышеперечисленных трех пунктов? В основном с помощью ряда передовых технологий для достижения вышеуказанных целей. Следующие в свою очередь:
1.可靠 -- 当用户打开我们站点时（从桌面 icon 或者从浏览器），通过 Service Worker 能够让用户在网络条件很差的情况下也能瞬间加载并且展现。

Service Worker — это JS-файл, написанный на JavaScript, который может проксировать запросы и управлять кешем браузера. Возвращая кешированный контент напрямую, запрос может быть выполнен мгновенно. Разработчики могут предварительно сохранять файлы ключей, удалять файлы с истекшим сроком действия и т. д., чтобы предоставить пользователям надежную работу. Для конкретного использования, пожалуйста, обратитесь к введению.Сервисные работники: ключ к PWA

2.体验 -- 为了保证首屏的加载，我们需要从设计上考虑，在内容请求完成之前，可以优先保证 App Shell 的渲染，做到和 Native App 一样的体验，App Shell 是 PWA 界面展现所需的最小资源。

Архитектура App Shell — это способ создания прогрессивных веб-приложений, которые надежно и мгновенно загружаются на ваши пользовательские экраны, подобно нативным приложениям. «Оболочки» приложений — это минимальные HTML, CSS и JavaScript, необходимые для поддержки пользовательского интерфейса, и, если они кэшируются в автономном режиме, они обеспечивают мгновенную, надежную и хорошую производительность при повторных посещениях пользователей. Это означает, что App Shell не нужно загружать из сети каждый раз, когда пользователь получает к ней доступ. Просто загрузите нужный контент из сети. . Для конкретного использования, пожалуйста, обратитесь к введению.Модель оболочки приложения

3.粘性 -- Web App Manifest 允许开发者控制 PWA 添加到桌面，允许定制桌面图标、URL等等;PWA 可以通过给用户发送离线通知，让用户回流
PWA: добавляйте приложения на рабочий стол и делитесь ими
взаимодействовать с пользователями

2. Решение по адаптации мобильного терминала

Существует множество решений по адаптации мобильных терминалов, и этот проект предлагает решение. В этой схеме есть два основных момента:

• Динамически устанавливайте размер корневого шрифта HTML и масштаб окна просмотра в зависимости от размера экрана. Для достижения этого в этом проекте используетсяhotcssЭтот инструмент, но потому, что официальная конфигурация слегка хлопотно, и нет официальных инструкций конфигурации для соответствующего проекта WebPack, здесь непосредственно скопируйте содержимое HotCss.js в каталоге SRC в Hotcss и создайте новый файл viewport.js в вашем Проект, поставьте содержимое в hotcss.js. Затем в конфигурации WebPack, в соответствии с Путью файла viewport.js, который вы построили, добавьте его в запись, как показано на рисунке:

• Используя проект проекта единицы px, аннотированный непосредственно при написании проекта, с помощью инструмента для преобразования единицы px в единицы rem. Этого легко добиться с помощью инструмента px2rem-loader. Конкретная эталонная конфигурацияvue использует px2rem

При идеальном сочетании этих двух мобильная адаптация очень удобна. По сравнению со схемами адаптации Taobao и NetEase преимущества этой схемы в основном:

• Конфигурация удобная и бесплатная, простая и понятная, не нужно отмечать несколько эскизов дизайна
• Вместо того, чтобы вручную вычислять значение rem в соответствии со значением px, вы можете напрямую записать значение px в соответствии с черновиком проекта, чтобы повысить эффективность разработки.

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

3. Резюме

В дальнейшем на основе этого шаблона будет реализован реальный проект.В настоящее время адрес этого шаблонного проектаpwa-vue-template, приветствую всех в звездочках~