Следующая яма для скалолазания

Nuxt.js

Раздел 1: Обзор nuxt.js

Nuxt.js — это просто общая структура для Vue.js, наиболее часто используемая для SSR (рендеринга на стороне сервера). Vue.js используется для разработки SPA (одностраничных приложений). Nuxt.js — это разработанная среда с Vue.Для многостраничных приложений и рендеринга на стороне сервера вы можете напрямую использовать команды для создания проекта Vue, который мы превратили в статический html.

1. Каковы преимущества рендеринга на стороне сервера?

Основная причина в том, что SPA (одностраничное приложение) не способствует SEO-работе поисковых систем, Nuxt.js подходит для таких проектов, как новости, блоги, фильмы и консультации, которым нужен трафик, предоставляемый поисковыми системами. Если вы работаете над мобильным проектом, нет необходимости использовать этот фреймворк.

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

знаяSSRраньше, первыйCSRа такжеSSRПроведите сравнение между ними.

Давайте сначала рассмотрим традиционную веб-разработку.Традиционная веб-разработка заключается в том, что клиент отправляет запрос на сервер, сервер запрашивает базу данных и сшивает вместе.HTMLСтрока (шаблон), после серии обработки данных отсортированныйHTMLВозврат к клиенту браузера эквивалентен открытию страницы. Такие, как мы часто слышимjsp,PHP,aspxэто традиционноMVCразработка.

SPAприложение, здесьVue,React, отличный пользовательский интерфейс одностраничных приложений постепенно стал основным, и страница интегрирована.javaScriptРендеринг, называемый рендерингом на стороне клиентаCSR.SPAпроцесс рендеринга.由客户端访问URLОтправить запрос на сервер и вернутьHTMLструктура (ноSPAвозвращенныйHTMLСтруктура очень маленькая, есть только одна базовая структура, как показано в первом коде). После того, как клиент получает возвращенный результат, он начинает рендеринг на клиенте.HTML, соответствующее выполнение выполняется при рендерингеjavaScript, окончательный рендерtemplate, после завершения рендеринга снова отправьте запрос данных на сервер, обратите внимание на запрос данных здесь, сервер возвращаетjsonформатировать данные. Клиент получает данные, а затем завершает окончательный рендеринг.

SPAХотя это снижает нагрузку на сервер, у него есть и недостатки:

  1. Время рендеринга первого экрана относительно велико: приходится ждатьJavaScriptПосле завершения загрузки и завершения выполнения можно отобразить первый экран.
  2. SEOНедружественный: поисковые роботы могут получить только одинdivэлемент, считает страницу пустой, не способствуетSEO.

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

SSRПроцесс рендеринга такой, клиент отправляетURLЗапрос к серверу, сервер читает соответствующийurlинформация о шаблоне, сделанная на стороне сервераhtmlа также数据Рендеринг, возврат после завершения рендерингаhtmlструктура, первая экранная страница после того, как клиент получит ее в это времяhtmlструктура. Таким образом, пользователь будет очень быстрым при просмотре первого экрана, потому что клиенту не нужно отправлять его снова.ajaxпросить. не выполненоSSRНаши страницы не принадлежатSPAприменяется, это все еще автономныйspaзаявление.

SSRвCSRа такжеSPAКомпромиссное решение между приложениями, рендеринг выполняется на стороне сервера при рендеринге первого экрана.Обратите внимание, что это только первый экран, остальные страницы все равно нужно рендерить на стороне клиента.服务端После получения запроса и рендеринга первой экранной страницы она будет содержать оставшуюся маршрутную информацию, зарезервированную для客户端Для отображения страниц других маршрутов.

Nuxt.js — это особенности (преимущества):

  • на основеVue
  • Автоматическое наслоение кода
  • рендеринг на стороне сервера
  • Мощная функция маршрутизации, поддержка асинхронных данных
  • подача статических файлов
  • EcmaScript6а такжеEcmaScript7Синтаксис поддержки
  • Упаковать и сжатьJavaScriptа такжеCss
  • HTMLуправление тегами заголовков
  • Локальная разработка поддерживает горячую загрузку
  • интегрированныйESLint
  • Поддерживает различные стили прекомпиляторовSASS,LESSтак далее
  • служба поддержкиHTTP/2толкать

Раздел 2: Создание среды Nuxt

1. Установка Nuxt.js

Перед использованием npm вам необходимо установить Node в вашей системе. Если не установлено, перейдите по этой ссылкеБлог Woo Woo.cn на.com/Zhou Yu2017/…

(1) Используйте npm для установки фреймворка vue-cli.

npm install vue-cli -g

После завершения установки вы можете использовать vue -V, чтобы проверить, прошла ли установка успешно. (Примечание: используйте здесь букву V в верхнем регистре, нижний регистр недействителен).

(2) Используйте vue для установки nuxt

После установки vue-cli вы можете использовать команду init для инициализации проекта Nuxt.js.

vue init nuxt/starter

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

(3) Используйте npm install для установки пакетов зависимостей.

npm install

Этот процесс займет некоторое время. Если вам не удастся установить этот процесс, вы можете напрямую удалить папку node_modules в проекте, а затем повторно установить npm, чтобы установить его.

(4) Используйте npm run dev для запуска службы.

(5) Введите localhost:3000 в браузере, вы увидите результат следующим образом:

2. Первая установка приложения Nuxt

npm i create-nuxt-app -g
create-nuxt-app my-nuxt-demo
cd my-nuxt-demo
npm run dev

инструкция по установке:

