Начало работы с Nuxt.js в Windows

Руководство по установке Nuxt.js веб-платформы и запуску в Windows.

Nuxt.js — это платформа для создания серверных приложений JavaScript на основе Vue.js, Node.js, Webpack и Babel.js. Это было вдохновлено Next.js. Это в основном шаблон проекта для Vue. Как и Next.js, он создается с соблюдением лучших практик и позволяет создавать "универсальные" веб-приложения простым и согласованным образом, практически без какой-либо конфигурации. Эти "универсальные" серверные веб-приложения также иногда называются "isomorphic", то есть код используется совместно между клиентом и сервером.

Чтобы узнать больше о Vue, см. страницу обзора Vue.

Предпосылки

Для работы с этим руководством нужно настроить среду разработки Node.js. Для этого:

• Установите подсистему Windows для Linux (WSL), включая дистрибутив Linux, например, Ubuntu, и убедитесь, что он функционирует в режиме WSL 2. Это можно проверить, открыв PowerShell и введя следующее: wsl -l -v
• Установите Node.js в WSL 2: Это включает менеджер версий, менеджер пакетов, Visual Studio Code и Расширение удаленной разработки.

Мы рекомендуем использовать подсистему Windows для Linux при работе с приложениями NodeJS для повышения производительности, совместимости системных вызовов и пародии при работе с серверами Linux или контейнерами Docker.

Это важно

Установка дистрибутива Linux с WSL создаст каталог для хранения файлов: \\wsl\Ubuntu-20.04 (замените Ubuntu-20.04 любым дистрибутивом Linux, который вы используете). Чтобы открыть этот каталог в проводнике Windows, откройте командную строку WSL, выберите свой домашний каталог с помощью cd ~, а затем введите команду explorer.exe . Не устанавливайте NodeJS или сохраните файлы, с которыми вы будете работать на подключенном диске C (/mnt/c/Users/yourname$). Это значительно замедлит установку и время сборки.

Установка Nuxt.js

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

1. Откройте командную строку WSL (т. е. Ubuntu).

2. Создайте папку проекта: mkdir NuxtProjects и введите этот каталог: cd NuxtProjects.

3. Установите Nuxt.js и создайте проект (заменив 'my-nuxt-app' на желаемое имя вашего приложения): npm create nuxt-app my-nuxt-app

4. Теперь установщик Nuxt.js будет задавать следующие вопросы:

   • Имя проекта: my-nuxtjs-app
   • Описание проекта: описание приложения Nuxt.js.
   • Имя автора: я использую псевдоним GitHub.
   • Выберите менеджер пакетов: Yarn или NPM - мы используем NPM для наших примеров.
   • Выберите платформу пользовательского интерфейса: None, Ant Design Vue, Bootstrap Vue и т. д. Давайте выберем Vuetify в этом примере, но сообщество Vue создало хорошую сводку, сравнивающую эти фреймворки пользовательского интерфейса, чтобы помочь выбрать лучший вариант для вашего проекта.
   • Выберите пользовательские платформы серверов: None, AdonisJs, Express, Fastify и т. д. Давайте выберем Нет для этого примера, но на сайте Dev.to можно найти сравнение серверных платформ 2019-2020 годов.
   • Выберите Nuxt.js модули (используйте пробелы для выбора модулей или просто введите, если вы не хотите): Axios (для упрощения HTTP-запросов) или поддержки PWA (для добавления файла service-worker, manifest.json и т. д.). Давайте не добавим модуль для этого примера.
   • Выберите средства подстроки: ESLint, Prettier, Lint промежуточных файлов. Давайте выберите ESLint (средство для анализа кода и предупреждения о потенциальных ошибках).
   • Выберите тестовую платформу: None, Jest, AVA. Давайте выберем None, так как мы не будем рассматривать тестирование в данном кратком руководстве.
   • Выберите режим отрисовки: универсальный (SSR) или одностраничное приложение (SPA). Давайте выберем Universal (SSR) для нашего примера, но Nuxt.js документация указывает некоторые различия — SSR требует работающего Node.js сервера для серверной отрисовки вашего приложения, а SPA — для статического хостинга.
   • Выберите средства разработки: jsconfig.json (рекомендуется для VS Code, чтобы завершение кода с помощью Intellisense работало корректно)

5. После создания проекта cd my-nuxtjs-app введите каталог проекта Nuxt.js, а затем введите code ., чтобы открыть проект в среде WSL-Remote VS Code.

   

6. Существует 3 команды, которые необходимо знать после установки Nuxt.js:

   • npm run dev для запуска экземпляра разработки с горячей перезагрузкой, просмотром файлов и повторным выполнением задач.
   • npm run build для компиляции проекта.
   • npm start для запуска приложения в рабочем режиме.

   Откройте терминал WSL, интегрированный в VS Code (View > Terminal). Убедитесь, что путь терминала указывает на каталог проекта (т. е. ~/NuxtProjects/my-nuxt-app$). Затем попробуйте запустить экземпляр разработки нового приложения Nuxt.js с помощью: npm run dev

7. Локальный сервер разработки запустится (отображая классные индикаторы хода выполнения для компиляции клиента и сервера). После завершения сборки проекта терминал отобразит сообщение "Скомпилировано успешно" вместе с тем, сколько времени потребовалось для компиляции. Откройте ваш веб-браузер и перейдите на http://localhost:3000, чтобы открыть ваше новое приложение Nuxt.js.

   

8. Откройте файл pages/index.vue в редакторе VS Code. Найдите заголовок <v-card-title class="headline">Welcome to the Vuetify + Nuxt.js template</v-card-title> страницы и измените его на <v-card-title class="headline">This is my new Nuxt.js app!</v-card-title>. Если веб-браузер по-прежнему открыт для localhost:3000, сохраните изменения и обратите внимание, что функция горячей перезагрузки автоматически компилируется и обновляет изменения в браузере.

9. Давайте посмотрим, как Nuxt.js обрабатывает ошибки. </v-card-title> Удалите закрывающий тег, чтобы код заголовка выглядел следующим образом: <v-card-title class="headline">This is my new Nuxt.js app! Сохраните это изменение и обратите внимание, что ошибка компиляции отображается в вашем браузере и в терминале, уведомляя вас о том, что закрывающий тег для <v-card-title> отсутствует, а также указывая номера строк, где эта ошибка может быть найдена в вашем коде. Замените закрывающий тег </v-card-title>, сохраните изменения, и страница перезагрузится.

Отладчик VS Code можно использовать с приложением Nuxt.js, выбрав клавишу F5 или выбрав Вид > Отладка (Ctrl+Shift+D) и Вид > Консоль отладки (Ctrl+Shift+Y) в меню. Если выбрать значок шестеренки в окне "Отладка", будет создан файл конфигурации запуска (launch.json), в котором будут сохранены сведения о конфигурации отладки. Дополнительные сведения см. в разделе «Отладка в VS Code».

Дополнительные сведения о Nuxt.jsсм. в руководстве поNuxt.js.