Если вы новичок в разработке Vue, вы, вероятно, слышали много жаргона, такого как одностраничные приложения, асинхронные компоненты, рендеринг на стороне сервера и многое другое. Возможно, вы также слышали о некоторых инструментах и библиотеках, связанных с Vue, таких как Vuex, Webpack, Vue CLI и Nuxt.
Быть погруженным в море жаргона и инструментов может быть неприятно, но вы не единственный, кто так себя чувствует: разработчики всех уровней опыта продолжают испытывать этот необъяснимый стресс.
Попытка выучить все за один раз может быть бесполезной, поэтому в этом посте я собираюсь представить «карту знаний» высокого уровня, которая охватывает ключевые области, связанные с разработкой Vue. Вы можете использовать эту карту в качестве руководства для изучения Vue в 2019.
Если я хочу, чтобы вы выучили то, что написано в китайских книгах, вы должны сначала выучить китайский, верно?
Аналогично, Vue - это JavaScript Framework для создания интерфейсов веб-пользователей. Перед началом работы с Vue, вы должны знать основы JavaScript и веб-разработки.
Основная концепция ВУЭЕсли вы новичок в разработке Vue, вам следует сосредоточиться на ядре экосистемы Vue.js, включая основную библиотеку Vue, Vue Router и Vuex.
Эти инструменты будут использоваться в большинстве приложений Vue и обеспечат основу для создания других областей, упомянутых в этой статье.
Основные функции VueПо сути, Vue используется для синхронизации веб-страниц и JavaScript. Ключевыми функциями для достижения этого являются реактивные данные и функции шаблона, такие как директивы и интерполяция. Этим вещам нужно учиться в самом начале.
Чтобы создать свое первое приложение Vue, вам также необходимо знать, как установить Vue на веб-страницу, и понимать жизненный цикл экземпляра Vue.
компонентКомпоненты Vue — это автономные повторно используемые элементы пользовательского интерфейса. Вам нужно понять, как объявлять компоненты и как взаимодействовать с ними через свойства и события.
Также важно понимать, как составлять компоненты, так как это имеет решающее значение для создания надежных масштабируемых приложений с помощью Vue.
одностраничное приложениеАрхитектура одностраничного приложения (SPA) обеспечивает ту же функциональность, что и традиционный многостраничный веб-сайт с одной веб-страницей, без перезагрузки и перестроения страницы каждый раз, когда пользователь запускает навигацию.
После создания «страниц» в виде компонентов Vue каждая «страница» может быть сопоставлена с уникальным путем с помощью Vue Router, инструмента для создания SPA, поддерживаемого командой Vue.
государственное управлениеПо мере того, как приложение становится больше, на странице SPA появляется много компонентов, становится сложно управлять глобальным состоянием, а компоненты раздуваются по мере добавления свойств и прослушивателей событий.
Специальный режим под названием «Flux» сохраняет данные в предсказуемом и стабильном центральном хранилище. Библиотека Vuex, поддерживаемая командой Vue, помогает реализовать Flux в приложениях Vue.js.
2. Vue в реальном миреПриведенные выше знания можно использовать для создания производительных приложений Vue, но как их развернуть в рабочей среде?
Если вы хотите продавать свои продукты на основе 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-страницы и передачу ее пользователю.
Другие оптимизации включают использование асинхронных компонентов и функций рендеринга.
3. Основные сопутствующие инструментыВсе, что мы видели до сих пор, пришло из ядра Vue.js или из инструментов в экосистеме. Но Vue не существует изолированно, это всего лишь слой в стеке передовых технологий.
Продвинутые разработчики Vue должны быть знакомы не только с Vue, но и с ключевыми инструментами для каждого проекта Vue.
Современный JavaScript и BabelПриложения Vue можно разрабатывать с использованием ES5, стандарта JavaScript, поддерживаемого почти всеми браузерами.
Чтобы получить расширенный опыт разработки Vue и воспользоваться преимуществами новых функций браузера, вы можете создавать приложения Vue, используя функции, предоставляемые последними стандартами JavaScript ES2015 и ES2016 или более поздними версиями.
Однако если вы решите использовать современный JavaScript, вам необходимо обеспечить поддержку старых браузеров, иначе ваш продукт может не работать для большинства пользователей.
Для этого нужен Babel. Что он делает, так это «переводит» (переводит и компилирует) вашу современную функциональность в стандартную функциональность до того, как приложение будет выпущено.
WebPackМодуль WebPack связан, если ваш код на разных модулях (например, разные файлы JavaScript), WebPack может «строить» один файл в читаемых браузерах, разбросанных.
Webpack также действует как конвейер сборки, где вы можете преобразовать свой код перед его сборкой, например, с помощью Babel, Sass или TypeScript, и вы можете использовать ряд плагинов для оптимизации вашего приложения.
Многие разработчики считают Webpack сложным в освоении и громоздким в настройке, но без него нельзя использовать некоторые полезные функции Vue (например, однофайловые компоненты).
Недавно выпущенный Vue CLI 3 предоставляет решение для абстрагирования и автоматической настройки Webpack в проектах Vue.
Означает ли это, что вам больше не нужно изучать Webpack? Конечно, нет, потому что вам все равно неизбежно придется настраивать или отлаживать конфигурацию Webpack.
TypeScriptTypeScript — это надмножество языка JavaScript, предоставляющее нам типы (String, Boolean, Number и т. д.), чтобы мы могли писать надежный код и своевременно обнаруживать ошибки.
Vue.js 3 будет доступен в 2019 году и будет полностью написан на TypeScript. Это не означает, что вы должны использовать его в своем проекте Vue, но если вы хотите внести свой код во Vue или хотите понять его внутреннюю работу, вам нужно знать TypeScript.
4. Вью ФреймворкФреймворки, построенные поверх Vue, позволяют создавать собственные библиотеки компонентов и выполнять многие другие распространенные задачи без необходимости реализовывать рендеринг на стороне сервера с нуля.
Существует много отличных фреймворков Vue, но здесь мы перечислим только три наиболее широко используемых и важных.
Nuxt.jsМаршрутизация на основе компонентов, рендеринг на стороне сервера, разделение кода и другие передовые функции — это все, что вам нужно, если вы хотите создать высокопроизводительное приложение Vue. Вам также нужны такие функции, как теги SEO.
Nuxt.js предоставляет эти готовые функции через различные плагины сообщества, а также многие другие функциональные возможности, такие как PWA.
VuetifyGoogle Material Design — это широко используемое руководство по созданию красивых логических пользовательских интерфейсов, которое используется в таких продуктах Google, как Android и в Интернете.
Vuetify реализует Material Design в серии компонентов Vue. Таким образом, вы можете быстро создавать приложения Vue с макетами и стилями Material Design, а также с виджетами для модальных окон, предупреждений, панелей навигации, нумерации страниц и многого другого.
NativeScript-VueVue.js — это библиотека для создания пользовательских веб-интерфейсов. Если вы хотите использовать его для нативного мобильного интерфейса, вы можете использовать фреймворк NativeScript-Vue.
NativeScript — это система для создания приложений с собственными компонентами пользовательского интерфейса на iOS и Android, а NativeScript-Vue — это платформа на основе NativeScript, которая обеспечивает синтаксис Vue и способы использования компонентов.
5. РазноеВ последней части мы рассмотрим несколько других.
Разработка плагиновЕсли вы хотите повторно использовать функции Vue в своем проекте или внести свой вклад в экосистему Vue, вы можете разрабатывать функции в виде плагинов Vue.
анимацияЕсли вам нужно использовать анимацию, взгляните на систему переходов Vue, которая также является частью ядра Vue. Вы можете применять анимацию, когда элементы добавляются или удаляются из DOM.
Вам нужно будет создать классы CSS, чтобы определить желаемый эффект анимации, будь то исчезновение и исчезновение, изменение цвета или любой другой способ, который вам нравится. Когда элементы добавляются или удаляются из DOM, Vue обнаруживает эти изменения и добавляет или удаляет соответствующие классы CSS во время перехода.
Прогрессивные веб-приложенияПрогрессивные веб-приложения (PWA) похожи на обычные веб-приложения, но с улучшенным пользовательским интерфейсом. Например, PWA может включать автономное кэширование, рендеринг на стороне сервера, push-уведомления и многое другое.
Большинство функций PWA можно добавить в приложение Vue с помощью плагина Vue CLI 3 или с помощью такой среды, как Nuxt.js, но вам все равно необходимо знать некоторые ключевые технологии, включая манифест веб-приложения и ServiceWorker.
Английский оригинал:
https://vuejsdevelopers.com/2018/12/04/vue-js-2019-knowledge-map/
Рекомендация по активностиПорекомендуйте конференцию по технологиям искусственного интеллекта, которую нельзя пропустить в конце года. Учитесь у Google, Microsoft, Amazon, BAT, JD.com, Meituan, Huawei и других 40+ кейсов искусственного интеллекта. Обратный отсчет до открытия конференции 10 дней, билеты уже распроданы, если хотите купить, торопитесь~~
Добро пожаловать, чтобы отсканировать QR-код ниже, чтобы получить более подробную информацию о конференции, или проконсультироваться с девушкой по продаже билетов Эми 18514549229 (тот же номер в WeChat).