Want to take a look at our new docs? Our new docs are now in beta. Have fun!

Установка

Начать работу с 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 @vue/cli-init

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

$ 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, поэтому перезапускать приложение после добавления новых страниц не нужно.

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

Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

StoryblokMoovweb Support Us