Я снова вернулся~ На этот раз мы изучим серверный рендеринг Vue SSR.

В Интернете есть много статей о SSR, но я сначала растерялся. затем перейтиРуководство по рендерингу сервера Vue.jsа такжеОфициальный сайт NuxtПрочитав его, я обнаружил, что большинство статей являются содержанием официального сайта транспорта, и очень немногие действительно понятны. Поэтому я хочу написать статью, чтобы узнать о SSR, в надежде помочь вам быстро понять Vue. ССР.

Что такое ССР?

SSR, то есть рендеринг сервера, заключается в рендеринге страницы Vue на стороне сервера для создания html-файла и передачи html-страницы в браузер. преимущество:

• В отличие от HTML SPA, который имеет только один HTML без фактического содержимого и один app.js, HTML, сгенерированный SSR, имеет содержимое, которое позволяет поисковым системам индексировать содержимое страницы.
• Более быстрое получение контента. Традиционное приложение SPA должно получать файл bundle.js с сервера, а затем анализировать и монтировать его в dom на стороне клиента. В то время как SSR передает строку HTML непосредственно в браузер. Значительно ускорено время загрузки в верхней части страницы.

Это видно из следующих двух рисунков: первое изображение — HTML-страница, созданная SSR, а второе — HTML-страница, созданная традиционным SPA.

SSR
SPA

Nuxt.js

Я прочитал введение официального SSR, а также прочитал документацию Nuxt.js. По сути, SSR — это поведение бэкэнда узла, так как я просто хочу хорошо написать код внешнего интерфейса, я не хочу слишком много выбрасывать. И Nuxt.js прекрасно интегрирует функции SSR. Давайте использовать его из коробки ~ Чиновник также рекомендует использовать Nuxt.js для создания проектов SSR.

выгода

Я думаю, что у Nuxt.js есть несколько преимуществ перед написанием SSR самостоятельно.

• Нет необходимости настраивать Webpack: сначала я все еще искал конфигурацию Webpack, и, прочитав документацию, я знаю, что nuxt упаковал его для нас. Чтобы изменить конфигурацию Webpack, просто измените файл nuxt.config.js.
• Знание узлов не требуется: если вы можете написать интерфейс Vue, вы можете написать SSR. Нет необходимости знать методы настройки SSR, узла и экспресса (но текущий интерфейс будет иметь некоторые знания об узлах~).
• Он интегрирует ведро семейства vue и может использоваться напрямую. так же удобно, какvue-cli: Установите Nuxt - напишите компоненты - скомпилируйте и запустите сервисы - увидите эффект. Это так просто.
• Простая конфигурация и удобная документация: если вы внимательно посмотрите на документацию Nuxt.js, вы обнаружите, что там не так много контента, но функции очень полны, что очень подходит для начала.

Установить

способ установкиздесь. Очень просто, сгенерируйте шаблон, затем npm установите зависимости и, наконец, запустите.
Просто перейдите к следующим шагам.

// vue-cli 创建nuxt模板项目
$ vue init nuxt-community/starter-template <project-name>
// 安装依赖项
$ cd <project-name>
$ npm install
// 编译并启动服务
$ npm run dev
// 打开 http://localhost:3000

Возникли проблемы при установке:
Поскольку Nuxt.js используетasync...awaitсинтаксис, который не поддерживается более ранними версиями узла, поэтому необходимо обновить узел до7.0версия выше~
Тогда рекомендуется не использовать cnpm.Я использую cnpm для установки и запуска старого отчета об ошибках, и я чувствую, что есть яма.

Структура каталогов

Nuxt.js уделяет много внимания структуре каталогов, и, по сути, понимание структуры каталогов даст вам общее представление о Nuxt.js. В Nuxt.js все настроено за нас, нам просто нужно создать файл и написать код в соответствующем каталоге в соответствии с его требованиями.

