Nuxt.js — это мощный фреймворк для разработки универсальных приложений на Vue.js 3 с серверным рендерингом. В этой статье мы рассмотрим процесс создания и настройки проекта Nuxt.js.
Установка Nuxt.js
Для создания нового проекта Nuxt.js выполните следующую команду:
npx create-nuxt-app my-nuxt-project
Эта команда создаст новый проект с предустановленными настройками. После создания проекта перейдите в папку проекта и запустите сервер разработки:
cd my-nuxt-project
npm run dev
Теперь ваше приложение Nuxt.js будет доступно по адресу http://localhost:3000
.
Настройка проекта Nuxt.js
После создания проекта вы можете настроить его в соответствии с вашими требованиями. Ниже приведены основные этапы настройки проекта Nuxt.js.
Конфигурация Nuxt.js
Файл nuxt.config.js
содержит основные настройки вашего приложения, такие как метаданные, стили, плагины и модули. Рассмотрим пример файла конфигурации:
export default {
head: {
title: 'My Nuxt App',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'My Nuxt App description' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
css: ['~/assets/styles/main.css'],
plugins: [],
components: true,
buildModules: ['@nuxtjs/eslint-module'],
modules: ['@nuxtjs/axios'],
axios: {},
build: {},
};
Стили
Для добавления глобальных стилей вашего приложения создайте файл .css
в папке assets/styles
и добавьте его в массив css
файла nuxt.config.js
:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
Маршрутизация
Nuxt.js автоматически создает маршрутизацию на основе файлов .vue
в папке pages
. Создайте файл .vue
в папке pages
, чтобы добавить новую страницу:
<template>
<div>
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</template>