Создание web-сервиса. Всё, но не сразу. Использование фреймворка Nuxt в приложении на Vue.

Сегодня мы установим и соберём фронтенд-часть. Использовать будем Nuxt. Nuxt — это фреймворк для универсальных приложений на Vue.js.

Для этого идём в папку с проектами. И выполняем команду

vue init nuxt-community/starter-template fzap

Создастся папка fzap — т. е. frontend zap
Отвечаете на вопросы, которые задаст установщик.

// переходите в папку fzap
cd fzap

// устанавливаете все зависимости
npm install

Теперь Nuxt установлен. Открываете его в своей ide

//и запускаем проект 
npm run dev

Проект запустится и будет доступен по адресу localhost:3000
Но работать с ним будем дальше. Так как API у нас пока не готов.

Почему я выбрал Nuxt? Он создаёт автоматом Router это избавляет нас от лишней работы, автоматически ssr ( пререндинг ). Пререндинг необходим для SEO, чтобы поисковики видели все мета теги.

Разберём необходимые нам папки проекта:

components - лежат компоненты нашего фронтенд приложения.
node_modules - лежат модули, необходимые для работы, например vue, vue-meta и тому подобные
pages - страницы приложения, в которые будут подключаться компоненты и на их основе будет генерироваться роутинг
static - будут лежать статические файлы - логотип, css, js

файлы, лежащие в корне - конфигурационные:

package.json - описаны зависимости и некоторые команды, для обращения из консоли
nuxt.config.js - файл настроек.

Данный пост подготовлен автором @zheev. В рамках данного цикла статей он расскажет о том, что и как он программировал, какие языки и технологии использовал. С какими трудностями пришлось столкнуться и их решение на реальных примерах.

Первая часть - Вступление
Вторая часть - Проектирование БД
Третья часть - Установка окружения
Четвёртая часть - Установка и настройка Django
Пятая часть - Установка и сборка Vue
Шестая часть - Создание таблиц средствами Django
Седьмая часть - Создание REST приложений на Django