Project name                                //  项目名称
Project description                         //  项目描述
Use a custom server framework               //  选择服务器框架
Choose features to install                  //  选择安装的特性
Use a custom UI framework                   //  选择UI框架
Use a custom test framework                 //  测试框架
Choose rendering mode                       //  渲染模式
Universal                                   //  渲染所有连接页面
Single Page App                             //  只渲染当前页面

3. Следующий процесс рендеринга

Полный запрос сервера к процессу рендеринга

img

Из приведенной выше блок-схемы видно, что когда клиент запрашивает вход, сервер имеетnuxtServerInitЭта команда выполняется вStoreизaction, когда сюда поступает запрос клиента, некоторая информация о клиенте может быть сохранена вStoreДругими словами, некоторая информация для входа в систему некоторых клиентов, хранящаяся на сервере, может храниться вStoreсередина. используется после中间件Механизм, промежуточное ПО - это по сути функция, которая будет выполняться перед выполнением каждого маршрута, здесь можно много чего сделать, а можно понимать как роль перехватчика роутера. после этогоvalidateПри выполнении проверяются параметры, передаваемые клиентом.asyncDataа такжеfetchВойдите в официальный цикл рендеринга,asyncDataПолучить данные с сервера и объединить запрошенные данные вVueсерединаdataсередина,

Раздел 3: Структура каталогов Nuxt

# Введение в структуру каталогов

└─my-nuxt-demo
  ├─.nuxt               // Nuxt自动生成，临时的用于编辑的文件，build
  ├─assets              // 用于组织未编译的静态资源如LESS、SASS或JavaScript,对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static 目录中
  ├─components          // 用于自己编写的Vue组件，比如日历组件、分页组件
  ├─layouts             // 布局目录，用于组织应用的布局组件，不可更改⭐
  ├─middleware          // 用于存放中间件
  ├─node_modules
  ├─pages               // 用于组织应用的路由及视图,Nuxt.js根据该目录结构自动生成对应的路由配置，文件名不可更改⭐
  ├─plugins             // 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
  ├─static              // 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。文件夹名不可更改。⭐
  └─store               // 用于组织应用的Vuex 状态管理。文件夹名不可更改。⭐
  ├─.editorconfig       // 开发工具格式配置
  ├─.eslintrc.js        // ESLint的配置文件，用于检查代码格式
  ├─.gitignore          // 配置git忽略文件
  ├─nuxt.config.js      // 用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。文件名不可更改。⭐
  ├─package-lock.json   // npm自动生成，用于帮助package的统一设置的，yarn也有相同的操作
  ├─package.json        // npm 包管理配置文件
  ├─README.md

# файл конфигурации

