Автор: Королева-мать@Эдамам передняя часть

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

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

Nuxt.js — это SSR-фреймворк для Vue с модульной архитектурой, простой в использовании и с хорошей производительностью. Разработчики Nuxt.js активны, и версия быстро обновляется.Официальная версия v1.0.0 была выпущена 9 января 2018 года. И это было настоятельно рекомендовано официальным сайтом Vue.Далее давайте посмотрим на мощь Nuxt.js.

Во-вторых, создание модели РСБ.

Nuxt.js — это платформа приложений общего назначения, основанная на vue.js, ядром которой является обеспечение рендеринга на стороне сервера с помощью модуля vue-server-renderer. vue-server-renderer — это модуль для рендеринга Node.js на стороне сервера Vue, который используется для создания HTML-контента. Шаги использования следующие:

1. npm install vue vue-server-renderer --save-dev
2. Структура нового проекта выглядит следующим образом:

3. Напишите код в файле server.js:

4. Пропишите html в template.html, обратите вниманиеЭто должно быть написано, что эквивалентно заполнителю, и здесь заполняется содержимое страницы, отображаемой сервером.

5. Запустите командный узел server.js, чтобы запустить службу.

6. Когда браузер откроет http://localhost:3100/, вы увидите data-server-rendered = "true", что означает рендеринг на стороне сервера.

Итак, на приведенном выше примере давайте посмотрим, как использовать Nuxt.js для достижения рендеринга страницы на стороне сервера.

3. Создайте проект Nuxt.js

1. Установить

Убедитесь, что npx установлен (npx установлен по умолчанию в npm версии 5.2.0)

• npx create-nuxt-app
• npm install # or yarn
• npm run dev

После трех вышеперечисленных шагов откройте браузер и перейдите на localhost:3000, что мало чем отличается от создания проекта Vue. Структура каталогов проекта выглядит следующим образом:

Для официального веб-сайта NUXT.JS полная таблица потока от запроса сервера к рендеринге также дается

2. новый механизм маршрутизации

Любые компоненты Vue в каталоге pages автоматически добавляются в vue-router на основе их имен файлов и структуры каталогов. Nuxt может сгенерировать соответствующую конфигурацию маршрутизации, которая может быть отражена в .nuxt/rouer.js, как показано на рисунке:

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

Добавить в родительский файл vue для отображения содержимого подпредставления

Чтобы адаптироваться к различным потребностям бизнеса, существуют также такие функции, как динамическая маршрутизация, динамическая вложенная маршрутизация и т. д., вы можете обратиться к официальному описанию веб-сайта:это ярость beats.org/expensive/flesh…

3. Использование активов и статических статических ресурсов

assets содержат нескомпилированные активы и больше связаны с тем, как webpack загружает и обрабатывает файлы, а не с тем, как работает nuxt.

static содержит несколько статических файлов, которые сопоставляются с корневым каталогом вашего сайта.

Например: статические ресурсы размещаются под ресурсами: , если статические ресурсы размещаются под статическими:

4. макеты используют

Создайте новый макет в каталоге макетов, файле .vue, со следующим кодом.

При использовании макета вы можете установить значение макета в скрипте в файле страниц на имя файла макета.

export default {

 layout: 'admin-layout'

}

Примечание. Если вы введете неверный URL-адрес, отобразится страница с ошибкой. На самом деле эта страница с ошибкой представляет собой другой макет. У nuxt есть собственный макет страницы ошибок, но если вы хотите его отредактировать, просто создайте макет error.vue, и nuxt будет использовать этот макет вместо стандартного.

5. использование промежуточного программного обеспечения

Промежуточное ПО (middleware) позволяет вам определить пользовательскую функцию (предоставляет параметр контекста, вы можете получать различную информацию на стороне сервера и стороне клиента) для запуска перед страницей или макетом. Например, мы судим о перехвате разрешений перед отрисовкой страницы или переходим на соответствующий маршрут в соответствии с разрешениями пользователя. В качестве примера возьмем переход по указанному маршруту в локальной среде разработки, настроить его можно так:

• Сначала нам нужно добавить auth.js в папку промежуточного ПО.

• Настроить в файле nuxt.config.js

• Откройте localhost:3000/ в браузере, в это время вы посетите localhost:3000/dev

6. plugins

Вы можете настроить подключаемый модуль JS, который необходимо запустить, прежде чем экземпляр приложения Vue может быть библиотекой, которую вы пишете, или сторонней библиотекой. Например: для этого плагина запросов Ajax, сторонней библиотеки ELEMENT-UI и т. д. В качестве примера Element-UI вы можете настроить это:

• Сначала нам нужно добавить файл плагина element-ui.js в папку с плагинами.

• Настройте поле plugins в nuxt.config.js, только при запущенном клиенте можно установить атрибут ssr:false для импортируемого плагина

7. конфигурация файла next.config.js

• head обычно используется для настройки метатега по умолчанию.

• css используется для определения глобального файла стилей приложения, модуля или сторонней библиотеки.

• Находится ли конфигурация dev в режиме разработки или в рабочем режиме.

• loading Настройка компонентов загрузки, используемых must.js

• env определяет переменные среды для клиента и сервера

...

больше для просмотраОфициальный сайт