Nuxt.js

В данной статья я опишу своё знакомство с nuxt.js. На главной странице данного фреймворка нам предлагают поиграить с Nuxt. Вы можете играть с Nuxt онлайн прямо на CodeSandbox или StackBlitz:

Здесь вы найдете информацию о настройке и запуске проекта Nuxt в 4 этапа.

https://nuxtjs.org/docs/get-started/installation/

Я попробовал изменить template, но ничего не произошло

Нажад Fork (создалась новая ветка моего проекта на GitHub), пошло обовление пакетов и всё заработало

Теперь мы видем самое дорогое для каждого кто осваивает новую технологию, что сообщение Hello World появилось. Катим дальше.

Table of Contents

Для перехода между страницами вашего приложения вы должны использовать компонент NuxtLink . Этот компонент включен в Nuxt, и поэтому вам не нужно импортировать его, как другие компоненты. Он похож на <a>тег HTML , за исключением того, что вместо href="/about"использования to="/about". Если вы использовали vue-routerраньше, вы можете думать об этом <NuxtLink>как о замене<RouterLink>

Простая ссылка на index.vueстраницу в вашей pagesпапке:страницы / index.vue

<template>
  <NuxtLink to="/">Home page</NuxtLink>
</template>

Для всех ссылок на страницы вашего сайта используйте <NuxtLink>. Если у вас есть ссылки на другие сайты, вам следует использовать этот <a>тег.

Попробовал набросать в основной шаблон

Далее разбираемся со структурой каталогов

Структура каталогов

Структура приложения Nuxt по умолчанию предназначена для обеспечения отличной отправной точки как для малых, так и для больших приложений. Вы можете организовать свое приложение так, как вам нравится, и создавать другие каталоги по мере необходимости.

Создадим каталоги и файлы, которых еще нет в нашем проекте.

Справочники

Каталог страниц

pages Каталог содержит виды и маршруты вашего приложения. Как вы узнали из предыдущей главы, Nuxt считывает все .vue файлы внутри этого каталога и использует их для создания маршрутизатора приложений.Узнать больше о каталоге страниц

Каталог компонентов

В components каталог вы помещаете все свои компоненты Vue.js, которые затем импортируются на ваши страницы.

С помощью Nuxt вы можете создавать свои компоненты и автоматически импортировать их в файлы .vue, что означает, что нет необходимости вручную импортировать их в раздел скриптов. Nuxt просканирует и автоматически импортирует их, как только у вас будет установлено значение true для компонентов.