51
Выбор операционной системы не имеет особого значения. Всё нижеперечисленное программное обеспечение бесплатное и будет полноценно работать на 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 будет доступно приложение.
