Практика рендеринга Vue.js на стороне сервера на основе Nuxt

Vue.js — одна из самых популярных интерфейсных сред в настоящее время, а Nuxt.js — серверная среда рендеринга для Vue.js Благодаря настраиваемой конфигурации и лаконичному API разработчики могут быстро выполнять проекты рендеринга на стороне сервера. , эта статья даст краткое введение в структуру Nuxt.js.

рендеринг на стороне сервера

Рендеринг на стороне сервера не является новой концепцией.До того, как одностраничное приложение (SPA) стало популярным, страница визуализировалась сервером и доставлялась в браузер. Когда пользователю нужно получить доступ к новой странице, ему нужно снова запросить сервер, чтобы вернуться на новую страницу.

Чтобы оптимизировать опыт, разработчики начали использовать JavaScript для завершения процесса рендеринга во внешнем интерфейсе, используя метод разделения внешнего и внутреннего интерфейса, чтобы серверная часть больше ориентировалась на данные. , в то время как внешний интерфейс был сосредоточен на обработке отображения, а внешний и внутренний интерфейс был завершен с помощью хорошо продуманного API и технологии Ajax.Взаимодействие, jQuery, React.js, Vue.js, Angular.js и другие фреймворки пришли в существование.

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

В этой статье будет представлен Nuxt.js, решение для рендеринга на стороне сервера для Vue.js. После запуска Vue.js его идеи, основанные на данных и компонентах, а также его простые и легкие в использовании функции принесли разработчикам большое удобство.vue-server-rendererЕго можно использовать для рендеринга на стороне сервера, но это требует дополнительной нагрузки, и опыт разработки все еще нуждается в улучшении.После запуска Nuxt.js эта проблема была хорошо решена.

Введение в Nuxt.js

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

Nuxt.js был выпущен 25 октября 2016 г. С момента его запуска прошло меньше года, но он получил широкую поддержку.Последняя стабильная версия — 0.10.7, а версия 1.0 все еще находится на внутреннем тестировании. .js сообщество также постепенно улучшается, официальный сайт поддерживает китайские документы.

Легко начать

Vue.jsvue-cliИнструмент может легко позволить нам использовать готовый шаблон для инициализации проекта Vue.js, а команда Nuxt.js предоставила нам шаблон для инициализации проекта Nuxt.js, установитеvue-cliПосле этого просто введите в командной строке

vue init nuxt/starter <projectName>

Вы можете завершить создание проекта, а затем войти в каталог проекта и выполнить следующую команду:

npm install
npm run dev

Nuxt.js будет использовать3000порт для запуска сервиса, введите в браузереhttp://localhost:3000Вы можете увидеть исходную страницу с логотипом Nuxt.js.

каталог проекта

После завершения простого проекта Hello World давайте подробнее рассмотрим Nuxt.js. После входа в проект Nuxt.js каталог проекта выглядит следующим образом:

Ниже приводится краткое введение в роль каждого каталога:

.nuxt/: файл основной библиотеки, используемый для хранения Nuxt.js. Например, вы можете найти в этом каталогеserver.jsфайл, в котором описана логика рендеринга на стороне сервера в Nuxt.js (см. следующий абзац «Процесс рендеринга Nuxt.js»),router.jsФайл содержит автоматически сгенерированную таблицу маршрутизации.
assets/: Используется для хранения статических ресурсов Ресурсы в этом каталоге создаются с помощью Webpack.
components/: Сохраняет различные компоненты в проекте. Обратите внимание, что только файлы в этом каталоге могут быть вызваныкомпоненты.
layouts/: создание пользовательского макета страницы.В этом каталоге можно создать унифицированный макет глобальных страниц или макет страницы ошибок. Если вам нужно отобразить в макетеpagesСтраница маршрутизации в каталоге должна быть добавлена в файл макета<nuxt />Этикетка.
middleware/: Разместите пользовательское промежуточное ПО, которое будет вызываться перед загрузкой компонента.
pages/: в этом каталоге будет создан Nuxt.js в соответствии со структурой каталога.vue-routerМаршрутизация, подробности см. ниже.
plugins/: Пользовательские плагины могут быть размещены в этом каталоге, в корнеVueВыполняется перед созданием экземпляра объекта. Например, встроенная в проект логика может быть инкапсулирована в плагин, размещенный в этом каталоге, иnuxt.config.jsзагружен в.
static/: статические ресурсы, созданные без Webpack, будут сопоставлены с корневым путем, напримерrobots.txt
store/: сохраняет дерево состояний Vuex.
nuxt.config.js: файл конфигурации Nuxt.js, подробности см. ниже.

Процесс рендеринга Nuxt.js

Nuxt.js выполняет рендеринг на стороне сервера с помощью ряда методов, созданных поверх Vue.js Конкретный процесс выглядит следующим образом:

передачаnuxtServerInitметод

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

После первого шага запрос переходит вMiddlewareслой, в котором есть три шага:
- читатьnuxt.config.jsСредний и глобальныйmiddlewareКонфигурация поля и вызов соответствующего метода промежуточного слоя
- сопоставьте и загрузите соответствующий запросlayout
- передачаlayoutа такжеpageметод промежуточного программного обеспечения
передачаvalidateметод

На этом этапе вы можете проверить параметры запроса или проверить данные, отправленные сервером на первом этапе.Если проверка не пройдена, будет выброшена страница 404.
передачаfetchа такжеasyncDataметод

Оба эти метода вызываются перед загрузкой компонента, и их обязанности различны.asyncDataИспользуется для асинхронной инициализации данных компонентов иfetchМетод фокусируется на изменении состояния в Vuex после асинхронной выборки данных.

