Представляем Create-Nuxt-App 🍀

Узнайте о некоторых новых функциях Nuxt 2.0

Совет: делитесь и повторно используйте компоненты Vue

Используйте Бит, чтобы инкапсулировать компоненты Vue со всеми их зависимостями и настройками. Делитесь ими в Bit’s Cloud, сотрудничайте со своей командой и используйте их где угодно.

Введение: Nuxt

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

Nuxt создан для приложений Vue, это еще более простой способ создания приложений Vue, поскольку Vue уже довольно прост в использовании.

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

Create-Nuxt-App

Так же, как create-response-app, команда Nuxt предоставила довольно удивительную функцию CLI, которая запускает новое приложение Nuxt после пары подсказок и предустановок. Вы можете выбрать именно ту среду, которую хотите, с помощью этого нового инструмента, он очень плавный и интуитивно понятный.

Совет: используйте Bit для совместного использования и управления повторно используемыми компонентами в разных проектах, чтобы быстрее работать в команде. Вы можете мгновенно обмениваться компонентами между своими проектами, разрабатывать их где угодно и синхронизировать изменения в исходном коде и зависимостях. Вот пример Компоненты MUI с Bit.

Создание проекта Nuxt

Create-Nuxt-App требует, чтобы на вашем компьютере был установлен Node Package Manager версии 5.2.0 или выше. Он поставляется с npx, который вы можете использовать для выполнения команд. Если он у вас есть, запустите команду ниже, чтобы создать новый проект nuxt:

$ npx create-nuxt-app hello-world

Или пряжей:

yarn create nuxt-app hello-world

Где hello-world - это имя проекта (это может быть любое имя по вашему выбору). Он задаст вам несколько вопросов о:

• название проекта

macs-MacBook-Pro:~ mac$ sudo npx create-nuxt-app hello-world
Password:
npx: installed 402 in 58.637s
> Generating Nuxt.js project in /Users/mac/hello-world
? Project name (hello-world)

• Описание Проекта

? Project description (My priceless Nuxt.js project) a simple hello world application

• выбирать между интегрированными серверными фреймворками

? Use a custom server framework (Use arrow keys)
❯ none
express
koa
adonis
hapi
feathers
micro

• выберите фреймворк UI

? Use a custom UI framework (Use arrow keys)
❯ none
bootstrap
vuetify
bulma
tailwind
element-ui
buefy

• выберите режим для рендеринга Nuxt

? Choose rendering mode (Use arrow keys)
❯ Universal
Single Page App

• выберите использование axios для выполнения HTTP-запросов

? Use axios module (Use arrow keys)
❯ no
yes

• выберите использование eslint в проекте при сохранении кода

? Use eslint (Use arrow keys)
❯ no
yes

• выберите использовать красивее при сохранении кода

? Use prettier (Use arrow keys)
❯ no
yes

После ответа на них он установит все зависимости, поэтому следующим шагом будет запуск проекта с помощью:

$ npm run dev

Теперь вы можете открыть браузер и увидеть, как приложение работает на http: // localhost: 3000.

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

Новые и блестящие возможности Nuxt 2.0

Теперь мы увидели create-nuxt-app, давайте также взглянем на другие блестящие функции, которые также поставляются с 2.0.

Webpack 4

Новая версия Nuxt 2 поставляется с последней версией Webpack 4. Webpack 4 был серьезно принят отраслевыми гигантами из-за потрясающей скорости загрузки и повторной компиляции. Помимо скорости, Webpack представил типы модулей, а также поддерживает .mjs и веб-сборку.

Прочие изменения:

• Экспериментальная опция build.dll была удалена из-за нестабильности, а также с учетом скорости Webpack.
• Средство разработки по умолчанию для клиентского пакета - это Webpack по умолчанию eval, который является самым быстрым вариантом.
• Подъем области действия включен по умолчанию.

Nuxt-start и Nuxt-legacy

Nuxt-start был представлен в этой новой версии и использовался для запуска приложения Nuxt в производственном режиме. Затем был добавлен Nuxt-legacy для поддержки устаревшей сборки Nuxt для Node.

Поставщики уходят…

Хотя в этой новой версии все еще существует блок поставщиков, теперь он будет обрабатываться автоматически для повышения эффективности. В этом новом выпуске CommonsChunkPlugin больше не будет использоваться, поэтому вам не нужно явно определять поставщиков внутри вашего проекта. Nuxt автоматически добавит каждый основной пакет в группу подсказок кеширования, это могут быть пакеты Vue, Vue-Router и т.п. Это сделало бы работу Webpack по разделению еще проще.

Полный контроль над разделением фрагментов

