Масштабируем Vue с Nuxt.js - Видеоуроки

Scaling Vue with Nuxt.js
Duration 00:20:35
Открыть все курсы от vuemastery
Облачный хостинг на SSD с лучшей техподдержкой! Развернуть приложение в один клик

Когда вы освоитесь с Vue, изучение фреймворка, такого как Nuxt.js, позволит вам создавать готовые к работе веб-приложения, которые следуют лучшим рекомендациям.

Зачем использовать Nuxt.js?

7 проблем, которые вы можете избежать, используя Nuxt.js для вашего следующего приложения Vue

Vue.js - отличный выбор в качестве основы для вашего приложения. Но есть пара проблем, с которыми вы, вероятно, столкнетесь:

  • Как мне объединить и настроить все мои библиотеки JavaScript & Vue для эффективной совместной работы?
  • Как мне структурировать код приложения, используя лучшие практики?
  • Как мне убедиться, что мое приложение правильно проиндексировано поисковыми системами?
  • Как оптимизировать приложение Vue по скорости?

Вот некоторые из проблем, которые Себастьен и Александр Chopin решили решить, создавая Nuxt.js, высокоуровневую среду, основанную на Vue, чтобы помочь вам создавать готовые к работе приложения Vue. Я хочу рассказать вам о 7 проблемах, с которыми вы столкнетесь при создании приложения Vue, и рассказать, как Nuxt их решает.

Проблема № 1: Создание готового к работе приложения Vue с нуля затруднительно

Nuxt поставляется не только с предварительно настроенными Vuex, Vue Router и Vue-Meta, но и настраивает ваш проект с интеллектуальными настройками по умолчанию, основанными на хорошо изученных лучших практиках, которые Vue не даст вам сразу.

Nuxt Starter Kit спросит вас о библиотеках, с которых вы хотите начать свой проект, таких как CSS Lint, и какую платформу CSS использовать.

Проблема № 2: Нет стандартной структуры папок

По мере роста вашего приложения организация кода становится все более важной. Стандартная сборка Vue дает вам каталог ресурсов и компонентов, что является хорошим началом. Nuxt.js настраивает вас с дополнительными папками, основанными на рекомендациях, таких как:

  • Директория страниц, для шаблонов и роутов вашего приложения
  • Директория Layouts
  • Директория Store, для файлов Vuex хранилища

Nuxt поставляется с большим количеством папок и большим количеством соглашений по умолчанию, которые можно настраивать, но вы поняли идею.

Поскольку все имеет свое место, переход от одного приложения Nuxt к другому в качестве разработчика и ускорение работы очень просты.

Проблема № 3: Конфигурация маршрутизации может быть длинной в большом приложении Vue

С Nuxt вы просто помещаете свои отдельные компоненты Vue в папку страниц, и Nuxt автоматически генерирует ваши маршруты с нулевой конфигурацией.

Это еще один пример того, как Nuxt дает вам предварительную конфигурацию, необходимую для создания готовых приложений Vue. Это приводит нас к следующей проблеме с большими приложениями...

Проблема № 4: Нет стандартного способа настроить все вместе

К счастью, Nuxt поставляется с готовой производственной конфигурацией, которая не блокирует вас. То есть, если вы хотите переопределить какие-либо интеллектуальные значения по умолчанию или предварительную конфигурацию, вы можете отредактировать файл nuxt.config.js и изменить любой из каркасов опции.

Проблема № 5. Приложения Vue не оптимизированы для SEO

Вы будете хотеть, чтобы определенные страницы вашего приложения были правильно проиндексированы поисковыми системами, чтобы их было легко обнаружить.

Одним из лучших решений является предварительная визуализация страниц Vue на сервере, но это может быть непросто настроить самостоятельно. Nuxt предварительно настроен для генерации вашего приложения на сервере, а также для включения маршрутов, чтобы упростить добавление связанных с SEO тегов.

Проблема № 6: Vue приложение при начальной загрузке может быть медленным

При использовании Nuxt.js, если вы решите сделать приложение универсальным или статическим, предварительно обработанный HTML-код заставит вашу страницу быстрее загружаться в браузере. После загрузки он начнет работать как обычный SPA. Кроме того, благодаря автоматическому разделению кода загружается только тот JavaScript, который необходим для создания функции маршрута.

Это делается для оптимального пользовательского опыта.

Проблема № 7: С приложением Vue вам может быть трудно изменить поведение фреймворка

Когда вы разрабатываете производственные приложения, в какой-то момент вам придется изменить поведение платформы. Nuxt предоставляет модульную систему высшего порядка, которая позволяет легко настраивать каждый аспект Nuxt.

Итак, у вас есть 7 проблем, которые Nuxt решает для вас. Как видите, Nuxt.js позволяет тратить меньше времени на настройку и больше времени на решение проблем и создание потрясающих приложений Vue.