Наш исходный код в Nuxt.jsutil.jsСледующие методы можно увидеть в:

export function applyAsyncData (Component, asyncData = {}) {
  const ComponentData = Component.options.data || noopData
  Component.options.data = function () {
    const data = ComponentData.call(this)
    return { ...data, ...asyncData }
  }
  if (Component._Ctor && Component._Ctor.options) {
    Component._Ctor.options.data = Component.options.data
  }
}

Этот метод будетasyncDataПосле вызова метода вызовите его.Вы видите, что компонент начинается сasyncDataДанные, полученные в методе, будут родными для компонента.dataДанные, полученные методом, объединяются один раз и все равно попадают вdataметод, поэтому мы получаем,asyncDataметод роднойdataрасширение метода.

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

(Источник изображения: официальный сайт Nuxt.js)

Как упоминалось выше, в.nuxtкаталог, вы можете найтиserver.jsфайл, который инкапсулирует логику рендеринга Nuxt.js на сервере, включая полныйPromiseСцепленные вызовы объектов для выполнения всех шагов рендеринга на стороне сервера, описанных выше.

Несколько советов по использованию Nuxt.js

Конфигурация nuxt.config.js

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

голова: может быть настроена глобально в этом элементе конфигурацииhead, такие как определение названия веб-сайта,meta, импортировать сторонние файлы CSS, JavaScript и т. д.:

  head: {
      title: '百姓店铺',
      meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { name: 'applicable-device', content: 'pc,mobile' },
      ],
      link: [
            { rel: 'stylesheet', type: 'text/css', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'}
      ],
      script: [
            {src: 'https://code.jquery.com/jquery-3.1.1.min.js'},
            {src: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'}
      ]
  },

build: этот элемент конфигурации используется для настройки правил сборки проекта Nuxt.js, то есть конфигурации сборки Webpack, такой как импорт сторонних модулей через поле поставщика, настройка подключаемого модуля Webpack через поле подключаемого модуля и настройка загрузчика Webpack через поле loaders. Обычно мы вводим его в поле поставщика сборки.axiosмодуль для выполнения HTTP-запросов в проекте (axiosЭто также официальная структура HTTP-запросов, рекомендованная Vue.js).
```
  build: {
      vendor: ['core-js', 'axios'],
      loaders: [
          {
              test: /\.(scss|sass)$/,
              use: [{
                  loader: "style-loader"
              }, {
                  loader: "css-loader"
              }, {
                  loader: "sass-loader"
              }]
          },
          {
              test: /\.(png|jpe?g|gif|svg)$/,
              loader: 'url-loader',
              query: {
                  limit: 1000,
                  name: 'img/[name].[hash:7].[ext]'
              }
          },
          {
              test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
              loader: 'url-loader',
              query: {
                  limit: 1000,
                  name: 'fonts/[name].[hash:7].[ext]'
              }
          }
      ]
  }
```
css: в этом элементе конфигурации импортируйте глобальный файл CSS, после чего будет импортирована каждая страница.
router: здесь можно настроить основные правила маршрутизации, а также конфигурацию промежуточного ПО. Например, вы можете создатьUser-Agentпромежуточное ПО и загрузите его здесь.
загрузка: Nuxt.js предоставляет набор компонентов индикатора выполнения загрузки на странице, где вы можете настроить цвета, отключить или настроить пользовательские компоненты загрузки.
env: глобальные переменные, которые можно настроить здесь для совместного использования сервером и клиентом.

каталог как маршрут

Nuxt.js вvue-routerНабор правил автоматической генерации определен выше, то есть в соответствии со структурой каталогов страниц. Например, у нас есть следующая структура каталогов:

Этот каталог содержит базовый маршрут (без параметров) и два динамических маршрута (с параметрами). Nuxt.js сгенерирует следующую таблицу конфигурации маршрутизации (которую можно найти в.nuxtв каталогеrouter.jsфайл):

routes: [
    {
        path: "/",
        component: _abe13a78,
        name: "index"
    },
    {
        path: "/article/:id?",
        component: _48f202f2,
        name: "article-id"
    },
    {
        path: "/:page",
        component: _5ccbb43a,
        name: "page"
    }
]

дляarticle-idЭтот маршрут с:id?параметр, указывающий, что это необязательный маршрут, если вы хотите сделать его обязательным, вы должныarticleдобавить в каталогindex.vueдокумент.

Рассмотрим следующий пример:

В связи с наличием файлов и папок с одинаковым именем, Nuxt.js будет генерировать для нас вложенные маршруты.Сгенерированная структура маршрутизации выглядит следующим образом.При ее использовании необходимо добавить<nuxt-child />метка для отображения содержимого подпредставления.

routes: [
    {
        path: "/article",
        component: _f930b330,
        children: [
            {
                path: "",
                component: _1430822a,
                name: "article"
            },
            {
                path: ":id",
                component: _339e8013,
                name: "article-id"
            }
        ]
    }
]

Кроме того, Nuxt.js также может устанавливать динамическую вложенную маршрутизацию, подробнее см.Официальная документация для Nuxt.js.

Суммировать

Хотя Nuxt.js — очень молодой фреймворк, в нем еще много проблем, требующих улучшения, но его внешний вид предоставляет разработчикам Vue.js большое удобство для создания проектов рендеринга на стороне сервера.Мы с нетерпением ждем выпуска Nuxt.js 1.0. Принесите нам больше полезных новых функций.

автор:Ли Рен
Введение: член технической группы операционного центра коммерциализации Baixing.com.

Эта статья является лишь личной точкой зрения автора и не отражает позицию People's Network.

Эта статья была впервые опубликована в общедоступной учетной записи WeChat «Технической группы People's Network», отсканируйте код и немедленно подпишитесь: