Установка Nuxt.js и подготовка IDE

Просмотров 722
Сложность:

Выбор операционной системы не имеет особого значения. Всё нижеперечисленное программное обеспечение бесплатное и будет полноценно работать на Windows, Linux и MacOS. Я показываю на примере Windows 10.

Устанавливаем актуальные версии Node.js (https://nodejs.org/en/) и MongoDB (https://www.mongodb.com/try/download/community). В данный момент текущая версия Node.js 14.16, а MongoDB 4.4.4.

Устанавливаем среду разработки. Я использую Microsoft VS Code (https://code.visualstudio.com/).

Для VS Code существует множество плагинов, которые упрощают и ускоряют разработку. Могу порекомендовать следующие: Auto Close Tag, Auto Complete Tag, Auto Rename Tag, Bracket Pair Colorizer 2, Import Cost, npm, npm Intellisense, Path Intellisense, Prettier, SVG, Vetur.

Также устанавливаем систему управления версиями Git (https://git-scm.com/downloads) и регистрируемся на Github (https://github.com/).

Установка Nuxt.js с нуля

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

Создаём пустую папку. Внутри неё нажимаем правой кнопкой мыши и выбираем "Открыть с помощью Code". Откроется VS Code. В меню выбираем Terminal -> New Terminal.

В консоли пишем:

npx create-nuxt-app Test

Test - это название приложения. Установщик создаст новую папку с таким названием и там будет храниться приложение.

В процессе установки у вас будут спрашивать в каком режиме будет работать приложение, какие дополнительные модули нужно установить. Более подробно про установщик create-nuxt-app можно почитать тут.

Самый простой вариант выбора для установщика: npm, javascript, ui = none, axios, prettier, testing = none, universal, server, jsconfig.json, ci = none. Сами пункты и их очередность меняются и обновляются, будьте внимательны.

Установка готового проекта с Github

Проект в открытом доступе. Его можно скачать в виде архива (https://github.com/dergunovs/nuxt-express/archive/main.zip) или скачать на компьютер через Git. Воспользуемся вторым способом. Открываем VS Code. В терминале пишем:

git clone https://github.com/dergunovs/nuxt-express.git

Будет создана новая папка, в ней будут храниться все исходные файлы проекта.

Закрываем VS Code, переходим в папку с проектом и открываем VS Code уже внутри этой папки.

В первую очередь, нужно установить все зависимости. Пишем в терминале:

npm install

Появится большая папка node_modules - зависимости хранятся именно там.

Настроим глобальные переменные для разработки. В корневой папке проекта создайте файл ".env". В нём укажите:

BASE_URL=http://localhost:3000

PORT=3000

SECRET=site

BASE_URL - домен вашего сайта
PORT - порт, на котором будет работать приложение
DATABASE - название базы MongoDB, с которой будет работать приложение

Теперь можно запускать проект в режиме разработки через терминал с помощью команды:

npm run dev

Откройте браузер и по адресу http://localhost:3000 будет доступно приложение.

Автор: Александр Дергунов
Дата публикации: 17.3.2021 г.
Поделиться:

Простое Nuxt.js приложение

Оптимизация Nuxt.js приложения
4662 просмотров4662
Простое Nuxt.js приложение
Пользуемся преимуществами современных javascript фреймворков.
Сложность:
Что такое Nuxt.js?
663 просмотров663
Простое Nuxt.js приложение
Описание javascript фреймворка Nuxt.js.
Сложность:
Установка Nuxt.js и подготовка IDE
723 просмотров723
Простое Nuxt.js приложение
Устанавливаем нужное ПО и плагины, загружаем проект с Github.
Сложность:
Режимы работы Nuxt.js
736 просмотров736
Простое Nuxt.js приложение
Отдельный процесс и middleware для Express.js.
Сложность:
Структура Nuxt.js приложения
809 просмотров809
Простое Nuxt.js приложение
Типовые папки и файлы, разделение функциональности.
Сложность:
Структура Nuxt.js приложения - видео
Бэкенд Express + Mongoose
723 просмотров723
Простое Nuxt.js приложение
Реализация бэкенда для Nuxt приложения
Сложность:
Шаблоны и страницы
422 просмотров422
Простое Nuxt.js приложение
Для чего они нужны? Какие между ними отличия.
Сложность:
Vue компоненты
931 просмотров931
Простое Nuxt.js приложение
Примеры использования в Nuxt.js
Сложность:
Главная страница энциклопедии
metrika