const pkg = require('./package')
module.exports = {
  mode: 'universal',    //  当前渲染使用模式
  head: {       //  页面head配置信息
    title: pkg.name,        //  title
    meta: [         //  meat
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [     //  favicon，若引用css不会进行打包处理
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  loading: { color: '#fff' },   //  页面进度条
  css: [    //  全局css（会进行webpack打包处理）
    'element-ui/lib/theme-chalk/index.css'  
  ],
  plugins: [        //  插件
    '@/plugins/element-ui'
  ],
  modules: [        //  模块
    '@nuxtjs/axios',
  ],
  axios: {},
  build: {      //  打包
    transpile: [/^element-ui/],
    extend(config, ctx) {       //  webpack自定义配置
    }
  }
}

# Следующая команда запуска

{
  "scripts": {
    //  开发环境
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    //  打包
    "build": "nuxt build",
    //  在服务端运行
    "start": "cross-env NODE_ENV=production node server/index.js",
    //  生成静态页面
    "generate": "nuxt generate"
  }
}

Раздел 4: Общие элементы конфигурации Nuxt

1. Настройте IP и порт

В разработке часто встречается, что порт занят или указан IP. Нам нужно настроить элемент конфигурации в package.json в корневом каталоге. Например, теперь мы хотим настроить IP на 127.0.0.1 и порт на 1000.

/package.json

"config":{
    "nuxt":{
      "host":"127.0.0.1",
      "port":"1000"
    }
  },

После настройки в терминале вводим npm run dev, после чего вы увидите, что адрес сервиса изменился на 127.0.0.1:1000.

2. Настройте глобальный CSS

При разработке многостраничных проектов мы определим глобальный CSS для инициализации рендеринга нашей страницы, например установим padding и margin на 0, а также в Интернете есть очень известный файл CSS с открытым исходным кодом normailze.css. Чтобы определить эти конфигурации, вам нужно работать с nuxt.config.js.

Например, теперь мы хотим установить красный шрифт страницы, мы можем установить красный шрифт в файле assets/css/common.css.

/assets/css/common.css

html{
    color:red;
}

/nuxt.config.js

  css:['~assets/css/normailze.css'],

После настройки введите npm run dev в терминале. Затем вы обнаружите, что шрифт стал красным.

3. Настройте загрузчик веб-пакета

В nuxt.config.js базовая конфигурация webpack может быть перезаписана, например, теперь нам нужно настроить url-загрузчик для 64-битной упаковки небольших изображений. Вы можете настроить его в опции сборки nuxt.config.js, перейдите по этой ссылке для получения соответствующей информации.блог woo woo woo.cn на.com/anytime-007/afraid/7…

build: {
    loaders:[
      {
        test:/\.(png|jpe?g|gif|svg)$/,
        loader:"url-loader",
        query:{
          limit:10000,
          name:'img/[name].[hash].[ext]'
        }
      }
    ],
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }

4. Глобально изменить главную информацию SEO

В файле nuxt.config.js измените заголовок на wfaceboss:

 head: {
    title: 'wfaceboss',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

После модификации перезапускаем сервис, то есть запускаем npm run dev, эффект следующий

img

Раздел 5: Настройка маршрутизации Nuxt и передача параметров

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

1. Базовая маршрутизация

Nuxt.js отpagesСтруктура каталогов автоматически генерирует конфигурацию маршрутизации для модуля vue-router.

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

└─pages
    ├─index.vue
    └─user
      ├─index.vue
      ├─one.vue

Затем конфигурация маршрутизации, автоматически сгенерированная Nuxt.js, выглядит следующим образом:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

2. Переход на страницу

  1. Не записывайте его как тег, потому что это повторная загрузка новой страницы, а не SPA.
  2. <nuxt-link to="/users"></nuxt-link>
  3. this.$router.push('/users')

3. Динамическая маршрутизация

  • Чтобы определить динамический маршрут с параметрами в Nuxt.js, вам необходимо создать соответствующийПрефикс с подчеркиваниемVue-файл или каталог.
  • Получить динамические параметры {{$route.params.id}}

4. Маршрутизация перехода для передачи параметров и получения значений

Маршрутизация часто требует передачи параметров, мы можем просто использовать params для передачи параметров, мы сейчас передаем параметр на страницу новостей (news), а затем просто получаем его на странице новостей.

(1) Используйте nuxt для передачи параметров

<template>
  <div>
    <ul>
      <li><nuxt-link :to="`informa/${item.newsCode}-${item.newsType}`"></li>
    </ul>
  </div>
</template>

Примечание: name на самом деле указывает на маршрут (имя папки или файла), а маршрут чувствителен к регистру, поэтому после to учитывается регистр! ! ! Рекомендуется, чтобы все папки были написаны в нижнем регистре.

img

(2) Используйте nuxt для получения параметров

async asyncData(context) {
    let newsCode = context.route.params.code.split('-')[0]
    let newsType = context.route.params.code.split('-')[1]
},

(3) Используйте параметры this.$router.push для передачи параметров

传递参数  -- this.$router.push({path: ' 路由 ', query: {key: value}})
参数取值  -- this.$route.query.key

注: 使用这种方式，传递参数会拼接在路由后面，出现在地址栏

(4) Используйте параметры this.$router.push для передачи параметров

传递参数  -- this.$router.push({name: ' 路由的name ', params: {key: value}})
参数取值  -- this.$route.params.key

注: 使用这种方式，参数不会拼接在路由后面，地址栏上看不到参数

注意: 由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效。需要用name来指定页面。

4. Оптимизация URL-адресов требований проекта

Параметр метода this.$route.query.key отображается в адресной строке, но это не то, что нам нужно, :id?id=``?

Поэтому рекомендуется максимально использовать router-link для реализации прыжка, чтобы решить изменение адресной строки, что более удобно для оптимизации сайта.

5. Проверка параметров маршрутизации

Nuxt.js позволяет настроить компонент страницы, соответствующий динамическому маршруту.validateМетод используется для проверки правильности параметров динамической маршрутизации. Эта функция имеет возвращаемое значение логического типа, если она возвращает истину, то это означает, что проверка пройдена, а если возвращает ложь, то это означает, что проверка не удалась.

export default {
  // nuxt中使用validate方法进行路由参数校验，这个方法必须返回一个布尔值，为true表示校验通过，为false表示校验失败。注意validate不能写到methods属性中。
  validate(obj) {
    // console.log(obj);
    // return true
    return /^\d+$/.test(obj.params.id)
  }
}

6. Вложенная маршрутизация

  1. Добавьте файл Vue в качестве родительского компонента
  2. Добавьте папку с тем же именем, что и у родительского компонента, для хранения дочерних компонентов представления.
  3. В родительском файле добавьте компонент для отображения соответствующего подпредставления.

Раздел 6: Эффект анимации маршрутизации Nuxt

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

1. Анимация глобальной маршрутизации

Глобальная анимация задается по умолчанию с помощью страницы.Например, теперь мы устанавливаем эффект плавного появления и исчезновения для каждой страницы при входе и выходе. Сначала мы можем создать файл normailze.css в папке assets/css в корневом каталоге.

(1) Добавить файл стиля

/assets/css/normailze.css (если нет, создайте его самостоятельно)

.page-enter-active, .page-leave-active {
    transition: opacity 2s;
}

.page-enter, .page-leave-active {
    opacity: 0;
}

(2) Конфигурация файла

Затем добавьте глобальный файл CSS в nuXt.config.js.

css:['assets/css/main.css'],

В это время при переключении страницы будет 2-секундный эффект переключения анимации, но вы обнаружите, что некоторые страницы не имеют никакого эффекта, потому что вы не<nuxt-link>компонент для создания ссылок перехода. Вам нужно внести изменения.

Например, страницу новостей динамической маршрутизации, которую мы сделали на прошлом уроке, вам нужно изменить на следующую ссылку.

<li><nuxt-link :to="{name:'news-id',params:{id:123}}">News-1</nuxt-link></li>

После его изменения вы увидите эффект анимации.

2. Установить анимацию страницы отдельно

Когда мы хотим установить специальный эффект для страницы, нам нужно только изменить страницу по умолчанию в css, а затем добавить поле перехода в конфигурацию компонента страницы. Например, мы хотим добавить эффект увеличения и уменьшения шрифта на странице about, на других страницах такого эффекта нет.

(1) Добавьте следующее в глобальные ресурсы стиля/main.css

.test-enter-active, .test-leave-active {
    transition: all 2s;
    font-size:12px;
}
.test-enter, .test-leave-active {
    opacity: 0;
    font-size:40px;
}

(2) Затем установите его в компоненте about/index.vue.

export default {
  transition:'test'
}

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

Резюме: Просто импортируйте его на страницу, которую вам нужно использовать.

Раздел 7: Стандартные шаблоны и макеты Nuxt по умолчанию

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

1. Шаблон по умолчанию

Nuxt предоставляет нам очень простой метод настройки шаблона по умолчанию, которого можно добиться, создав app.html в корневом каталоге. Теперь мы хотим добавить слова «Learn nuxt.js» вверху каждой страницы, для этого мы можем использовать шаблон по умолчанию.

В приложении.html:

<!DOCTYPE html>
<html lang="en">
<head>
   {{ HEAD }}
</head>
<body>
    <p>学习nuxt.js</p>
    {{ APP }}
</body>
</html>

Здесь {{ HEAD }} читает информацию в nuxt.config.js, а {{APP}} — главная страница в папке pages, которую мы написали. Следует отметить, что и HEAD, и APP должны быть написаны с большой буквы, если они будут строчными, будет сообщено об ошибке.

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

2. Макет по умолчанию

Функции, аналогичные шаблону по умолчанию, являются макетом по умолчанию, но, как видно из названия, макет по умолчанию в основном используется для унифицированного макета страницы. Он находится в layouts/default.vue в корне каталога. Следует отметить, что информация заголовка не должна добавляться в макет по умолчанию, только о<template>Содержимое под этикеткой настраивается единообразно.

Требование: мы помещаем слова «Изучите nuxt.js» вверху каждой страницы и смотрим на реализацию в макете по умолчанию.

<template>
  <div>
    <p>学习nuxt.js</p>
    <nuxt/>
  </div>
</template>

здесь<nuxt/>Это эквивалентно содержимому каждой из наших страниц. Вы также можете поместить некоторые общие стили в этот макет по умолчанию, но это увеличит сложность страницы.

Резюме: Чтобы отличить шаблон по умолчанию от макета по умолчанию, в шаблоне можно настроить большое количество информации в заголовке, включая оценку версии IE; шаблон можно только настроить.<template>Содержание связано с макетом. Пишите код в зависимости от ситуации, когда вы модифицируете его на работе.

Раздел VIII: Используйте плагин Nuxt

1. Использование ElementUI

  1. скачать npm i element-ui -S

  2. В папке плагинов создайте файл ElementUI.js.

    import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

  3. Добавьте конфигурацию в nuxt.config.js

    css: [
  'element-ui/lib/theme-chalk/index.css'
],
plugins: [
  {src: '~/plugins/ElementUI', ssr: true }
],
build: {
  vendor: ['element-ui']
}

2. Использование аксиом

  1. Установитьnpm install --save axios
  2. использовать
import axios from 'axios'

asyncData(context, callback) {
  axios.get('http://localhost:3301/in_theaters')
    .then(res => {
      console.log(res);
      callback(null, {list: res.data})
    })
}
  1. Чтобы предотвратить повторную упаковку, настройте в nuxt.config.js
module.exports = {
  build: {
    vendor: ['axios']
  }
}

Раздел 9: Страницы ошибок Nuxt и метанастройки личности

Когда пользователь вводит неправильный маршрут, нам нужно дать ему четкое руководство, поэтому 404 страницы необходимы при разработке приложений. Nuxt.js поддерживает создание страниц ошибок непосредственно в папке макета по умолчанию.

1. Создайте страницу ошибки

Создайте файл error.vue в папке layouts в корневом каталоге, который эквивалентен компоненту, отображающему ошибки приложения.

<template>
  <div>
      <h2 v-if="error.statusCode==404">404页面不存在</h2>
      <h2 v-else>500服务器错误</h2>
      <ul>
          <li><nuxt-link to="/">HOME</nuxt-link></li>
      </ul>
  </div>
</template>

<script>
export default {
  props:['error'],
}
</script>

Код использует v-if для определения типа ошибки.Следует отметить, что эта ошибка является<script>Он объявлен здесь, если программа не объявлена, error.statusCode не может быть найден.

Я также использовал один здесь<nuxt-link>Простой метод записи может напрямую идти в ногу с путем.

2. Мета-настройки личности

Мета страницы очень важна для настроек SEO.Например, если вы хотите сделать страницу новостей сейчас, чтобы поисковая система включила новости, каждая страница должна иметь разные настройки заголовка и мета для новостей. Просто используйте метод head, чтобы установить информацию заголовка текущей страницы. Теперь мы собираемся установить страницу New-1 в качестве персонализированной мета и заголовка.

1. Сначала ставимpages/news/index.vueМодифицируется ссылка страницы и передается заголовок. Цель — получить заголовок на конкретной странице новости и сформировать заголовок статьи.

/pages/news/index.vue

<li><nuxt-link :to="{name:'news-id',params:{id:123,title:'nuxt.com'}}">News-1</nuxt-link></li>

2. После завершения первого шага мы модифицируем /pages/news/_id.vue, чтобы он стал уникальным метатегом и тегом title в соответствии с переданным значением.

<template>
  <div>
      <h2>News-Content [{{$route.params.id}}]</h2>
      <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>

<script>
export default {
  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  },
  data(){
    return{
      title:this.$route.params.title,
    }
  },
//独立设置head信息
  head(){
      return{
        title:this.title,
        meta:[
          {hid:'description',name:'news',content:'This is news page'}
        ]
      }
    }
}
</script>

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

Раздел 10: метод asyncData для получения данных

Nuxt.js продуманно расширяет для нас метод Vue.js, добавляя anyncData для асинхронного запроса данных.

1. Поддельные данные

(1) Создать удаленные данные

Здесь, чтобы получить некоторые ложные данные с удаленных сайтов, я выбираю myjson.com, это простое хранилище json, и научиться его использовать очень удобно. Мы открываем веб-сайт, вводим код в диалоге JSON air, этот код можно вводить бесплатно, ключ и значение создаются с использованием строкового формата.

{
  "name": "Nuxt",
  "age": 18,
  "interest": "I love coding!"
}

После ввода и сохранения веб-сайт выдаст вам адрес, который является адресом вашего склада JSON.api.myjson.com/bins/1ctwlm

(2) Установите Аксиос

Официально рекомендуемым методом удаленного сбора данных для Vue.js является Axios, поэтому мы устанавливаем официальную рекомендацию использовать Axios. Здесь мы используем npm для установки axios. Введите следующую команду прямо в терминале:

npm install axios --save

2. Метод обещания ansycData

Мы создаем новый файл под страницами с именем ansyData.vue. Затем напишите следующий код:

<script>
import axios from 'axios'
export default {
  data(){
     return {
         name:'hello World',
     }
  },
  asyncData(){
      return axios.get('https://api.myjson.com/bins/1ctwlm')
      .then((res)=>{
          console.log(res)
          return {info:res.data}
      })
  }
}
</script>

В это время мы видим, что результат уже можно выводить в браузер. Метод asyncData вернет значение в данные. Это действие перед созданием компонента (рендеринг страницы), поэтому this.info использовать нельзя,

# Важность возврата

一定要return出去获取到的对象，这样就可以在组件中使用，这里返回的数据会和组件中的data合并。这个函数不光在服务端会执行，在客户端同样也会执行。

3. Многообещающее параллельное приложение AnsycData

async asyncData(context) {
  let [newDetailRes, hotInformationRes, correlationRes] = await Promise.all([
    axios.post('http://www.huanjingwuyou.com/eia/news/detail', {
      newsCode: newsCode
    }),
    axios.post('http://www.huanjingwuyou.com/eia/news/select', {
      newsType: newsType, // 资讯类型： 3环评资讯 4环评知识
      start: 0, // 从第0条开始
      pageSize: 10,
      newsRecommend: true
    }),
    axios.post('http://www.huanjingwuyou.com/eia/news/select', {
      newsType: newsType, // 资讯类型： 3环评资讯 4环评知识
      start: 0, // 从第0条开始
      pageSize: 3,
      newsRecommend: false
    })
  ])
  return {
    newDetailList: newDetailRes.data.result,
    hotNewList: hotInformationRes.data.result.data,
    newsList: correlationRes.data.result.data,
    newsCode: newsCode,
    newsType: newsType
  }
},

4. метод ожидания для ansycData

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

<script>
import axios from 'axios'
export default {
  data(){
     return {
         name:'hello World',
     }
  },
  async asyncData(){
      let {data}=await axios.get('https://api.myjson.com/bins/8gdmr')
      return {info: data}
  }
}
</script>

5. Меры предосторожности + жизненный цикл:

  1. Метод asyncData будет вызываться перед каждой загрузкой компонента (ограничено компонентами страницы).
  2. asyncData можно вызывать перед обновлением сервера или маршрута.
  3. Первый параметр установлен на объект контекста текущей страницы
  4. Nuxt объединит данные, возвращаемые asyncData, с данными, возвращаемыми методом данных компонента, и вернет их компоненту для использования.
  5. Для метода asyncData он вызывается перед инициализацией компонента, поэтому нет возможности передать его внутри метода.thisдля ссылки на экземпляр объекта компонента

Раздел 11: Статические ресурсы и упаковка

1. Статические ресурсы

（1）直接引入图片
在网上任意下载一个图片，放到项目中的static文件夹下面，然后可以使用下面的引入方法进行引用
<div><img src="~static/logo.png" /></div>

"~" эквивалентно нахождению корневого каталога проекта. В настоящее время не будет ошибки в пути к образу, даже если он упакован, это нормально.

（2）CSS引入图片
如果在CSS中引入图片，方法和html中直接引入是一样的，也是用“~”符号引入。

<style>
  .diss{
    width: 300px;
    height: 100px;
    background-image: url('~static/logo.png')
  }
</style>

В настоящее время это совершенно нормально в npm run dev.

2. Упаковка

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

Введите в терминале:

npm run generate

Затем введите live-server в папку dist.

Резюме: Фреймворк Nuxt.js очень прост, потому что он делает большую часть вещей за нас, нам просто нужно установить его правила для написания кода.

Раздел 12: Междоменное решение Nuxt + перехватчик

Установитьaxios

npm install @nuxtjs/axios --save-dev

Измените информацию о конфигурации после завершения установки:

nuxt.config.js

module.exports = {
    modules: [
        // Doc: https://axios.nuxtjs.org/usage
        '@nuxtjs/axios',
    ],
    axios: {
        proxy:true  //  代理
    },
    axios: {
        proxy: true,
        prefix: '/api', // baseURL
        credentials: true,
    },
    proxy: {
        "/eia/":"http://192.168.0.97:8181/",    //  key(路由前缀)：value(代理地址)
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/api': '' //路径重写
        }
    }
}

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

Например:

Установить

npm install @nuxtjs/axios @nuxtjs/proxy --save

module.expores{
  plugins: [
    {
      src: "~/plugins/axios",
      ssr: false
    },
  ],
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
  ],
}

plugins/axios.js

export default ({ $axios, redirect }) => {
  $axios.onRequest(config => {
    console.log('Making request to ' + config.url)
  })

  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      redirect('/400')
    }
  })
}

