Вытащите свой 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, где я буду рассматривать основные страницы и динамическую маршрутизацию.