Установка

Начать работу с Nuxt.js действительно очень легко. Простой проект требует лишь указания зависимости nuxt в package.json.

Использование стартового шаблона Nuxt.js

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

Скачайте .zip, или установите стартовый шаблон с помощью vue-cli:

$ vue init nuxt-community/starter-template <project-name>

Если vue-cli ещё не установлен, это можно сделать так: npm install -g vue-cli

затем установите зависимости:

$ cd <project-name>
$ npm install

и запустите проект:

$ npm run dev

Теперь приложение доступно по адресу http://localhost:3000

Nuxt.js отслеживает изменения файлов внутри папки pages, поэтому перезапускать приложение после добавления новых страниц не нужно.

Узнать больше о структуре папок проекта можно в разделе Структура папок.

Создание с нуля

Начать приложение Nuxt.js с нуля также очень просто — необходимы лишь 1 файл и 1 папка. Давайте создадим новую папку:

$ mkdir <project-name>
$ cd <project-name>

Подсказка: замените project-name на название своего проекта.

Файл package.json

Проекту необходим файл package.json, чтобы запустить nuxt:

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

Раздел scripts запускает Nuxt.js командой npm run dev.

Установка nuxt

После создания package.json добавьте nuxt в свой проект через npm:

npm install --save nuxt

Папка pages

Nuxt.js преобразовывает файлы *.vue папки pages в маршруты приложения.

Создайте папку pages:

$ mkdir pages

затем создайте первую страницу pages/index.vue:

<template>
  <h1>Hello world!</h1>
</template>

и запустите приложение:

$ npm run dev

Теперь приложение доступно по адресу http://localhost:3000

Nuxt.js отслеживает изменения файлов внутри папки pages, поэтому перезапускать приложение после добавления новых страниц не нужно.

Узнать больше о структуре папок проекта можно в разделе Структура папок.

Обнаружили ошибку или хотите внести свой вклад в документацию? Отредактировать эту страницу на GitHub!