Цитата с официального сайта:
25 октября 2016 команда zeit.co анонсировала Next.js, фреймворк для приложений на React с серверным рендерингом. Через несколько часов после этого объявления родился Nuxt.js — воплощение аналогичной идеи для Vue.js.
Nuxt.js — это фреймворк для создания универсальных приложений на Vue.js с использованием Node.js. С помощью него можно рендерить UI на сервере и генерировать статические сайты.
В нем используется:
- Vue 2
- Vuex
- Vue-Router
- Vue-Meta
- vue-loader
- babel-loader
- Webpack
Hello world Nuxt.js
Создать первое универсальное приложение двумя способами:
1) С помощью шаблона из vue-cli
Если не установлен vue-cli то устанавливаем
npm install -g vue-cli
Теперь создаем проект по готовому шаблону
vue init nuxt-community/starter-template
И запускаем
npm run dev
2) Руками с нуля
Создадим папку для проекта и в ней файл package.json
{
"name": "my-app",
"scripts": {
"dev": "nuxt"
}
}
Здесь мы указали как мы будем запускать приложение. Далее устанавливаем сам Nuxt.js
npm install --save nuxt
После того как все установилось в папке нашего проекта создаем папку pages. В ней будут храниться наши страницы сайта с расширением .vue. После запуска, Nuxt все их преобразовывает в маршруты приложения. Создадим index.vue
<template>
<h1>Привет Nuxt.js!</h1>
</template>
Как видно Nuxt использует туже шаблонизацию что и Vue. И теперь запустим наше приложение.
npm run dev
Оно доступно по адресу http://localhost:3000/
Блэкджек и конфиг
Также в Nuxt есть свои обязательные папки и файл конфигурации nuxt.config.js. В нем можно настроить заголовки сайта, подключить глобальные CSS, включить кэширование и многое другое.
Список папок:
- assets — Исходные файлы SASS, LESS или JS
- components — Компоненты приложения, например описание preloader'a
- layouts — Шаблоны, например страница об ошибке
- middleware — Позволяет определять пользовательские функции, которые могут быть запущены до отображения страницы или группы страниц (layouts).
- pages — Представления(наши страницы) и по тому как они распложены в этой папке он строит маршруты
- plugins — Плагины
- static — Статические файлы, например robots.txt
- store — Хранилище Vuex
Подводные камни
- Проверяйте правильность написание кода, особенно в файле конфигурации, так как если он его посчитает битым, то он его просто не будет обрабатывать и не выведет ни каких ошибок.
- Быть аккуратнее с папками, так как может начать ругаться на отсутствие пустых папок
Ресурсы
Официальный сайт
Русскоязычный гайд и документация (Перевод не полный)