Как генерировать статический сайт с Vue.js в кратчайшие сроки

Автор оригинала: FreeCodeCamp Community Member.

ondřej polesný.

Вы решили построить статический сайт, но где вы начинаете? Как вы выбираете правильный инструмент для работы без предыдущего опыта? Как вы можете убедиться, что вы преуспели в первый раз, избегая инструментов, которые не помогут вам в конце?

В этой статье вы узнаете, как настроить веб-сайт Vue.js, который будет автоматически сгенерирован как статический сайт.

Вступление

Я кратко известел ключевые различия между веб-сайтом API и статическими сайтами в моем Предыдущая статья Отказ Как быстрое напоминание, статические сайты:

Продувая быстро
Безопасно (поскольку они просто набор статических страниц)
Регенерированные каждый раз редакторы обновляют контент
Совместим с дополнительной динамической функциональностью

Что такое статический генератор сайта?

Статический генератор сайта – это инструмент, который генерирует статический веб-сайт из реализации и контента веб-сайта.

Содержание может прийти из системы управления без головы, через API для отдыха. Реализация веб-сайта использует один из структур JavaScript, такие как Vue.js или реагировать. Вывод статического генератора сайта представляет собой набор статических файлов, которые образуют веб-сайт.

Реализация статического сайта

Я выбрал vue.js как javaScript framework для использования. Поэтому я буду работать с Nuxt.js , который является статическим генератором сайта для Vue.js.

Если вы используете другую структуру, ищите статический генератор сайта, построенный на вершине этой структуры (например GATSBY для Rect.js ).

По сути, NUXT – это сочетание нескольких инструментов, которые вместе позволяют создавать статические сайты. Инструменты включают в себя:

Vue2 – Core Vue.js Библиотека.
Vue Router – обрабатывает маршрутизацию URL для страниц на сайте.
Vuex – Memory Store для данных, которые передаются компонентами.
Vue Server Renderer – включает боковую рендеринг серверов страниц перед фактическими статическими файлами поколения
Vue-Meta – Управляет информацией об метаданных страницы

NUXT также определяет, как должен быть создан сайт для создания статических файлов.

Монтаж

Чтобы начать строительные сайты с NUXT, вам нужно его установить. Смотрите подробные инструкции по установке на WeaPage unxt.js Отказ В двух словах вам нужен NPX (поставляется с NPM по умолчанию) Установлено и запустить:

npx create-nuxt-app

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

Составные части

В Один из моих предыдущих статей Я объяснил, как создать макет и компоненты шаблона. Все они были определены в пределах одного файла Компоненты.js Отказ Это нужно быть изменено с NUXT. Все компоненты должны быть извлечены из Компоненты.js Файл в отдельные файлы под папкой Компоненты Отказ Посмотрите на мой Блог-список Компонент и его предыдущее реализация:

Vue.component('blog-list', { props: ['limit'], data: function(){  return {   articles: null  } },

 created: function(){  var query = deliveryClient   .items()   .type('blog_post')   .elementsParameter(['link', 'title', 'image_url', 'image', 'teaser'])   .orderParameter('elements.published', SortOrder.desc);   if (this.limit){   query = query.limitParameter(this.limit);  }  query   .getPromise()   .then(response =>    this.$data.articles = response.items.map(item => ({     url: item.link.value,     header: item.title.value,     image: item.image_url.value != '' ? item.image_url.value : item.image.assets[0].url,     teaser: item.teaser.value    }))   ); },

 template: `         ...   
  
 ` });

Чтобы отделить его, вам также необходимо изменить синтаксис компонента, чтобы соответствовать следующему шаблону:

Поэтому мой скорректированный Блог-список Компонент выглядит так:

Вы видите, что шаблон остался прежним. То, что изменилось, это реализация, которая сейчас находится внутри Экспорт по умолчанию раздел. Кроме того, раньше было функция, собирающая данные из безголового CMS Kentico Cloud.

Этот контент теперь хранится в магазине Vuex. Я объясню эту часть позже. Конвертировать все ваши компоненты таким образом, чтобы содержать шаблон внутри Теги и реализация W ithin & l t; скрипт> теги. Вы должны в конечном итоге с аналогичной структурой файла, так как у меня есть:

Обратите внимание, что у меня здесь есть два новых компонента – меню и заголовок. Поскольку моя цель была также улучшена производительность, я решил удалить jQuery с моего сайта. jQuery – это довольно большая и тяжелая библиотека, которая использовалась только для небольших эффектов UI. Я смог воссоздать их, используя только Vue.js. Следовательно, я преобразовал статический HTML, представляющий заголовок для компонента. Я также добавил функциональность, связанную с интерфейсом на монтируется Функция этого компонента.

mounted: function(){ window.addEventListener('scroll', this.scroll); …},methods: { scroll: function(){  … }}

Обработка событий vue.js с nuxt