Раньше Nuxt по умолчанию выбирал разделение кода. Хотя Nuxt пытается обеспечить максимально эффективное разделение из коробки, теперь вы можете получить полный контроль над ним, используя параметр build.splitChunks и, при необходимости, отключить асинхронные блоки для каждого маршрута.

Поддержка ESM

В этом новом выпуске модули ES теперь поддерживаются повсюду. Теперь вы можете использовать синтаксис экспорта и импорта внутри файла nuxt.config.js, в serverMiddleware и модулях благодаря std / esm - быстрому, готовому к производству, нулевому-зависимому пакету для включения модулей ES в Node версии 6 и выше. .

Новые улучшения интерфейса командной строки

Пара важных улучшений в инструменте командной строки, поставляемом с этим новым выпуском. Изначально после запуска nuxt dev вы должны помнить, что всегда есть небольшой промежуток времени, прежде чем ваше приложение будет обслуживаться на локальном хосте. Обычно это связано с тем, что Webpack запускается два раза: один раз для клиентской стороны, а затем для пакета на стороне сервера. Теперь у нас есть WebpackBar, чтобы упростить все это, и теперь сборки выполняются параллельно.

Разработчики также запросили поддержку Nuxt для сред тестирования и непрерывной интеграции, и теперь она здесь! Nuxt версии 2 теперь будет автоматически обнаруживать среды CI и Test и переключится в специальный режим под названием minimalCLI с менее подробными сообщениями. Наконец, все отладочные сообщения теперь скрыты по умолчанию, только теперь отображаются более умные и лучшие сообщения как для конструктора, так и для генератора.

Введите postcss-preset-env; Обновить css-loader

В этом новом выпуске cssnext устарел, теперь вы должны начать использовать postcss-preset-env вместо postcss-cssnext. Кроме того, css-loader был обновлен, чтобы теперь мы использовали ~ assets вместо ~ / assets для псевдонима в типах данных css.

Улучшения СПА

Как мы уже знаем, Nuxt идеально подходит для создания одностраничных приложений Vue. Индикатор загрузки страницы может быть действительно замечательной частью одностраничных приложений. В этом новом выпуске этот индикатор был переработан и теперь адаптивно отображается в модели DOM примерно через 2 секунды. Также были добавлены теги Aria, которые помогают программам чтения с экрана обнаруживать заставки. В этом выпуске также добавлена ​​поддержка options.render.bundleRenderer.shouldPrefetch и options.render.bundleRenderer.shouldPreload для одностраничного режима приложения.

🛑 Устаревшие

• context.isServer и context.isClient были удалены, используйте process.clientи process.server
• options.dev в build.extend() был удален, используйте options.isDev
• Удалены крючки nuxt.plugin() в модулях с использованием новой системы крючков.
• Обратные вызовы для модулей были удалены, используйте async или верните Promise

🛠 Советы по миграции

• Для Webpack вам не нужно изменять ни одной строчки кода в вашем проекте. Все будет автоматически перенесено, как только вы обновитесь до Nuxt 2.
• Вы можете удалить vendors из nuxt.config.js. Если они есть в вашем проекте, безопасно удалите их. Если вы являетесь автором модуля, вы можете оставить this.addVendor() для поддержки устаревших версий.
• Оставайтесь со значениями по умолчанию. Сравнивайте свои реальные проекты и тщательно подбирайте варианты в соответствии с вашими потребностями.

⚠️ Критические изменения

1. shouldPrefetch теперь отключен по умолчанию. Из-за сообщений о нежелательной предварительной выборке фрагментов страницы, особенно в проектах среднего размера. Кроме того, все ненужные подсказки ресурсов по умолчанию отключены в непроизводственном режиме для упрощения отладки.
2. По умолчанию Webpack не разделяет фрагмент манифеста, чтобы уменьшить количество асинхронных запросов, и перемещает его в основной фрагмент. Вы можете включить его, используя build.optimization.runtimeChunk: true
3. Для производственных сборок мы больше не используем имена файлов как часть имён блоков (/_nuxt/pages/foo/bar.[hash].jsbecomes[hash.js]), это помогает избежать случайной утечки внутренних компонентов вашего проекта. Вы можете принудительно включить имена обратно с помощью build.optimization.splitChunks.name: true.
4. Nuxt больше не разделяет фрагменты макета по умолчанию. Они будут загружены вместе с основной точкой входа, как ядро ​​Nuxt, плагины, промежуточное ПО и магазин. Вы можете включить разделение макета с помощью build.splitChunks.layouts: true

Заключение

Мы видели новое приложение Create-Nuxt-App и другие интересные новые функции Nuxt версии 2. Вы можете сообщить мне в разделе комментариев, какие ваши любимые функции и использовали ли вы новое приложение Create-Nuxt-App для своего Nuxt. проект. Счастливое кодирование

Учить больше