Как настроить проект Nuxt.js с нуля?

Nuxt.js — это фреймворк для создания приложений на Vue.js, предоставляющий мощные инструменты для разработки серверных рендеренных приложений и одностраничных приложений (SPA). В этом ответе мы рассмотрим шаги для настройки проекта Nuxt.js с нуля.

Установка необходимых инструментов

Перед началом работы необходимо иметь установленный Node.js и npm (или Yarn). Чтобы проверить установленные версии, используйте следующие команды:

node -v
npm -v

Если Node.js еще не установлен, вы можете скачать его с официального сайта.

Создание нового проекта Nuxt.js

1. Создание проекта с помощью create-nuxt-app

Nuxt.js предлагает удобный способ быстрого старта с помощью скрипта create-nuxt-app. Откройте терминал и выполните следующую команду:

npx create-nuxt-app my-nuxt-app

Замените my-nuxt-app на желаемое имя вашего проекта. После выполнения команды вы получите несколько параметров для настройки вашего проекта, в том числе выбор уровня маршрутизации, CSS-фреймворка и других пакетов.

Пример выбора параметров:

✔ Project name: … my-nuxt-app
✔ Programming language: TypeScript
✔ Package manager: Npm
✔ UI framework: None
✔ Modules: Axios, Progressive Web App (PWA) Support
✔ Linting tools: ESLint, Prettier
✔ Test framework: Jest

2. Переход в директорию проекта

После завершения настройки создаваемый проект будет находиться в папке my-nuxt-app. Перейдите в эту папку:

cd my-nuxt-app

3. Запуск проекта

Теперь, когда ваш проект готов, вы можете запустить его с помощью следующей команды:

npm run dev

После запуска, откройте браузер и перейдите по адресу http://localhost:3000 для просмотра вашего нового проекта.

Структура проекта Nuxt.js

В проекте, созданном с использованием create-nuxt-app, вы увидите множество директорий и файлов. Наиболее важные из них:

• pages/ - Здесь вы создаете страницы вашего приложения. Каждое *.vue файл в этой папке автоматически становится маршрутом приложения.
• components/ - Используйте эту директорию для создания компонентов, которые могут быть переиспользованы внутри страниц.
• layouts/ - Шаблоны, которые помогут вам управлять общей структурой вашего приложения.
• store/ - Если вы планируете использовать Vuex для управления состоянием, создайте здесь соответствующие модули.

Пример создания страницы

Создайте новый файл about.vue в директории pages/ с простым содержанием:

<template>
  <div>
    <h1>О нас</h1>
    <p>Это страница о нашем приложении.</p>
  </div>
</template>

<script>
export default {
  name: 'AboutPage'
}
</script>

<style scoped>
h1 {
  color: #3B8070;
}
</style>

Теперь, если вы перейдете в браузере по адресу http://localhost:3000/about, вы увидите новую страницу.

Заключение

Поздравляю! Вы только что настроили свой первый проект Nuxt.js. Вы можете продолжить изучать его возможности и добавлять больше функционала в ваше приложение. Nuxt.js предоставляет множество функций и возможностей, таких как маршрутизация, управление состоянием, поддержка PWA и многое другое. Не забывайте обращаться к документации Nuxt.js для получения более подробной информации и примеров.