Раньше я использовал мероприятия Vue на моем сайте. Основной причиной было управление ReCAPTCHA, используемое для проверки формы. Когда он был инициализирован, оно передает событие, чтобы компонент формы может разблокировать кнопку отправки контактной формы.

С NUXT, я больше не пользуюсь app.js или Компоненты.js файлы. Поэтому я создал новый recaptcha.js Файл, который содержит простую функцию, излучаю событие, когда ReCaptcha готовится. Обратите внимание, что вместо создания новых экземпляров Vue.js только для событий ( пусть Vue (); в моем старом коде), можно просто использовать Это. $ nuxt так же.

var recaptchaLoaded = function(){ this.$nuxt.$emit('recaptchaLoaded');}

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

Основная рамка страницы была index.html , и каждая страница определила свой собственный макет в постоянных, которые были переданы Vue Router.

С NUXT, основной рамкой, включая ML> Тег Meta Tags и другие Essentials любой HTML-страницы обрабатываются NUXT. Фактический реализация сайта обрабатывает только контент W ИТИН <Тело> Теги. Переместить макет, который распространен для всех ваших Страницы в макеты /default.vue и уважать тот же шаблон, что и с компонентами. Мой макет выглядит так:

Макет в основном HTML-разметки моего старого index.html Отказ Однако обратите внимание на PT> Раздел. Все компоненты, которые я хочу использовать в этом шаблоне макета, необходимо импортировать из их местоположения и указано в экспортируемом объекте.

Компоненты страницы были ранее определены в app.js в качестве постоянных. Посмотрите на мою старую домашнюю страницу, например:

const Home = { template: `                ...             See all
    
    ...   
  
 `}

Все эти страницы должны быть определены в отдельных файлах внутри Страницы папка. Главная страница всегда называется index.vue Отказ Вот как мой новый Страницы/index.vue (Моя домашняя страница) выглядит как:

Где хранить активы

На каждом сайте есть активы, такие как CSS Stylesheates, изображения, логотипы и Javascripts. С помощью NUXT все эти статические файлы должны храниться в статическом папке. Таким образом, структура папки в настоящее время выглядит так:

Когда вы ссылаетесь на любые ресурсы из таблиц CSS stylesheets, таких как шрифты или изображения, вам нужно использовать статическую папку в качестве корня:

background-image: url("~/assets/images/bg.jpg");

Получение контента

Со всеми компонентами и страницами на месте мы наконец доберемся до него: получать контент в компоненты.

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

NUXT содержит два специальных метода, которые обрабатывают вымывку асинхронных данных в нужное время, то есть до создания страниц. Эти методы – Asyncdata и извлекать Отказ Они доступны только для компонентов страницы (то есть файлы внутри Pages Папка) И их цель такая же, но Asyncdata Будет автоматически хранить полученные данные в рамках компонента набора данных.

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

Я выбрал последний. NUXT делает его очень легко для нас. Он автоматически включает в себя Vuex Store, который позволяет нашим компонентам и страницам доступа к любым данным, которые находятся в магазине. Чтобы начать использовать магазин все, что вам нужно сделать, это создать index.js Файл в пределах магазин папка.

import Vuex from 'vuex'

const createStore = () => { return new Vuex.Store({  state: () => ({}),  mutations: {},  actions: {}, })}export default createStore

Вы видите, что экземпляр имеет несколько свойств:

Государство Состояние похоже на данные в компонентах. Он содержит определение полей данных, которые используются для хранения данных.
Мутации Мутация – это специальные функции, которые разрешены для изменения данных в состоянии (мутировать штату).
Действия Действия – это простые методы, которые позволяют вам, например, реализовать логику сбора контента.

Давайте вернемся к Блог-список составная часть. Этот компонент нуждается в массиве блога, чтобы сделать его разметку. Поэтому в блоге необходимо хранить в магазине Vuex:

…const createStore = () => { return new Vuex.Store({  state: () => ({   blogPosts: null  }),  mutations: {   setBlogPosts(state, blogPosts){    state.blogPosts = blogPosts;   }  },  actions: {   getBlogPosts (context) {    logic to get content from Kentico Cloud   }  }, })}

После регулировки магазина Vuex так, Блог-список Компонент может использовать свои данные:

…

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

Запрос безголового CMS

Может быть, вы помните доставки был использован для получения данных из Кентако облако в компоненты.

Отказ от ответственности: Я работаю на Kentico, поставщику CMS, который обеспечивает как традиционные (сочетание) CMS, так и новое облачное сначала без головы – Centico Cloud.

Очень же логика может быть использована здесь, в мероприятиях магазина Vuex с небольшим количеством твика. Кентако облако имеет Модуль для NUXT.JS Установите его, используя следующую команду:

npm i kenticocloud-nuxt-module — savenpm i rxjs — save

С помощью этого модуля вы можете продолжать использовать доставки как раньше, только с $ приставка. Так что в моем случае логика для Get Blog выглядит так:

…getBlogPosts (context) { return this.$deliveryClient  .items()  ...  .orderParameter('elements.published', SortOrder.desc)  .getPromise()  .then(response => {   context.commit('setBlogPosts', response.items.map(item => ({    url: item.link.value,    header: item.title.value,    image: item.image_url.value != '' ? item.image_url.value : item.image.assets[0].url,    teaser: item.teaser.value   })))  }); },…

Если вы хотите использовать заказ, используя OrderParameter , вам может потребоваться включить другой импорт в магазин/index.js файл:

import { SortOrder } from 'kentico-cloud-delivery'

Теперь, когда реализована логика содержимого, пришло время использовать специальную асинхронную функциональную цепь, которую я упомянул ранее. Смотрите мою реализацию в index.vue страница:

async fetch ({store, params}) { await store.dispatch('getBlogPosts')}

Вызов Store.Dispatch автоматически вызывает getblogposts действие. В пределах getblogposts Реализация Обратите внимание на звонок для context.commit Отказ контекст Относится к магазину Vuex и совершать Передача поставленные сообщения в блоге в setblogposts мутация. Обновление набора данных со сообщениями в блоге меняет состояние магазина (мутатирует его). И мы почти закончены!

Другие варианты хранения контента

Я использовал Кентако облако Безголовый CMS и его API здесь, как я использую его на протяжении всех статей в этой серии. Если вы хотите также проверить другие варианты, вы можете найти независимый список безголовых CMS и их функции в headlesscms.org Отказ

Если вы не хотите использовать безголовую CMS и его API, вы можете решить хранить свой контент каким-либо другим способом – обычно в качестве набора файлов Markdown, непосредственно хранятся в вашем проекте или хранилище GIT. Вы можете найти хороший пример этого подхода в NUXT-Markdown-пример репозитория GitHub Отказ

Конфигурация NUXT

Все приложение должно быть правильно настроено с использованием Nuxt.config.js файл. Этот файл содержит информацию о используемых модулях, их конфигурации и основных местах сайта, таких как теги заголовка или SEO. Конфигурация моего сайта выглядит так:

export default { head: {  title: 'Ondrej Polesny',  meta: [   { charset: 'utf-8' },   ...   { hid: 'description', name: 'description', content: 'Ondrej Polesny — Developer Evangelist + dog lover + freelance bus driver' }  ],  script: [   { src: 'https://www.google.com/recaptcha/api.js?onload=recaptchaLoaded', type: "text/javascript" },   { src: 'assets/js/recaptcha.js', type: "text/javascript" }  ], }, modules: [  'kenticocloud-nuxt-module' ], kenticocloud: {  projectId: '*KenticoCloud projectId*',  enableAdvancedLogging: false,  previewApiKey: '' }, css: [  {src: 'static/assets/css/main.css'}, ], build: {  extractCSS: {   allChunks: true  } }}

Головная секция описывает сайте Essentials, как Название и Мета Теги, которые вы хотите включить в заголовок.

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

Чтобы увидеть все варианты для мета-тегов, пожалуйста, обратитесь к https://github.com/declandwet/vue-meta.

Бег и генерация

Статические сайты должны быть сгенерированы, прежде чем кто-либо может получить доступ или загружать их на FTP-сервер. Тем не менее, это было бы очень много времени, чтобы восстановить сайт каждый раз, когда изменение было сделано во время этапа разработки. Следовательно, вы можете запустить приложение локально, используя:

npm run dev

Это создаст для вас сервер разработки и позволит вам получить доступ к вашему веб-сайту на http://localhost: 8000 (или похоже). Пока вы сохраняете свою консоль, запустив эту команду, все изменения, которые вы делаете в ваших сценариях, будет немедленным эффектом на сайте.

Чтобы генерировать настоящий статический сайт, выполните следующую команду:

npx nuxt generate

Вывод, то есть ваш статический сайт, будет в Dist папка. Не стесняйтесь открывать любую страницу в вашем любимом текстовом редакторе и посмотрите, содержит ли исходный код содержимого от udrolless CMS. Если это так, это было успешно вырвано.

Заключение

Сгенерированный статический сайт значительно улучшит производительность сайта. По сравнению с традиционными сайтами веб-сервер не нужно выполнять какие-либо тяжелые операции CPU. Он только обслуживает статические файлы.

По сравнению с веб-сайтами API на основе API клиенты получают запрошенные данные мгновенно с самым первым ответом. Вот что делает их всеми так быстро – им не нужно ждать, пока внешний контент будет доставлен через дополнительные асинхронные запросы. Контент уже есть в первом ответе с сервера. Это значительно улучшает пользовательский опыт.

Преобразование сайта в реализации Vue.js в определения NUXT очень просты и не требует глубоких знаний всех используемых компонентов и пакетов.

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

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