Материалы

https://coursehunter-club.net/t/vuemastery-scaling-vue-with-nuxt-js/

Полный список уроков Развернуть / Свернуть
  • Урок 1. Why Use Nuxt.js? 00:04:41
  • Урок 2. Creating a Nuxt App 00:15:54
Этот курс находится в платной подписке!

И будет доступен в бесплатном просмотре 09.03.2019. Если у тебя еще нет у нас аккаунта - зарегистрируйся и оформи премиум подписку в своем личном кабинете, и смотри этот, а также многие другие курсы, прямо сейчас.

Следи за последними обновлениями и новостями в нашем coursehunter-club.net (Ex coursehunters.club), или вступай в наш канал telegram.

Комментарии

Похожие курсы

en 4 урока
vueschool.io Static Site Generation with Nuxt.js
Узнайте, как создавать статические веб-сайты (предварительный рендеринг) с помощью Nuxt.js, чтобы повысить как производительность, так и SEO, а также сократить расходы на хостинг.
Duration 00:11:46
1 0
en 7 уроков
vueschool.io Async Data with Nuxt.js
Узнайте, как управлять асинхронными данными и рендерить ваше приложение на стороне сервера с Nuxt.js. Может быть сложно и обременительно настроить пользовательскую систему для извлечения асинхронных данных, прежде чем вы предоставите свое приложение своим пользователям и отобразите все на стороне сервера. Поскольку JavaScript был спроектирован в основном для запуска на стороне клиента, он имеет несколько нежелательных особенностей.
Duration 00:24:02
1 0
en 14 уроков
vueschool.io Nuxt.js Fundamentals
Изучите основы Nuxt.js в этом курсе, который мы создали вместе с создателями Nuxt. Курс охватывает то, что вам нужно знать для развертывания вашего первого приложения Nuxt.js.
Duration 00:35:54
4 0
05-02-2018 en 91 урок
udemy Nuxt.js - Vue.js on Steroids
Создавайте очень крутые приложения Vue JS с помощью Nuxt.js. Nuxt добавляет простой серверный рендеринг и конфиг на основе папок. Vue.js - это супер JavaScript фреймворк, который вы можете использовать для создания высокопривлекательных пользовательских интерфейсов и одностраничных приложений (SPA). Вы можете присоединиться к моему бестселлеру на Vue.js, если хотите узнать больше об этом фреймворке!
Duration 06:27:50
66 1

Последнее добавленное

Полный курс по программированию на Python для начинающих

Полный курс по программированию на Python для начинающих

en
Изучите Python для AI, машинного обучения, науки о данных и разработки приложений. Математики, ученые и инженеры любят Python. Почему? Потому что он делает сложные вычисления и повторяющиеся задачи действительно простыми для написания и выполнения. Разработчики любят его, потому что он простой...
Python для анализа данных

Python для анализа данных

ru
«Данные — это новая нефть». Они помогают усовершенствовать продукт, привлечь новых пользователей и являются драйвером роста любой компании. Компании во всем мире используют Python для сбора и анализа данных. В Uber, Yandex и Facebook, знание Python является обязательным требованием при приеме...
Flutter и Dart: полноценное мобильное приложение™

Flutter и Dart: полноценное мобильное приложение™

en
Изучение того, как создавать приложения для iOS и Android, с полным демонстрационным примером на основе Dart и Flutter Framework. Flutter - это SDK для мобильных приложений, предназначенный для создания высококачественных собственных интерфейсов на iOS и Android в рекордно короткие сроки. Flutter ра
Flutter: кроссплатформенное приложение iOS / Android

Flutter: кроссплатформенное приложение iOS / Android

en
Создавайте кроссплатформенные красивые нативные приложения в рекордно короткие сроки. Flutter - это SDK для мобильных приложений, в комплекте с фреймворком, виджетами и инструментами, который предоставляет разработчикам простой и продуктивный способ создания и развертывания красивых мобильных...
Программирование на Dart от новичка до эксперта

Программирование на Dart от новичка до эксперта

en
Изучите Dart с уровня Beginner и станьте экспертом, который может начать изучать Flutter, AngularDart и многое другое. В этом курсе вы узнаете все, что вам нужно знать о Dart. Dart - это язык, который становится популярным день ото дня, и разработчики по всему миру стремятся к этому языку...
Понятный JavaScript (Middle)

Понятный JavaScript (Middle)

ru
Хочешь стать JavaScript разработчиком, систематизировать знания и выйти на совершенно новый уровень! Курс «Понятный JavaScript» — это комплексная программа обучения, которая позволит тебе полностью изучить с нуля главный язык Frontend разработчика. Уже через 3 месяца ты будешь знать JavaScript...
chat
logo