Вытащите свой Nuxt, Вытащите свой Nuxt, Получите свой Nuxt для парней.

В этом руководстве предполагается, что вы уже установили Nuxt.js с помощью NPM и на этом этапе готовы к локальной разработке. Если это не так, ознакомьтесь с моим руководством Начало работы с Nuxt.js.

Итак, сначала перейдите в папку своего проекта и откройте nuxt.config в редакторе кода.

Чтобы все настроить, мы хотим сначала создать некоторые активы, поэтому откройте папку с активами и добавьте следующую структуру файлов и папок.

/images/ /css/ /css/main.css /js/ /js/main.js /other/ /other/other_script.js /other/other_style.css

Теперь вернитесь в свой nuxt.config и добавьте / исправьте следующее

css: [ '~assets/css/main.css', '~assets/css/fonts/fonts.css' ],

Это добавляет файлы CSS как зависимости

plugins: [ {src: '@/assets/js/dw.js', ssr: false} ],

Обратите внимание, что для нашего js задано значение SSR: False отключает SSR и позволяет скрипту работать по назначению.

Теперь у нас есть настройка ресурсов, теперь мы можем приступить к настройке нашей структуры каталогов, для этого перейдите в папку с именем «pages» и добавьте следующую структуру.

/about/ about/index.vue posts/ posts/_id/ posts/_id/_slug.vue

Теперь перейдите в папку своего проекта и откройте в редакторе кода pages / index.vue.

Первое, что мы хотим сделать, это сбросить наш макет, заменив код пустым скриптом, тегом стиля и шаблоном, а затем, когда мы сбросим нашу страницу, мы захотим сделать наши метаданные динамическими, чтобы они обновлялись при переходе к новая страница. Для этого поместите следующий код в тег скрипта.

export default { head(){ return{ title: 'This is a Nuxt Tute', meta: [ {name: 'description', content: 'This is the description meta tag'}, {name: 'keywords', content: 'This is the keywords meta tag'} ] } } }

Вот и все, дальше - однофайловые компоненты.

Однофайловые компоненты Nuxt.js

Одним из самых больших преимуществ Vue.js является возможность работы с многократно используемыми однофайловыми компонентами. Давайте немного продвинемся в работе над Nuxt.js PWA, создав наш первый однофайловый компонент.

Этот следующий шаг - чисто мое предпочтение, но мне нравится начинать с добавления новой папки в мою папку макетов, которая называется partials, хотя этот компонент можно так же легко добавить непосредственно в папку макетов.

Внутри нашей папки partials мы создадим новый файл partials/header.vue, это будет наш компонент заголовка, который будет использоваться на всем сайте, так что теперь давайте добавим немного кода.

См. Пример кода здесь
https://codepen.io/flashvenom/pen/PMKbLN

Выше мы добавили наш код шаблона, который состоит из анимированного кликабельного значка гамбургера, который, в свою очередь, активирует раскрывающееся меню мобильного стиля при нажатии, подробнее о меню в более позднем руководстве, но теперь нам нужно добавить это в макет, и в этом конкретном случае наш компонент - это заголовок, который будет согласован на всем сайте, поэтому мы можем просто добавить этот компонент в наш layouts/default.vue

См. Перо ниже
https://codepen.io/flashvenom/pen/wVqgKd

Первое, что следует здесь упомянуть, - это обратить внимание на то, как мы импортируем компонент <Header/>, за которым следует тег <Nuxt/>, в котором находится шаблон со страниц.

Так, если бы у вас был, например, тег h1 со словом «hello world» в вашем /pages/index.vue, он отобразился бы в компоненте <Nuxt/>.

Хороший способ взглянуть на общую структуру фреймворка, который я нашел, - это подумать о том, что layouts/default.vue - это наша родительская оболочка для всех компонентов сайта, так что именно здесь наш верхний и нижний колонтитулы будут находиться.

<Nuxt/> - это оболочка для страниц, страницы - это оболочки для компонентов, компоненты - это оболочки для HTML / шаблона, JS, CSS.

Итак, на этом этапе вы можете перейти на свой локальный хост и увидеть заголовок со значком гамбургера, который при нажатии активирует меню.

На этом пока все, обратите внимание на часть 2, где я буду рассматривать основные страницы и динамическую маршрутизацию.