Pull to refresh

Nuxt.js: Фреймворк для фреймворка Vue.js

Reading time2 min
Views78K

image


Цитата с официального сайта:


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

Подводные камни


  1. Проверяйте правильность написание кода, особенно в файле конфигурации, так как если он его посчитает битым, то он его просто не будет обрабатывать и не выведет ни каких ошибок.
  2. Быть аккуратнее с папками, так как может начать ругаться на отсутствие пустых папок

Ресурсы


Официальный сайт
Русскоязычный гайд и документация (Перевод не полный)

Tags:
Hubs:
Total votes 16: ↑12 and ↓4+8
Comments24

Articles