Руки на веб-разработке NUXT.JS: создайте универсальные и статические приложения VUE.JS с помощью NUXT.JS

Автор оригинала: LAU TIAM KOK.

Nuxt.js Прогрессирующая веб-каркас, построенная на вершине Vue.js для рендеринга на стороне сервера (SSR). С Nuxt.js и vue.js, здание универсальные и статические приложения с нуля теперь проще, чем когда-либо прежде.

Я недавно опубликовал книгу, Руки на веб-разработке Nuxt.js , для Packt Publishing Отказ Пожалуйста, возьмите копию, если вы находитесь в создании универсальных и статических приложений Vue.js, используя NUXT.JS. Это также доступно в Amazon UK Отказ

Эта книга начинается с введения в NUXT.JS и его составляющих в качестве универсальных структур SSR. Вы узнаете основы NUXT.JS и узнаете, как вы можете интегрировать его с последней версией Vue.js. Затем вы исследуете структуру каталогов NUXT.JS и настроили свой первый проект NUXT.JS с помощью страниц, представлений, маршрутизации и компонентов Vue. С помощью практических примеров вы узнаете, как подключить приложение NUXT.JS с API BackeND, изучая конфигурацию приложения NUXT.JS, плагины, модули, промежуточное программное обеспечение и магазин Vuex. Книга показывает, как вы можете превратить приложение NUXT.JS в универсальное или статическое приложение, работая с APIS-адресами REST и Graphql над HTTP-запросами. Наконец, вы получите справиться с методами безопасности, используя авторизацию, упакуйте приложение NUXT.JS для тестирования и развернуть его к производству.

К концу этой книги веб-разработки вы получите солидное понимание использования NUXT.JS для ваших проектов и сможем создавать безопасные, сквозные испытанные и масштабируемые веб-приложения с SSR, обработкой данных, а также SEO возможности.

Я рад поделиться некоторыми разделами Глава 10 В этой книге следующим образом:

Наличие системы базы данных, такая как Mongodb для управления нашими данными, отличная, так как мы можем использовать его для удаленного запроса данных для наших маршрутов, когда требуется. Однако иногда нам нужно поделиться некоторыми данными по страницам или компонентам, и мы не хотим делать дополнительные и ненужные HTTP-запросы на такие данные. В идеале, мы хотели бы иметь центральное место в нашем местном приложении, где мы можем хранить этот «вездесущий» и централизованные данные. К счастью, у нас есть система под названием Vuex для хранения этих данных для нас, и это то, что вы будете исследовать в этой главе. Таким образом, в этой главе вы узнаете, как использовать Vuex для государственного управления (централизованное управление данными) в ваших приложениях. Вы узнаете о архитектуре Vuex, ее основных концепций и предложенной структуре каталогов для управления модульными магазинами Vuex. Наконец, вы узнаете, как активировать и использовать магазин Vuex в приложениях NUXT. Темы, которые мы будем покрывать в этой главе следующие:

• Понимание архитектуры Vuex

• Начало работы с Vuex

• Понимание основных концепций Vuex

• Структурирование модулей магазина Vuex

• Обработка форм в магазине Vuex

• Использование магазина Vuex в NUXT

Понимание архитектуры Vuex

Прежде чем изучать, как использовать магазин Vuex в приложениях NUXT, мы должны понимать, как он работает в стандартных приложениях Vue. Но что такое Vuex? Давайте узнаем в предстоящем разделе.

Что такое Vuex?

В двух словах Vuex – это централизованные данные (также называемые государством) системой управления с некоторыми правилами (которые мы будем позаботиться о потом), чтобы убедиться, что состояние может быть мутировано только из нескольких (далеких) компонентов, которые необходимо получить доступ к общему данные. Эта идея централизации информации распространена с такими инструментами, как Redux в реакции. Все они разделяют аналогичное государственное управление с помощью Vuex. Давайте посмотрим, на что находится этот шаблон в следующем разделе.

Узор государственного управления

Чтобы понять государственный шаблон управления в Vuex, давайте посмотрим на простое приложение Vue, которое мы уже знакомы с:

new Vue({
  // state
  data () {
    return { message: '' }
  },

  // view
  template: `
    

      
{{ message }}
      Greet
    
  `,

  // actions
  methods: {
    greet () {
      this.message = 'Hello World'
    }
  }
}).$mount('#app')

Это простое приложение имеет следующие части:

• Государство , который содержит источник приложения
• Вид , который отображает состояние
• Действия , который можно использовать для мутации состояния с вида

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

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

Таким образом, разделение с использованием государственного управления с некоторыми насильственными правилами может поддерживать независимость взглядов и государства. Используя это, мы можем сделать наш код более структурированным и поддерживаться. Давайте посмотрим на архитектуру Vuex на следующей диаграмме:

Ссылочный источник: https://vuex.vuejs.org/

В двух словах Vuex состоит из действий, мутаций и государства. Состояние всегда мутируется через мутации, а мутации всегда совершаются через действия в жизненном цикле Vuex. Затем мутированное состояние оказывается компонентам и в то же время действия (обычно) отправлены от компонентов. Связь с Backend API обычно происходит в действиях. Давайте начнем с Vuex в следующем разделе и погрузиться в свои конституции.

Начало работы с Vuex

Как мы упоминали в предыдущем разделе, все виды деятельности Vuex происходят в магазине, которые могут быть созданы просто в вашем корневом проекте. Однако, хотя кажется простой, магазин Vuex отличается от простого объекта JavaScript, потому что магазин Vuex является реактивным, как и двусторонний привязки на элементе <ввода> с директивой V-модели. Таким образом, любые данные состояния, которые вы получаете в компонентах Vue, реактивно обновляются при изменении в магазине. Данные в штате магазина должны быть явно совершены через мутации, как мы объяснены на диаграмме в предыдущем разделе.

Для этого упражнения мы будем использовать одно файловый компонентный скелет для создания нескольких простых Vue приложений с Vuex. Мы поставим весь наш выборкий код в /Глава-10/Vue/Vuex-SFC/ В нашем репозитории GitHub. Давайте начнем.

Установка Vuex.

Прежде чем мы сможем создать магазин Vuex, мы должны установить Vuex и импортировать его, используя следующие шаги:

1. Установите Vuex с помощью NPM:

$ npm i vuex

1. Импортируйте и зарегистрируйте его с помощью метода vue.use ():

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

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

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

Создание простого магазина

Мы можем начать с простого магазина с помощью CDN или прямой загрузки со следующими шагами:

1. Установите Vue и Vuex с HTML
   1. Активируйте магазин Vuex в HTML блокировать:

   Из этого кода вы можете увидеть, что вам нужно просто создать состояние Vuex в объекте JavaScript, методом мутации, а затем вы можете получить доступ к объекту состояния с ключом хранилища и вызвать изменение состояния с помощью метода фиксации магазина, следующим образом:

   store.commit('increment')
   console.log(store.state.count)
   

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

   Понимание основных концепций Vuex

   (Пожалуйста, выясните остальную часть контента в Packt или Amazon UK . Опять же, я рад поделиться резюме Последняя глава в этой книге, как следует:)

   Резюме

   В этой главе вам удалось создать пользовательские типы постов и маршруты для расширения API WordPress REST API, интегрированные с NUXT и передавали удаленные ресурсы из WordPress для создания статических страниц. Вам также удалось настроить CMS от Keystone, создавая списки и поля. Затем вы узнали, как создать API GraphQL на низком уровне с GraphQL.js и на высоком уровне с помощью языка схемы GraphQL и сервером Apollo. Теперь, когда вы схватили основы Graphql, вы можете запросить API Keystone GraphQl из приложения NUXT с помощью запросов GraphQL и Axios. И, не в последнюю очередь, вы можете потокотать удаленные ресурсы из проекта Keystone в проект NUXT для создания статических страниц. Отличная работа!

   Это было очень долгое путешествие. Вы ушли из изучения структуры каталога NUXT для добавления страниц, маршрутов, переходов, компонентов, магазинов Vuex, плагинов и модулей, а затем для создания пользовательских логинов и аутентификации API, написание сквозных тестов и создание NUXT SPAS (статические страницы). Вы также интегрировали NUXT с другими технологиями, инструментами и рамками, включая MongoDB, RETHINKDB, MYSQL, PostgreSQL и GraphQL; KOA, Express, Keystone и Socket.io; PHP и PSRS; Фонд Zurb и меньше CSS; и красивее, eslint и standredjs.

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

   Обратите внимание, что окончательный пример приложения этой книги можно найти на веб-сайте автора. Это предварительно сгенерированное STATATION, созданное веб-приложение, сделанное статической целью NUXT и Graphql! Пожалуйста, посмотрите и изучите его на https://lauthiamkok.net/ Отказ