Vue-SSR: head Mixin реализует управление информацией о голове

внешний интерфейс GitHub Vue.js Hexo

Я опубликовал свой первый технический блог на прошлой неделе,Портал 1:Фильтрация массивов в JS, от простой фильтрации до фильтрации по нескольким условиям, Спасибо за вашу поддержку, особенно студентам, которые подняли вопросы и нашли ошибки, спасибо. После публикации в блоге я настроил страницы github с hexo и привязал доменное имя, которое я купил ранее,Портал 2:blog.yidol.cn/, в будущем мой блог будет размещен на GitHub, а затем Nuggets снова скопирует его.

Последние два месяца я был занят созданием проекта vue-ssr, потому что продукты компании — это медиа, а SEO очень важно. В первую неделю я пытался построить проект с nuxt. Nuxt действительно не в тренде. box.При настройке вам может понадобиться посмотреть документацию nuxt и документацию webpack.Многие люди используют vue-cli3, чтобы иметь такое же ощущение. Так как компания уделила достаточно времени, я решил сослаться на официальный пример You Yuxi🌰Портал 3:vue-hacknews-2.0Мы построили новый проект нашей компании для ПК.Весь проект использует webpack4+vue2+vue-ssr от 0 до 1. Я наступил на некоторые ямы.Спасибо за статьи, написанные студентами на различных платформах в Интернете.Я планирую писать статьи, чтобы поделиться процессом строительства проекта, я надеюсь, что это может вам помочь.

Ниже темы этой статьи, особенно большим примером является метод TILTE Mixin, который может изменять заголовок каждой страницы, но наши требования могут быть разными страницами, не только другим заголовком, но и другим описанием, автором, ключевыми словами, есть многие люди в Интернете используют Vue-Meta, заинтересованные партнеры могут искать использование, сегодня я хочу обсудить Title Mixin в проекте evergast для удовлетворения потребностей нашей компании.

Миксин названия Юды

   Откройте проект vue-hacknewssrc/util/title.js, вы можете увидеть следующий код илиПортал 4:Руководство Vue SSR Управление головным офисом

// 获取模版里的 title
function getTitle (vm) { 
  const { title } = vm.$options
  if (title) {
    return typeof title === 'function'
      ? title.call(vm)
      : title
  }
}

// 如果有 title 了就加载新的 title，没有就还有默认的顶着，默认的 title 在哪里，稍后告诉你
// 下面俩一个是服务器端渲染时调用，一个是客户端渲染是调用，为啥俩不一样，可查看文末知识点

const serverTitleMixin = { 
  created () {
    const title = getTitle(this)
    if (title) {
      this.$ssrContext.title = `Vue HN 2.0 | ${title}`
    }
  }
}

const clientTitleMixin = { 
  mounted () {
    const title = getTitle(this)
    if (title) {
      document.title = `Vue HN 2.0 | ${title}`
    }
  }
}

export default process.env.VUE_ENV === 'server'
  ? serverTitleMixin
  : clientTitleMixin

документsrc/app.jsПредставьте Mixin глобально здесь

...
import titleMixin from './util/title'
...
// mixin for handling title
Vue.mixin(titleMixin)
...

  Здесь находится заголовок по умолчаниюsrc/server.js

...
//在render函数里
  const context = {
    title: 'Vue HN 2.0', // default title
    url: req.url
  }
...

   Использование в определенных компонентахsrc/views/UserView.vue

export default {
  name: 'user-view',
  ...
  title () {
    return this.user
      ? this.user.id
      : 'User not found'
  },
  ...
}

Процесс трансформации Head Mixin

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

использование в компонентах

Заголовок    — вернуть строку, я запихнул в объект то, что мне было нужно, и если бы мне нужно было его настроить, я бы его вернул, а если бы не нужно, то было бы по умолчанию.

export default {
  name: 'article-list',
  ...
  head(){
      return {
        'title': '文章列表',
        'author': '大侠'
      };
    },
  ...
}

