Обзор Vue
Если вы новичок в разработке Vue, вы, возможно, слышали много жаргона, такого как одностраничное приложение, асинхронные компоненты, рендеринг на стороне сервера и т. д., или некоторые инструменты и библиотеки, связанные с Vue, такие как Vuex, Webpack, Vue CLI. и Нуст.
Так что же такое Vue и что он делает?
Vue.js — это прогрессивный фреймворк для создания пользовательских интерфейсов. Он в основном используется для быстрого создания клиентских интерфейсов. В отличие от других крупномасштабных интерфейсных фреймворков, Vue предназначен для поэтапного применения снизу вверх.
По сравнению с Angular.js основная библиотека Vue ориентирована только на уровень представления, который не только прост в использовании, но и легко интегрируется со сторонними библиотеками или существующими проектами. проекты. С другой стороны, в сочетании с современными наборами инструментов и различными вспомогательными библиотеками Vue также полностью способен работать со сложными одностраничными приложениями.
Сам по себе Vue.js — это интерфейсная библиотека для создания пользовательских интерфейсов, обладающая многими преимуществами реактивного программирования и компонентизации. Так называемое реактивное программирование — это парадигма программирования, ориентированная на поток данных и распространение изменений, которая может легко выражать статический или динамический поток данных на языках программирования, а соответствующая вычислительная модель будет автоматически изменять значение через распространение потока данных.
Реактивное программирование широко используется во фронтенд-разработке, и его тень можно увидеть в большинстве фронтенд-фреймворков MVX. По сравнению с Angular.js и React.js, Vue.js не вводит слишком много новых концепций, а упрощает существующие концепции. Кроме того, Vue.js опирается на идею компонентизации React.js, что упрощает разработку приложений и действительно реализует цель модульной разработки.
По сравнению с Angular.js и React.js, Vue.js всегда хвалили за легкость и простоту использования. Режим разработки MVVM также освобождает интерфейс от традиционных операций с DOM: разработчикам не нужно тратить время на обслуживание представлений и данных, а нужно только обращать внимание на изменения в данных. Кроме того, уровень рендеринга Vue основан на облегченной реализации виртуальной DOM, которая в большинстве сценариев повышает скорость инициализации и потребление памяти в 2-4 раза. В то же время все больше и больше мобильных клиентов стали поддерживать использование Vue.js для разработки.Считается, что станет возможным использовать Vue.js для создания трехтерминальных согласованных Native-приложений.
Как новый интерфейсный фреймворк, Vue.js в значительной степени опирается на превосходные интерфейсные фреймворки, такие как Angular.js и React.js. Что касается поддержки версий, Vue.js отказался от поддержки IE8 и имеет определенные требования к поддержке мобильных устройств, что означает, что при использовании Vue.js для мобильной кроссплатформенной разработки требуется поддержка Android 4.2+ и iOS 7+.
Если проект, над которым работает читатель, представляет собой проект с разделением интерфейса и сервера или предпринимательский проект, и он хочет использовать Vue.js для создания нативного опыта, совместимого с тремя сторонами, тогда Vue.js будет быть хорошим выбором.
Принципиальная схема Vue
Как говорится, за один раз не потолстеешь. Новичку, как выучить Vue? Как вам еще нужно улучшить? Какие дополнительные знания необходимы? Чтобы ответить на эти вопросы, давайте взглянем на карту навыков Vue.
JavaScript и веб-основы
Vue — это фреймворк JavaScript для создания пользовательских веб-интерфейсов. Прежде чем начать использовать Vue, вы должны знать основы JavaScript и веб-разработки.
А также необходимо овладеть некоторыми базовыми знаниями об экосистеме Vue.js, включая базовую библиотеку Vue, Vue Router и Vuex.
Основные функции Vue
По сути, Vue — это технологическая среда JavaScript для синхронизации веб-страниц. Ключевыми функциями для достижения этого являются реактивные данные и функции шаблона, такие как директивы и интерполяция.
Чтобы создать приложение Vue, вам также необходимо знать, как установить Vue на веб-страницу, понять жизненный цикл экземпляра Vue и т. д.
компоненты
Во-вторых, компоненты Vue — это автономные повторно используемые элементы пользовательского интерфейса. Поэтому вам нужно понимать, как объявлять компоненты и как взаимодействовать с ними через пропсы и события.
Также важно понимать, как составлять компоненты, так как это имеет решающее значение для создания надежных масштабируемых приложений с помощью Vue.
одностраничное приложение
Архитектура одностраничного приложения (SPA) обеспечивает ту же функциональность, что и традиционный многостраничный веб-сайт с одной веб-страницей, без перезагрузки и перестроения страницы каждый раз, когда пользователь запускает навигацию.
После создания «страниц» в виде компонентов Vue каждая «страница» может быть сопоставлена с уникальным путем с помощью Vue Router, инструмента для создания SPA, поддерживаемого командой Vue.
государственное управление
По мере того как приложение становится больше, а проект усложняется, на странице SPA появляется много компонентов, управлять глобальным состоянием становится чрезвычайно сложно, а компонентов становится все больше и больше по мере добавления обработчиков и прослушивателей событий.
В это время появляется специальный режим под названием Flux, который может хранить данные в предсказуемом и стабильном центральном хранилище. Библиотека Vuex, поддерживаемая командой Vue, помогает реализовать Flux в приложениях Vue.js.
Вью в действии
строительные леса
Если вы часто создаете приложения Vue, вы обнаружите, что почти каждый проект должен предоставлять конфигурацию, настройки и инструменты разработчика.
Команда Vue поддерживает инструмент под названием Vue CLI, который позволяет за считанные минуты развернуть мощную среду разработки Vue.
полное приложение стека
В реальной разработке реальные приложения Vue обычно представляют собой рендеринг пользовательского интерфейса на основе данных. Данные обычно поступают из API, разработанных с использованием Node, Laravel, Rails, Django или других серверных фреймворков.
Эти данные могут быть данными, предоставляемыми традиционными REST API или GraphQL, или данными в реальном времени, предоставляемыми через веб-сокеты.
Итак, вам также необходимо понимать общие шаблоны проектирования для интеграции Vue в полный стек, а также для обеспечения безопасности пользовательских данных в приложениях Vue.
тестовое задание
Если вы хотите разрабатывать поддерживаемые и стабильные приложения Vue, вам также необходимо их протестировать (например, модульное тестирование, тестирование моментальных снимков, тестирование черного ящика и т. д.).
В приложении Vue можно использовать модульное тестирование, чтобы убедиться, что ваши компоненты обеспечивают одинаковый вывод (т. е. повторно отображаемый HTML или генерируемые события) для заданного ввода (т. е. реквизита или пользовательского ввода).
Команда Vue поддерживает инструмент под названием Vue Test Utils для тестирования отдельных компонентов Vue.
оптимизация
Когда вы развертываете ваше приложение на удаленный сервер, и пользователи получают доступ к нему в медленном соединении, он не так быстрый и эффективный, поскольку вы проверите его в среде разработки.
Чтобы оптимизировать приложения Vue, мы можем использовать различные методы, в том числе рендеринг на стороне сервера, при котором приложение Vue выполняется на стороне сервера, а затем выводится HTML-страница пользователю. Другие методы оптимизации также включают использование асинхронных компонентов и функций рендеринга.
Инструменты разработки
Как говорится, заточка ножей не режет дерево по ошибке, а написание кода — то же самое.Освоение инструментов разработки и строительных лесов Vue может значительно повысить эффективность разработки.
JavaScript и Бабель
Чтобы получить расширенные возможности разработки Vue и воспользоваться преимуществами новых функций браузера, вы можете создавать приложения Vue, используя функции, предоставляемые последними стандартами JavaScript ES2015 и ES2016 или более поздними версиями.
Однако если вы решите использовать современный JavaScript, вам необходимо обеспечить поддержку старых браузеров, иначе ваш продукт может не работать для большинства пользователей.
Для этого можно использовать Babel. Что он делает, так это «переводит» (переводит и компилирует) вашу современную функциональность в стандартный синтаксис, например, переводит ES6 в ES5, который могут распознать браузеры, до того, как приложение будет выпущено.
WebPack
Webpack — это сборщик модулей, и если ваш код охватывает разные модули (например, разные файлы JavaScript), Webpack может «встроить» эти фрагменты кода в один файл, который может быть прочитан браузером.
Webpack также действует как конвейер сборки, где вы можете преобразовать свой код перед его сборкой, например, с помощью Babel, Sass или TypeScript, и вы можете использовать ряд плагинов для оптимизации вашего приложения.
Многие разработчики считают Webpack сложным в освоении и громоздким в настройке, но без него некоторые полезные функции Vue (например, однофайловые компоненты) будут недоступны.
Недавно выпущенный Vue CLI 3 предоставляет решение для абстрагирования и автоматической настройки Webpack в проектах Vue.
Означает ли это, что вам больше не нужно изучать Webpack? Конечно, нет, потому что вам все равно неизбежно придется настраивать или отлаживать конфигурацию Webpack.
TypeScript
TypeScript — это надмножество языка JavaScript, по существу добавляющее к языку необязательную статическую типизацию и объектно-ориентированное программирование на основе классов. Предоставляет нам типы (такие как String, Boolean, Number и т. д.), чтобы мы могли писать надежный код и своевременно обнаруживать ошибки.
Vue.js версии 3, которая выйдет в 2019 году, будет полностью написана на TypeScript. Поэтому необходимо изучать TypeScript.
Фреймворк Vue
Фреймворки, построенные поверх Vue, позволяют вам не реализовывать рендеринг на стороне сервера с нуля, создавать собственную библиотеку компонентов и настраивать многие другие распространенные задачи.
Nuxt.js
Маршрутизация на основе компонентов, рендеринг на стороне сервера, разделение кода и другие функции необходимо практиковать, если вы хотите создать высокопроизводительное приложение Vue.
Nuxt.js, как упрощенная платформа приложений на основе Vue.js, может использоваться для создания приложений рендеринга на стороне сервера (SSR), а также может выступать в качестве механизма статического сайта для создания приложений статического сайта с элегантной многоуровневой структурой кода и особенности горячей загрузки. .
Nuxt.js предоставляет эти готовые функции через различные плагины сообщества, а также многие другие функциональные возможности, такие как PWA.
Vuetify
Google Material Design — это широко используемое руководство по стилю страницы для создания красивых логических пользовательских интерфейсов, которое используется в таких продуктах Google, как Android и в Интернете.
Vuetify реализует Material Design в серии компонентов Vue. Таким образом, вы можете быстро создавать приложения Vue с макетами и стилями Material Design, а также с виджетами для модальных окон, предупреждений, панелей навигации, нумерации страниц и многого другого.
Vuetify поддерживает SSR (рендеринг на стороне сервера), SPA (одностраничное приложение), PWA (прогрессивное веб-приложение) и стандартные HTML-страницы.
NativeScript-Vue
Vue.js — это библиотека для создания пользовательских веб-интерфейсов. Если вы хотите использовать его для нативного мобильного интерфейса, вы можете использовать фреймворк NativeScript-Vue.
NativeScript — это система для создания приложений с собственными компонентами пользовательского интерфейса на iOS и Android, а NativeScript-Vue — это платформа на основе NativeScript, которая обеспечивает синтаксис Vue и способы использования компонентов.
разное
Разработка плагина
Если вы хотите повторно использовать функции Vue в своем проекте или внести свой вклад в экосистему Vue, вы можете разрабатывать функции в виде плагинов Vue.
анимация
Если вам нужно использовать анимацию, вам нужно знать систему переходов Vue, которая также является частью ядра Vue. Вы можете применять анимацию, добавляя элементы в DOM или удаляя элементы из DOM.
Вам нужно будет создать классы CSS, чтобы определить желаемый эффект анимации, будь то исчезновение и исчезновение, изменение цвета или любой другой способ, который вам нравится. Когда элементы добавляются или удаляются из DOM, Vue обнаруживает эти изменения и добавляет или удаляет соответствующие классы CSS во время перехода.
Прогрессивные веб-приложения
Прогрессивные веб-приложения (PWA) похожи на обычные веб-приложения, но с улучшенным пользовательским интерфейсом. Например, PWA может включать автономное кэширование, рендеринг на стороне сервера, push-уведомления и многое другое.
Большинство функций PWA можно добавить в приложение Vue с помощью плагина Vue CLI 3 или с помощью такой среды, как Nuxt.js, но вам все равно необходимо знать некоторые ключевые технологии, включая манифест веб-приложения и ServiceWorker.
Если вы заинтересованы в PWA, я рекомендую вам ознакомиться с некоторымиЗнакомство с официальным сайтом PWA.