• Активы необходимо скомпилировать файлы ресурсов, таких как JavaScript, Sass, меньше и так далее.
• static Статические файлы ресурсов, которые не нужно компилировать, например ресурсы изображений.
• компонентов, как следует из названия, хранит*.vueместо компонента. Регулярное написание компонентов vue.
• layouts Каталог макета, где установлен макет, где<nuxt/>Теги — это содержимое страницы, о котором мы пишем. Может использоваться для добавления разделов, таких как панели навигации, нижние панели и т. д.
• промежуточное ПО Каталог промежуточного ПО, так называемое промежуточное ПО, представляет собой метод функции, выполняемый при переходе на страницу и страницу. Например, проверка информации о пользователе при переходе на страницу.
• страницы Каталог страниц. Вот и настал момент~ Здесь мы храним наши отображаемые страницы. Файлы в этом каталоге будут преобразованы в соответствующие пути маршрутизации для доступа браузеров. Кроме того, в этом каталоге*.vueNuxt.js в файле подкачки предоставляет несколько специальных методов для обработки событий, отображаемых сервером. Подробная информация о маршрутизации и специальных методах приведена ниже.
  • маршрутизация страниц
  • компонент страницыДля краткого ознакомления см. использование конкретных элементов специальной конфигурации.API.
• plugins Каталог плагинов, сторонние плагины, такие как mint-ui, размещаются здесь ~ Специальное использованиеСмотри сюда.
• сохранить каталог менеджера состояния vuex, если этот каталог пуст, Nuxt.js не включит vuex. Когда мы создаем файл index.js в этой папке, мы можем использовать менеджер состояний vuex. Применениездесь!
• nuxt.config.js Этот файл является единственным элементом конфигурации Nuxt.js.Как упоминалось ранее, Nuxt.js инкапсулирует все конфигурации, такие как Webpack, поэтому, если вам нужна специальная конфигурация, вам нужно только изменить этот файл, чтобы переопределить конфигурацию по умолчанию. . . . Конкретные параметры конфигурации см.API.
• package.json не объясняет...

Демо

хорошие новости,VueStudyDemosОн снова обновлен! Добро пожаловать в Звезду~Демонстрация этой статьиОн был включен в VueStudyDemos.
Давайте кратко реализуем функции, упомянутые в каждой папке ниже.

загрузка ресурсов

Я добавил потрясающую библиотеку шрифтов в папку с ресурсами и поместил изображение логотипа Vue в статическую папку. Затем звоните на ресурс.

<i class="fa fa-address-book" aria-hidden="true"></i>
<img src="~/static/logo.png" />

Это должен быть удивительный шрифт css, который станет глобальным css, css на каждой странице, чтобы избежать использования библиотеки импорта шрифтов. Итак, мы добавляем следующую конфигурацию в nuxt.config.js.

module.exports = {
  ...
  css: [
    '~/assets/font-awesome/css/font-awesome.min.css'
  ],
  ...
}

определение компонента

Компоненты хранятся в папке компонентов, о которой мы упоминали, когда говорили о каталогах. Использование компонентов соответствует использованию общих компонентов vue. Определите компонент Аватар и используйте его на странице Страницы.

<template>
  <avatar/>
</template>
<script>
import avatar from '~/components/Avatar'
export default {
    ...
    components: {
        avatar
    }
};
</script>

макет

В каталоге макетов по умолчанию используется макет по умолчанию. Мы можем изменить макет по умолчанию или создать новый макет для использования.
в файле макета</nuxt>Метка — это область, которую мы хотим отобразить на сервере.
Давайте создадим макет для игры.

// layouts/page.vue
<template>
<div>
    <mt-header fixed title="标题2"></mt-header>
    <nuxt/>
</div>
</template>

Затем давайте воспользуемся макетом и настроим параметр макета на странице страниц (если он не настроен, по умолчанию используетсяdefault).

export default {
    ...
    layout: 'page'  // 默认是 'default'
};

промежуточное ПО

Так называемое промежуточное ПО — это поведение, выполняемое между двумя переходами на страницу. Например, я определяю промежуточное ПО add.js

export default function ({ store }) {
    store.commit('increment')
}

Затем настройте в nuxt.config.js:

module.exports = {
  ...
  router: {
    middleware: 'add'
  },
  ...
}

Таким образом, метод промежуточного программного обеспечения будет выполняться каждый раз при переходе на страницу. Конечно, вы также можете определить промежуточное программное обеспечение страницы отдельно, подробности см. на официальном сайте~

страница

Страница находится в каталоге pages*.vueфайл, Nuxt.js настраивает структуру каталогов как систему маршрутизации vue-router, поэтому мы можем напрямую обращаться к соответствующей странице через имя файла (не говоря уже о специальных маршрутах).
Напримерpages/app.vueфайл черезhttp://localhost:3000/appпосетить.
Примечание. Компоненты страницы написаны так же, как и обычные компоненты Vue, но Nuxt.js также предоставляет некоторые специальные элементы конфигурации для настройки поведения во время рендеринга на сервере. Пожалуйста, ознакомьтесь с конкретной конфигурациейстраница документации.

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

Маршрутизация — это то, что делает каталог pages прямым доступом. Nuxt.js очень разумно использует структуру каталогов и имена файлов, чтобы охватить различные варианты использования vue-router. Например, динамическая маршрутизация, вложенная маршрутизация и т. д. Для получения подробной информации см.Документация. Также посмотрите демоpagesсодержание.

плагин

Для переднего проекта, используя плагины, конечно, это необходимо. Онлайн этот район офицер сказал очень четко. Я разместил об использовании демо. Вот библиотека MINT-UI.

// plugins/mint-ui.js
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)

// nuxt.config.js
module.exports = {
  build: {
    vendor: ['mint-ui']
  },
  plugins: [
    '~plugins/mint-ui'
  ]
}

Таким образом, вы можете использовать стороннюю библиотеку mint-ui!

<template>
  <div>
    <mt-navbar v-model="selected">
        <mt-tab-item id="1">选项一</mt-tab-item>
        <mt-tab-item id="2">选项二</mt-tab-item>
        <mt-tab-item id="3">选项三</mt-tab-item>
    </mt-navbar>

    <!-- tab-container -->
    <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
            <mt-cell v-for="n in 10" :key="n" :title="'内容 ' + n" />
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
            <mt-cell v-for="n in 4" :key="n" :title="'测试 ' + n" />
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
            <mt-cell v-for="n in 6" :key="n" :title="'选项 ' + n" />
        </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

vuex

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

выпускать

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

наконец

Проверьте Nuxt.jsAPI, вы обнаружите, что Nuxt.js действительно сильно инкапсулирован. Для проекта шаблона, сгенерированного Nuxt.js, есть только некоторые необходимые настройки, которые нам нужно выполнить. Nuxt.js можно назвать очень дружественной и мощной структурой SSR.

Обучающая серия по Vue.js

Ввиду серьезной разрозненности фронтенд-знаний я надеюсь систематически разбирать серию блогов об обучении Vue.

Первая серия обучения Vue.js — практические заметки по обучению vue-router2 (с DEMO)
Vue.js Learning Series II — Практические заметки по обучению Vuex (с DEMO)
Третья серия обучения Vue.js - практика изучения аксиом и знаний, связанных с сетевой передачей
Четвертая серия обучения Vue.js — использование инструментов упаковки Webpack
Vue.js Learning Series Five — рассказ об ESLint от VUE-CLI
Шестая серия обучения Vue.js — модульное тестирование Vue, примечания к исследованию Karma+Mocha
Седьмая серия обучения Vue.js — рендеринг сервера Vue Обучение Nuxt

Адрес проекта обучающей серии Vue.js

Исходный код этой статьи выложен на GitHub для ознакомления, звездочку, конечно, лучше оставить.^-.
Github.com/фиолетовый джек/...

Об авторе

VioletJack, эффективно обучающийся интерфейсный инженер, любит изучать способы повышения эффективности, а также фокусируется на изучении и сортировке знаний, связанных с интерфейсом Vue. Добро пожаловать, подписывайтесь, лайкайте и комментируйте~ Я буду продолжать выпускать высококачественный контент, связанный с Vue.

Сина Вейбо:Weibo.com/U/264090960…
Самородки:Талант /user/442409…
CSDN: blog.CSDN.net/фиолетовый Джек0…
Краткая книга:woohoo.brief.com/users/54ahhh 4…
Гитхаб:github.com/violetjack