export default function (app) {
  let axios = app.$axios; 
 // 基本配置
  axios.defaults.timeout = 10000
  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

  // 请求回调
  axios.onRequest(config => {})

  // 返回回调
  axios.onResponse(res => {})

  // 错误回调
  axios.onError(error => {})
}

Раздел 13: Восхождение на яму

1.NuxtServerError connect ECONNREFUSED 127.0.0.1:80

Причина: Asyncdata Метод асинхронных данных Запрос на асинхронные данные, что /api/$ (PPARAMS.ID} Этот интерфейс URL - 127.0.0.1:80, он отправляет запрос на 127.0.0.1:80, но я не запустил интерфейс сервера на порту 80, поэтому ошибка.

Решение:

  1. Измените порт сервера узла на  127.0.0.1:80.
  2. Измените порт сервера интерфейса на  127.0.0.1:80.
  3. Добавьте URL-адрес запроса, используемый методом asyncData, к доменному имени + порту, как показано ниже.
export default {
  asyncData ({ params }) {
    return axios.get(`https://127.0.0.1:3000/api/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
  }
}

1. Как импортировать файлы js в голову?

фон: в<head>тег, введенный в виде встроенногоflexible.jsдокумент. Этот проект в основном представляет собой проект мобильного терминала, представляяflexible.jsОсознайте проблему адаптации мобильного терминала.

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

head: {
  script: [{ innerHTML: require('./assets/js/flexible'), type: 'text/javascript', charset: 'utf-8'}],
  __dangerouslyDisableSanitizers: ['script']
}

2. Nuxt использует меньше препроцессоров, sass и другие

Предыстория: в компоненте<template>,<script>или<style>На вышеперечисленном используются различные препроцессоры, и после добавления процессора консоль сообщает об ошибке.

npm install --save-dev node-sass sass-loader

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

3. Как использовать px2rem

Предыстория: в css напишите px, передайтеpx2rem loader, перевести px в rem

В предыдущем проекте это проходилоpx2rem loaderРеализовано, но в рамках проекта Nuxt.js добавление загрузчика css пока очень трудоемко, т.к.vue-loader.

Я подумал о другом решении, вы можете использоватьpostcssиметь дело с. допустимыйnuxt.config.jsДобавьте конфигурацию в файл, или вы можетеpostcss.conf.jsдобавил в файл.

build: {
  postcss: [
    require('postcss-px2rem')({
      remUnit: 75 // 转换基本单位
    })
  ]
},

4. Как расширить конфигурацию веб-пакета

Предыстория: псевдоним каталога utils

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

extend (config, ctx) {
  console.log('webpack config:', config)
  if (ctx.isClient) {
    // 添加 alias 配置
    Object.assign(config.resolve.alias, {
      'utils': path.resolve(__dirname, 'utils')
    })
  }
}

5. Как добавить плагин vue

Предыстория: я сам инкапсулировал плагин toast vue, так как процесс создания экземпляра vue не виден, я не знаю, когда его внедрять.

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

module.exports = {
  plugins: ['~plugins/toast']
}

Файл ~plugins/toast.js:

import Vue from 'vue'
import toast from '../utils/toast'
import '../assets/css/toast.css'

Vue.use(toast)

6. Как изменить переменную среды NODE_ENV

Предыстория: В проекте установите 3NODE_ENVзначение, соответствующее различным версиям. разработка, локальная разработка, выпуск, предварительная версия, производство, онлайн-версия. Среди них предварительная версия имеет больше vconsole, чем производственная версия.

// package.json
"scripts": {
  "buildDev": "cross-env NODE_ENV=release nuxt build && backpack build",
  "startDev": "cross-env NODE_ENV=release PORT=3000 node build/main.js"
  },

Распечататьprocess.env.NODE_ENVеще,production.

В исходном коде рюкзака мы нашли ответ и выполняемbackpack buildкоманда, это будетprocess.env.NODE_ENVпревратиться вproduction, жестко запрограммирован и не настраивается...

В отчаянии, только вprocess.envвниз, добавить__ENVатрибут, представляющийNODE_ENV

clipboard.png

В это время информация, напечатанная на страницеprocess.env.__ENV undefined, но могу распечататьprocess.env.NODE_ENV.

можно настроитьnuxt.config.jsсередина,envсвойства для решения проблемы.

env: {
  __ENV: process.env.__ENV
}

7. Объект окна или документа не определен?

Предыстория: при внедрении сторонних плагинов или написании непосредственно в кодеwindow, консоль выдаст предупреждение,windowнеопределенный.

При возникновении этой проблемы сервер узла неwindowилиdocumentобъект.解决方法，通过process.browserдифференцировать окружающую среду.

if (process.browser) {
  // 引入第三方插件
  require('***')
  // 或者修改window对象下某一属性
  window.mbk = {}
}

8. Внедрение по запросу (инфраструктура пользовательского интерфейса и т. д.)

Например, используя структуру пользовательского интерфейса:element-ui

Я нашел много связанных статей, и там нет подробностей о том, как импортировать. Так что я возьму это и объясню ему:

Давайте сначала посмотрим, если вы не вводите его по мере необходимостиvendor.jsРазмер тома:

nuxt.js打包shi'li

Первым шагом является загрузка зависимостей:

# 先下载element-ui

npm install element-ui --save

# 如果使用按需引入，必须安装babel-plugin-component(官网有需要下载说明，此插件根据官网规则不同，安装插件不同)

npm install babel-plugin-component --save-dev

После установки следуйтеnuxt.jsв правилах нужноplugins/Создайте соответствующий файл плагина в каталоге

существуеткорневой каталог файласоздан (или уже существует)plugins/каталог, создайте каталог с именем:element-ui.jsфайл со следующим содержимым:

import Vue from 'vue'

import { Button } from 'element-ui'    //引入Button按钮

export default ()=>{
    Vue.use(Button)
}

Вторым шагом является внедрение плагина

существуетnuxt.config.js, добавьте конфигурацию как:plugins

css:[
'element-ui/lib/theme-chalk/index.css'
],
plugins:[
'~/plugins/element-ui'
]

По умолчанию: включить SSR, использовать рендеринг на стороне сервера, или вы можетеОтключить SSR вручную, настроенный как:

css:[
'element-ui/lib/theme-chalk/index.css'
],
plugins:[
    {
        src:'~/plugins/element-ui',
        ssr:false    //关闭ssr
    }
]

Третий шаг, настройкаbabelопции

существуетnuxt.config.js, настроенный вbuildВ опциях указаны правила официального сайта:

build: {
      babel:{        //配置按需引入规则
          "plugins":[
              [
                  "component",
                  {
                      "libraryName":"element-ui",
                      "styleLibraryName":"theme-chalk"
                  }
              ]
          ]
      },
    /*
     ** Run ESLINT on save
     */
    extend (config, ctx) {
      if (ctx.isClient) {
        config.module.rules.push({
           enforce: 'pre',
           test: /\.(js|vue)$/,
           loader: 'eslint-loader',
           exclude: /(node_modules)/
        })
      }
    }
 }

В этот момент мы наблюдаемРазмер файла после упаковки, как показано на рисунке:

nuxt.js打包示例

В настоящее время, мы успешно завершили настройку импорта по требованию.

9. Где вам не нужен рендеринг на стороне сервера

(1)
<no-ssr>
	插件或者组件
</no-ssr>

(2)
nuxt.config.js里ssr改为false
plugins: [
    {src: '~/plugins/ElementUI', ssr: false }
],

10. Nuxt должен добавить имя домена доступа перед адресом интерфейса

Решение. Вы можете использовать базовый URL-адрес axios для прокси-сервера.

import Vue from 'vue'
import axios from 'axios'

// axios.defaults.baseURL = "http://www.huanjingwuyou.com/"

axios.defaults.baseURL = "http://localhost:3000/"

// axios.defaults.baseURL = "http://test.huanjingwuyou.com/"

export default axios

Раздел 14: Обновление Nuxt Climbing Pit — оценка устройства для перехода на мобильный телефон

NUXT не имеет страницы index.html, где мы должны написать код JS для суждения устройства, см. Мой код ниже

1. Представьте промежуточное ПО промежуточного слоя

  • существуетnuxt.config.jsчерезrouterпредставлятьmiddlewareпромежуточное ПО

nuxt.config.jsкод показывает, как показано ниже

export default {
    router: {
        middleware: ["device"],
    },
}

2. Создайте новый в корневом каталогеutilsфайл и создайте новый файлdeviceType.js

deviceType.jsКод файла следующий

/**
 *
 * @param {*} UA ,就是userAgent
 * @returns  type: 设备类型
 *           env: 访问环境(微信/微博/qq)
 *           masklayer: 就是给外部拿到判断是否显示遮罩层的,一些特殊环境要引导用户到外部去打开访问
 */
function isWechat(UA) {
    return /MicroMessenger/i.test(UA) ? true : false;
}

function isWeibo(UA) {
    return /Weibo/i.test(UA) ? true : false;
}

function isQQ(UA) {
    return /QQ/i.test(UA) ? true : false;
}

function isMoible(UA) {
    return /(Android|webOS|iPhone|iPod|tablet|BlackBerry|Mobile)/i.test(UA) ?
        true :
        false;
}

function isIOS(UA) {
    return /iPhone|iPad|iPod/i.test(UA) ? true : false;
}

function isAndroid(UA) {
    return /Android/i.test(UA) ? true : false;
}
export function deviceType(UA) {
    if (isMoible(UA)) {
        if (isIOS(UA)) {
            if (isWechat(UA)) {
                return {
                    type: "ios",
                    env: "wechat",
                    masklayer: true,
                };
            }
            if (isWeibo(UA)) {
                return {
                    type: "ios",
                    env: "weibo",
                    masklayer: true,
                };
            }
            if (isQQ(UA)) {
                return {
                    type: "ios",
                    env: "qq",
                    masklayer: true,
                };
            }
            return {
                type: "ios",
            };
        }
        if (isAndroid(UA)) {
            if (isWechat(UA)) {
                return {
                    type: "android",
                    env: "wechat",
                    masklayer: true,
                };
            }
            if (isWeibo(UA)) {
                return {
                    type: "android",
                    env: "weibo",
                    masklayer: true,
                };
            }
            if (isQQ(UA)) {
                return {
                    type: "android",
                    env: "qq",
                    masklayer: true,
                };
            }
            return {
                type: "android",
            };
        }
        return {
            type: "mobile",
        };
    } else {
        return {
            type: "pc",
        };
    }
}

3. Вmiddlewareдобавить вdevice.jsдокумент

device.jsкод показывает, как показано ниже

// @ts-nocheck
import { deviceType } from "~/utils/deviceType";
export default function(context) {
    // @ts-ignore
    context.userAgent = process.server ?
        context.req.headers["user-agent"] :
        navigator.userAgent;
    // 给全局上下文添加一个属性来保存我们返回的匹配信息
    context.deviceType = deviceType(context.userAgent);
    // 这里注入到store,是因为我部分页面需要判断机型请求不同的数据,
    // 你们没有用到的话可以移除
    // context.store.commit("SetDeviceType", context.deviceType);
    // 若是判断UA非移动端的,就在这里做处理了..
    // context.redirect(status,url) 这个可以重定向到外部网站
    // 若是内部访问可以直接用router对象push
    if (context.deviceType.type === "pc") {
        // context.redirect(302,'www.huanjingwuyou.com')    //301是永久重定向，如果你想随着设备类型改变一直变，请改为302
    } else {
        context.redirect(302,'m.huanjingwuyou.com')    //301是永久重定向，如果你想随着设备类型改变一直变，请改为302
    }
}

Опыт:

0. Страница рендеринга Nuxt разделена на два этапа: рендеринг сервера и рендеринг браузера.

1. Nuxt может использовать asyncData на этапе рендеринга на стороне сервера для получения данных заранее, данные автоматически сохраняются в данных, а данные напрямую берутся браузером при рендеринге.

2. asyncDataМетод будет вызываться в компоненте (ограничено компонентами страницы) будет вызываться каждый раз при обновлении и загрузке страницы или при переключении маршрута, ордер находится перед beforeCreate и создается

3. В жизненном цикле рендеринга сервера nuxt создано только две функции-ловушки и функция beforeCreate.

4. асинхронность для одновременных запросов

5. Настройтесь на улучшение SEO, частично нужно вернуть {}

6. Каждый раз, когда вы вызываете интерфейс, вам нужно добавить его перед интерфейсом访问域名, можно настроить через axiosaxios.defaults.baseURL

7. Nuxt использует прокси для прокси

8. Перейти на страницу деталей и использовать nuxt-ссылку для перехода, чтобы параметр url-адреса был более благоприятным для seo, а доменное имя при переходе сращивалось само собой

9. Напишите страницу ошибки, если вызов маршрутизации не удался или в коде есть ошибка, он перейдет на страницу ошибки.

10. Публичные статические страницы можно записать в ассеты, а потом импортировать в nuxt.config.js

11. Когда вам нужно опубликовать в Интернете.nuxt, assets, package.json, nuxt.config.js, staticПоместите его в Nginx для прокси

BUG

Как использовать асинхронные данные в компонентах?

Если компонент не является компонентом страницы, привязанным к маршруту, асинхронные данные в принципе не могут использоваться. Потому что Nuxt.js только расширяет и улучшает компоненты страницы.dataметод, чтобы он мог поддерживать асинхронную обработку данных.

Для компонентов, не являющихся страницами, есть два способа добиться асинхронного сбора данных:

  1. в компонентеmountedМетод асинхронной логики сбора данных и компонентов данных после установки предела: сервисный терминал не поддерживает рендеринг.
  2. в компоненте страницыasyncDataилиfetchметод и сделать вызов API с данными какpropsпередается дочерним компонентам. Серверный рендеринг работает нормально. недостаток:asyncDataИли выборка страницы может быть менее читаемой, потому что она загружает данные из других компонентов. Таким образом, какой метод использовать, зависит от того, нужно ли вашему приложению поддерживать отрисовку дочерних компонентов на стороне сервера.

Почему страницы приложений Nuxt.js мерцают?

Это потому, что врежим разработкиДалее, чтобы обеспечить горячую загрузку через Webpack, код CSS упаковывается в код JavaScript и динамически вводится на страницу, так что перерисовка элемента вызывает мерцание.

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

Как изменить конфигурацию хоста и порта?

Передается непосредственно как параметр команды

nuxt --hostname myhost --port 3333

или

"scripts": {
  "dev": "nuxt --hostname myhost --port 3333"
}

существуетnuxt.config.jsСредняя конфигурация:

существуетnuxt.config.jsДобавить к:

export default {
  server: {
    port: 8000, // default: 3000
    host: '0.0.0.0', // default: localhost
  },
  // other configs
}

Используйте переменные окружения NUXT_HOST и NUXT_PORT.

Аналогичен HOST и PORT, но более конкретен, если вам нужно добавить что-то еще.

"scripts": {
  "dev": "NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt"
}

Уведомление: для лучшей поддержки кроссплатформенной разработки вы можете использоватьcross-envПакет зависимостей.

Зависимости установки:

npm install --save-dev cross-env

Настройте кросс-окружение:

"scripts": {
  "dev": "cross-env NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt"
}

Использование переменных окружения HOST и PORT

"scripts": {
  "dev": "HOST=0.0.0.0 PORT=3333 nuxt"
}

существуетpackage.jsonСредняя конфигурацияnuxt :

в твоемpackage.jsonФайл, добавьте:

"config": {
  "nuxt": {
    "host": "0.0.0.0",
    "port": "3333"
  }
},
"scripts": {
  "dev": "nuxt"
}
Категории