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

Scaling Vue with Nuxt.js
Duration 00:20:35
Открыть все курсы от vuemastery

Scaling Vue with Nuxt.js - Полный список уроков

Развернуть / Свернуть
  • Урок 1. Why Use Nuxt.js? 00:04:41
  • Урок 2. Creating a Nuxt App 00:15:54

Когда вы освоитесь с 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/

Твоя оценка

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

Комментарии

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

en 4 урока
vueschool.io Static Site Generation with Nuxt.js
Узнайте, как создавать статические веб-сайты (предварительный рендеринг) с помощью Nuxt.js, чтобы повысить как производительность, так и SEO, а также сократить расходы на хостинг.
Duration 00:11:46
2 1
en 7 уроков
vueschool.io Async Data with Nuxt.js
Узнайте, как управлять асинхронными данными и рендерить ваше приложение на стороне сервера с Nuxt.js. Может быть сложно и обременительно настроить пользовательскую систему для извлечения асинхронных данных, прежде чем вы предоставите свое приложение своим пользователям и отобразите все на стороне сервера. Поскольку JavaScript был спроектирован в основном для запуска на стороне клиента, он имеет несколько нежелательных особенностей.
Duration 00:24:02
2 0
en 14 уроков
vueschool.io Nuxt.js Fundamentals
Изучите основы Nuxt.js в этом курсе, который мы создали вместе с создателями Nuxt. Курс охватывает то, что вам нужно знать для развертывания вашего первого приложения Nuxt.js.
Duration 00:35:54
7 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
81 1
19-03-2019 en 167 уроков
udemy Vue JS 2 - The Full Guide by Real Apps (Vuex, Router, Node)
Если вы планируете начать свою карьеру в качестве разработчика или просто хотите улучшить свои навыки программирования, тогда этот курс подходит именно вам. Получите все, что нужно, чтобы начать веб-разработку одним курсом!
Duration 29:11:40
2 2
20-12-2018 en 98 уроков
udemy Nuxt JS with Laravel API - Building SSR Vue JS Apps
Изучите Laravel API разработку. Изучите Nuxt JS с нуля, чтобы создавать веб-приложения для SPA, Static и SSR Vue JS с Vuex. Здравствуйте и добро пожаловать в полную версию Laravel API Development с Nuxt JS в качестве фреймворка внешнего интерфейса, который помогает создавать мощные приложения на стороне сервера для визуализации Vue js с Vuex наилучшим возможным способом.
Duration 08:53:01
0 0

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

Сертифицированный Microsoft Azure разработчик - экзамен AZ-203

Сертифицированный Microsoft Azure разработчик - экзамен AZ-203

en
Этот курс существует для того, чтобы вы могли приобрести навыки, необходимые для сдачи сертификационного экзамена AZ-203: Разработка решений для Microsoft Azure, который затем принесет вам сертификат Microsoft Certified Developer Associate.
Microsoft Azure Architect Technologies - Экзамен AZ-300

Microsoft Azure Architect Technologies - Экзамен AZ-300

en
Этот курс призван помочь вам освоить необходимые навыки, необходимые для сертификационного экзамена Microsoft Azure AZ-300. Экзамен AZ-300 - это экзамен на уровне экспертов, который проверяет кандидатов на продвинутые знания и опыт работы с различными аспектами Microsoft Azure.
Современный React Bootcamp (с Hooks, React Router и др.)

Современный React Bootcamp (с Hooks, React Router и др.)

en
Следуйте той же программе, которую я преподаю своим студентам в SF. 10+ проектов, включая одно ОГРОМНОЕ приложение! Добро пожаловать на лучший онлайн ресурс для изучения React! Этот курс, опубликованный в апреле 2019 года, является совершенно новым и охватывает последние новости React. Этот курс...
Профессиональный JavaScript, уровень 2 (18 февраля - 25 апреля 2019)

Профессиональный JavaScript, уровень 2 (18 февраля - 25 апреля 2019)

ru
Курс предназначен для тех, кто прошёл «Профессиональный JavaScript, уровень 1», или для разработчиков, желающих поднять свои навыки. После прохождения курса вы будете уверенно создавать современные веб-приложения, а также сможете попробовать себя в качестве наставника на наших курсах.
SymfonyCon 2018 - Лиссабонская Конференция (Видео)

SymfonyCon 2018 - Лиссабонская Конференция (Видео)

en
SymfonyCon 2018 Лиссабон имел огромный успех! Более 900 участников со всего мира собрались вместе, чтобы узнать, встретиться и поделиться своим опытом в Symfony. Более 25 докладчиков выступили по различным темам: от нового веб-сервера Symfony до Messenger, API-платформы и многого другого.
Все о загрузке файлов в Symfony

Все о загрузке файлов в Symfony

en
Нужно загрузить некоторые файлы в Symfony? Отлично! Вы пришли в нужное место! В наши дни загрузка файлов может быть простой... или невероятно сложной - с облачным хранилищем, личными файлами, миниатюрами, проверкой и так далее. Итак, давайте займемся ... всем этим!
Создание Reusable (и удивительных) Symfony пакетов

Создание Reusable (и удивительных) Symfony пакетов

en
Хотите поделиться кодом между проектами или со всем миром? Давай сделаем это! Создавая пакет Symfony! В этом руководстве мы узнаем о пакетах, их суперспособностях, о том, как добавлять сервисы и маршруты, а также о лучших практиках для создания наилучших возможных пакетов.
Формы Symfony 4: создавайте, визуализируйте и властвуйте!

Формы Symfony 4: создавайте, визуализируйте и властвуйте!

en
Да, формы! Одна из самых мощных и ... запутанных функций во всем Symfony. Вот правда: формы просто сложны. Вам нужно управлять элементами формы HTML, проверкой, преобразованием данных и многим другим. Компонент Form может быть самой сложной частью Symfony. Но чем больше с ним работаешь, тем...
chat
logo