Обмен знаниями о бэкэнд # 26

Портфолио с NUXT.js, Отладчик

Оглавление:

1. Портфолио с NUXT.js - Часть A
2. Мощный инструмент для отладки, Debugger

Портфолио с Nuxt.js - Часть A

На этой неделе Сандип Шреста рассказал о том, как легко создать наше портфолио или любой другой веб-сайт с помощью NUXT.js.

Nuxt - это прогрессивный фреймворк, основанный на официальных библиотеках Vue.js (vue, vue-router и vuex) и поставляется с предустановленными мощными инструментами разработки (webpack, Babel и PostCSS) для создания современных веб-приложений.

Зачем использовать Nuxt?

1. Структурированный проект Vue.js (запись файлов vue)
2. Мощная система маршрутизации и асинхронные данные
3. SSR, SPA или статический сайт (на ваш выбор)
4. Горячая перезагрузка

Установка и настройка

npx create-nuxt-app website_name

Макеты и страницы

Layouts - это каталог в корневом проекте, который содержит макеты наших приложений. Каждый файл (первый уровень) в каталоге макетов будет создавать настраиваемый макет, доступный с помощью свойства макета в компоненте страницы.

Примечание. Используйте ключ макета в компонентах страниц, чтобы определить, какой макет tolayouts/default.vue file будет использоваться для всех страниц, для которых не указан макет.

export default {
 layout: ‘blog’,
 // OR
 layout (context) {
 return ‘blog’
 }
}

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

Маршрутизация

Nuxt.js автоматически генерирует vue-router конфигурацию на основе вашего файлового дерева файлов Vue внутри каталога страниц.

Это файловое дерево:

pages/
 - | user/
 - - -| index.vue
 - - -| one.vue
 - | index.vue

автоматически сгенерирует:

router: {
 routes: [
 {
   name: 'index',
   path: '/',
   component: 'pages/index.vue'
 },
 {
   name: 'user',
   path: '/user',
   component: 'pages/user/index.vue'
 },
 {
   name: 'user-one',
   path: '/user/one',
   component: 'pages/user/one.vue'
 }
 ]
}

Для перехода между страницами мы можем использовать компонент <nuxt-link>.

Например:

<template>
 <nuxt-link to="/">Home page</nuxt-link>
</template>

Динамические маршруты

Чтобы определить динамический маршрут с параметром, вам необходимо определить файл .vue ИЛИ каталог с префиксом подчеркивания.

pages/
--|blogs
----| _slug/
----| index.vue
--| index.vue

автоматически сгенерирует:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'blogs',
      path: '/blogs',
      component: 'pages/blogs/index.vue'
    },
    {
      name: 'blogs-slug',
      path: '/blogs/:slug?',
      component: 'pages/blogs/_slug.vue'
    },
  ]
}

Проверка маршрута

Nuxt.js позволяет определить метод валидатора внутри компонента динамического маршрута с помощью метода validate.

Если метод проверки не возвращает true, NWhy to Use Nuxt? Uxt.js автоматически загрузит страницу с ошибкой 404.

export default {
 validate ({ params }) {
 // returns true if the parameter is a number
 return /^\d+$/.test(params.id)
 }
}

Он продолжит на следующей сессии.

Мощный инструмент для отладки, Debugger

На этой неделе Акита Накарми рассказала, как перестать использовать console.log() и начать использовать отладчик вашего браузера. Мы использовали console.log() для отладки нашего кода. Теперь мы пришли к выводу, что на самом деле мы не должны отлаживать нашу программу таким образом.

Есть способ получше.

Пришло время воспользоваться инструментами отладки браузера.

Чтобы отлаживать в Chrome, вам нужно привыкнуть к DevTools. Чтобы открыть Инструменты разработчика Chrome, нажмите Command+Option+I (Mac) или Control+Shift+I (Linux). Отладчик считается самым мощным инструментом, который можно найти на панели источников в инструментах разработчика браузера.

Оператор отладчика останавливает выполнение JavaScript, использование оператора отладчика имеет ту же функцию, что и установка точки останова в коде. Чтобы отладить нашу программу, мы можем просто установить точку останова и пройти через наш код, чтобы найти значения так, как их видит браузер. .

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

Во всех инструментах отладки у пользователя есть два варианта навигации по выполнению кода. Пользователь может либо «перейти», либо «перешагнуть» следующий вызов функции.

С помощью отладчика мы также можем узнать значения. Панель источников дополнительно содержит панель видимости и наблюдения, где мы можем получить соответствующие значения переменной. По сути, она показала нам, как «отладчик» помог ей при отладке в JavaScript.

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

Это все на этой неделе, на следующей неделе мы вернемся с другими интересными темами. Продолжай читать.