Информация заголовка по умолчанию

Также вserver.jsвнутри

// 同样也在render 函数里
  const context = {
    'title': '可爱王', // 默认title
    'author': 'Anne', // 默认author
    'keywords': '我是keywords', // 默认keywords
    'description': '我是description', //默认description 
    'url': req.url // 我是重要的一行代码，但是我跟这篇文章没关系
  };// 没错我很无聊，打了这么多无聊的注释

Представляем глобальный головной миксин

Также вsrc/main.jsвнутри

import headMixin from './utils/head';
// head()
Vue.mixin(headMixin);

Определить головной миксин

существуетsrc/utils/head.jsЗдесь нужно судить, есть ли голова, есть ли все то, что мне нужно, если есть новый, это все еще по умолчанию.

function getHead (vm) {
  const { head } = vm.$options;

  if (head) {
    return typeof head === 'function' ?
      head.call(vm) :
      head;
  }
}

const serverHeadMixin = {
  created () {
    const head = getHead(this);

    if (head) {
      if (head.title) this.$ssrContext.title = `${head.title}-可爱王`;
      if (head.author) this.$ssrContext.author = `${head.author}-可爱王`;
      if (head.keywords) this.$ssrContext.keywords = head.keywords;
      if (head.description) this.$ssrContext.description = head.description;
    }
  }
};

const clientHeadMixin = {
  mounted () {
    const head = getHead(this);

    if (head) {
      if (head.title) document.title = `${head.title}-可爱王`;
      if (head.author) document.querySelector('meta[name="author"]').setAttribute('content', `${head.author}-可爱王`);
      if (head.keywords) document.querySelector('meta[name="keywords"]').setAttribute('content', head.keywords);
      if (head.description) document.querySelector('meta[name="description"]').setAttribute('content', head.description);
    }
  }
};

export default process.env.VUE_ENV === 'server' ?
  serverHeadMixin :
  clientHeadMixin;

Точка знаний 1: миксины

  Я не пользовался этой штукой до этого проекта,Портал 5:Введение в микширование в официальной документации vue

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

   Короче говоря, вы можете настроить функцию ловушки, на которую ссылается каждый экземпляр Vue, например, упомянутую в этой статье.head(), Потрясающий.

Пункт знаний 2: Жизненный цикл рендеринга на стороне сервера и рендеринга на стороне клиента отличается

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

над!

Не по теме: планы на будущие статьи

  😁 Если вы все еще смотрите, пожалуйста, оставьте комментарий! Статья на прошлой неделе набрала более 100 лайков в Nuggets.Я очень рад.Отдельное спасибо моему другу Дилану за исправление ошибок и пользователю сети Nuggets Auroral за напоминание о том, что пример кода рекурсивной оптимизации не имеет ничего общего с deepclone. Работаю в индустрии фронтенда уже больше двух лет, статей не вывожу.На прошлой неделе мне вдруг захотелось организовать свой блог, чтобы я могла систематизировать свои знания и делиться ими в помощь всем, и я надеюсь, что смогу выстоять. Я хочу написать слишком много, но моя энергия ограничена. Я хочу перечислить некоторые статьи, которые я хочу написать, одну за другой. Если вы видите эту статью, вы можете прокомментировать, какую из них вы хотите прочитать. Я напишу первым.

  1. Реализация нескольких макетов одностраничного приложения vue

  2. От нуля к единице: создайте проект vue с помощью webpack4

  3. От нуля до единицы: создайте проект с помощью vue-cli3

  4. От нуля до единицы: создайте проект vue-ssr с помощью nuxt

  5. От нуля до единицы: создайте собственный онлайн-блог с помощью github и hexo

  6. Серия Vue-ssr основана на vue-hacknhews 2.0. Пишите все, что приходит на ум

  7. Некоторые полезные веб-сайты с инструментами для фронтенд-разработки

    Многие писали с нуля на единицу, но я до сих пор в списке, и если мне не повезет выиграть, я попробую написать по другому.

Категории