Чтобы прочитать это, достаточно изучить Vue.

JavaScript Vue.js Webpack Babel

Vue — прогрессивный JavaScript-фреймворк

представлять

Разница между библиотеками и фреймворками

Library

Библиотека — это, по сути, набор функций. Каждый раз, когда функция вызывается, она реализует определенную функцию, а затем控制权пользователю
  • Представляет: jQuery
  • Ядро библиотеки jQuery: манипулирование DOM, а именно: инкапсуляция манипулирования DOM и упрощение манипулирования DOM.

Framework

Фреймворк — это комплексное решение.При использовании фреймворка вам нужно поместить свой код в нужное место во фреймворке, и фреймворк вызовет ваш код в нужное время.
  • Фреймворк определяет собственный метод программирования и является законченным решением.
  • При использовании фреймворка все контролируется фреймворком, нам нужно только писать код по правилам

главное отличие

  • You call Library, Framework calls you

  • Суть: кто играет ведущую роль (инверсия управления)

    • Фреймворк контролирует весь процесс в фреймворке
    • Используя библиотеку, разработчик сам решает, как вызывать методы, представленные в библиотеке (помощник).
  • Голливудский принцип: не звоните нам, мы позвоним вам.
  • Фреймворк очень навязчивый (от начала до конца)

Введение в МВВМ

MVC

  • M: Модель модели данных (специально используется для манипулирования данными, CRUD данных)
  • V: просмотр (для внешнего интерфейса это страница)
  • C: Контроллер Контроллер (это мост между представлением и моделью данных, используемый для обработки бизнес-логики)

Состав МВВМ

  • MVVM ===> M / V / VM
  • M: модель данных модели
  • V: вид вид
  • ВМ: модель представления ViewModel

Сравнение преимуществ

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

  • МВВМ через数据双向绑定Автоматически синхронизировать данные в обоих направлениях

    • V (изменить данные) -> M
    • M (изменить данные) -> V
    • Данные — это ядро
  • Vue, фреймворк режима MVVM, не рекомендуется разработчикам для манипулирования DOM вручную.

MVVM в Vue

Несмотря на то, что он не полностью следует модели MVVM, дизайн Vue, несомненно, был вдохновлен ею. Поэтому имя переменной vm (сокращение от ViewModel) часто используется в документации для представления экземпляра Vue.

Изучая Vue, вы измените свой разум

  • Думайте не о том, как манипулировать DOM, а о том, как манипулировать данными! ! !

Начало работы — Привет, Вью

  • Установить:npm i -S vue 
<!-- 指定vue管理内容区域，需要通过vue展示的内容都要放到找个元素中  通常我们也把它叫做边界 数据只在边界内部解析-->
<div id="app">{{ msg }}</div>

<!-- 引入 vue.js -->
<script src="vue.js"></script>

<!-- 使用 vue -->
<script>
  var vm = new Vue({
    // el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
    el: '#app',
    // Vue 实例的数据对象，用于给 View 提供数据
    data: {
      msg: 'Hello Vue'
    }
  })
</script>

Экземпляр Vue

  • Примечание 1:Сначала объявите данные в data, затем используйте данные
  • Примечание 2: можно пройтиvm.$dataдоступ ко всем свойствам данных илиvm.msg 
var vm = new Vue({
  data: {
    msg: '大家好，...'
  }
})

vm.$data.msg === vm.msg // true

привязка данных

  • Самый распространенный способ:Mustache(插值语法), то есть,{{}}грамматика
  • объяснять:{{}}из объекта данныхdataполучить данные из
  • Описание: при изменении значения атрибута объекта данных содержимое в точке интерполяции будет обновлено.
  • проиллюстрировать:{{}}Только выражения JavaScript могут отображаться в
  • Уведомление:Синтаксис усов нельзя применять к атрибутам HTML-элементов. 
<h1>Hello, {{ msg }}.</h1>
<p>{{ 1 + 2 }}</p>
<p>{{ isOk ? 'yes': 'no' }}</p>

<!-- ！！！错误示范！！！ -->
<h1 title="{{ err }}"></h1>

Двусторонняя привязка данных Vue

  • Двусторонняя привязка данных: связывайте данные данных DOM и экземпляра Vue вместе и влияют друг на друга.

    • Изменения в данных вызовут изменения в DOM
    • Изменения DOM также вызывают изменения данных

  • принцип:Object.definePropertyсерединаgetа такжеsetметод

    • getterа такжеsetter: аксессор
    • Функция: указать读取或设置Операция, выполняемая, когда значение свойства объекта
  • Vue — глубокое погружение в реактивные принципы
  • MDN - Object.defineProperty()
/*  defineProperty语法 介绍 */
var obj = {}
Object.defineProperty(obj, 'msg', {
  // 设置 obj.msg = "1" 时set方法会被系统调用 参数分别是设置后和设置前的值
  set: function (newVal, oldVal) {  },
  // 读取 obj.msg 时get方法会被系统调用
  get: function ( newVal, oldVal ) {}
})

Минималистская реализация двусторонней привязки Vue

<!-- 示例 -->
<input type="text" id="txt" />
<span id="sp"></span>

<script>
var txt = document.getElementById('txt'),
    sp = document.getElementById('sp'),
    obj = {}

// 给对象obj添加msg属性，并设置setter访问器
Object.defineProperty(obj, 'msg', {
  // 设置 obj.msg  当obj.msg反生改变时set方法将会被调用  
  set: function (newVal) {
    // 当obj.msg被赋值时 同时设置给 input/span
    txt.value = newVal
    sp.innerText = newVal
  }
})

// 监听文本框的改变 当文本框输入内容时 改变obj.msg
txt.addEventListener('keyup', function (event) {
  obj.msg = event.target.value
})
</script>

Примечания по динамическому добавлению данных

  • Примечание: толькоdataДанные в нем реагируют, а динамически добавляемые данные по умолчанию не реагируют.

  • Реактивные добавления данных динамически могут быть достигнуты следующими способами

    • 1 Vue.set(object, key, value)- подходит для добавления одного атрибута
    • 2 Object.assign()- Подходит для добавления нескольких свойств
var vm = new Vue({
  data: {
    stu: {
      name: 'jack',
      age: 19
    }
  }
})

/* Vue.set */
Vue.set(vm.stu, 'gender', 'male')

/* Object.assign 将参数中的所有对象属性和值 合并到第一个参数 并返回合并后的对象*/
vm.stu = Object.assign({}, vm.stu, { gender: 'female', height: 180 })

Асинхронные обновления DOM

  • Описание: Vue выполняет обновления DOM асинхронно, отслеживает все изменения данных и сразу обновляет DOM.
  • Преимущества: дублирующиеся данные могут быть удалены, что очень важно, чтобы избежать ненужных вычислений и избежать повторных операций DOM.

  • Если вам нужны данные в обновленном доме, вам нужно пройтиVue.nextTick(callback): после обновления DOM выполнить операцию (относится к операции DOM)

    • вызов экземпляраvm.$nextTick(function () {}) 
methods: {
  fn() {
    this.msg = 'change'
    this.$nextTick(function () {
      console.log('$nextTick中打印：', this.$el.children[0].innerText);
    })
    console.log('直接打印：', this.$el.children[0].innerText);
  }
}

инструкция

  • Объяснение: Директивыv-Особые свойства префиксов
  • Функция: когда значение выражения изменяется, соответствующий эффект будет применен к DOM в ответ.

v-text

  • Explanation: Обновите textContent объекта DOM.
<h1 v-text="msg"></h1>

v-html

  • Объяснение: Обновите InnerHTML объекта DOM.
<h1 v-html="msg"></h1>

v-bind

  • Функция: когда значение выражения изменяется, соответствующий эффект будет применен к DOM в ответ.
  • грамматика:v-bind:title="msg"
  • Сокращение::title="msg" 
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on

  • Роль: связывать события
  • грамматика:v-on:click="say" or v-on:click="say('参数', $event)"
  • Сокращение:@click="say"
  • Описание: Связанное событие определено вmethods 
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

модификатор события

  • .stopЧтобы остановить всплытие, вызовите event.stopPropagation().
  • .preventЧтобы предотвратить поведение по умолчанию, вызовите event.preventDefault().
  • .captureИспользуйте события при добавлении прослушивателей событий捕获модель
  • .selfСобытие будет срабатывать только в том случае, если событие срабатывает на самом элементе (т.е. не на дочернем элементе)
  • .onceСобытие срабатывает только один раз

v-model

  • Роль: создание двусторонней привязки данных к элементам формы.
  • Описание: Прослушивание событий пользовательского ввода для обновления данных.
  • Кейс: Калькулятор
<input type="text" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-for

  • Роль: отображать элемент или блок шаблона несколько раз на основе исходных данных.
<!-- 1 基础用法 -->
<div v-for="item in items">
  {{ item.text }}
</div>

<!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>

ключевое свойство

  • Рекомендуемое использованиеv-forпредоставляется, когдаkeyсвойства для повышения производительности.
  • Описание: Используя ключ, VUE изменит порядок элементов на основе изменения ключа и удалит элементы, которые не существуют в ключе.
  • vue key
  • Описание атрибута ключа vue
<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

Обработка стилей - класс и стиль

  • Как использовать:v-bind:class="expression" or :class="expression"
  • Типы выражений: Строка, Массив, Объект (выделение)
  • грамматика:
<!-- 1 -->
<div v-bind:class="{ active: true }"></div> ===> 解析后
<div class="active"></div>

<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>解析后
<div class="active text-danger"></div>

<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>解析后
<div class="active text-danger"></div>


--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是data中定义的对象 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

V-if и v-шоу

  • условный рендеринг
  • v-if: Уничтожить или перестроить элемент на основе истинного или ложного условия значения выражения.
  • v-show: переключение свойства CSS отображения элемента на основе истинных и ложных значений выражения.
<p v-show="isShow">这个元素展示出来了吗？？？</p>
<p v-if="isShow">这个元素，在HTML结构中吗？？？</p>

Улучшенная производительность: v-pre

  • Описание: Vue пропустит процесс компиляции этого элемента и его дочерних элементов. Может использоваться для отображения необработанных тегов Mustache. Пропуск большого количества узлов без инструкций ускоряет компиляцию.
<span v-pre>{{ this will not be compiled }}</span>

Улучшенная производительность: v-once

  • Описание: vue отображает элементы и компоненты только один раз. При последующем повторном рендеринге элемент/компонент и все его дочерние элементы будут рассматриваться как статическое содержимое и будут пропущены. Это можно использовать для оптимизации производительности обновления.
<span v-once>This will never change: {{msg}}</span>

фильтр фильтр

  • Роль: форматирование текстовых данных
  • Фильтры можно использовать в двух местах:{{}}и выражения v-bind
  • Два вида фильтров: 1 глобальный фильтр 2 локальный фильтр

глобальный фильтр

  • Описание: фильтры, созданные глобально, можно использовать в любом экземпляре vue.
  • Примечание. При использовании глобального фильтра необходимо сначала создать глобальный фильтр, а затем создать экземпляр Vue.
  • То, что отображается, определяется возвращаемым значением фильтра.
Vue.filter('filterName', function (value) {
  // value 表示要过滤的内容
})
  • Пример:
<div>{{ dateStr | date }}</div>
<div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>

<script>
  Vue.filter('date', function(value, format) {
    // value 要过滤的字符串内容，比如：dateStr
    // format 过滤器的参数，比如：'YYYY-MM-DD hh:mm:ss'
  })
</script>

локальный фильтр

  • Описание: локальные фильтры создаются в содержимом экземпляра vue и работают только в текущем экземпляре.
{
  data: {},
  // 通过 filters 属性创建局部过滤器
  // 注意：此处为 filters
  filters: {
    filterName: function(value, format) {}
  }
}

модификатор ключевого значения

  • Описание: При прослушивании событий клавиатуры Vue позволяетv-onДобавить ключевые модификаторы при прослушивании событий клавиатуры
  • События клавиатуры — модификаторы значений клавиш
  • Другое: клавиши-модификаторы (.ctrl и т. д.), модификаторы кнопок мыши (.left и т. д.)
// 只有在 keyCode 是 13 时调用 vm.submit()
@keyup.13="submit"
// 使用全局按键别名
@keyup.enter="add"

---

// 通过全局 config.keyCodes 对象自定义键值修饰符别名
Vue.config.keyCodes.f2 = 113
// 使用自定义键值修饰符
@keyup.enter.f2="add"

Мониторим изменения данных - смотрим

  • Обзор:watch— объект, ключ — наблюдаемое выражение, а значение — соответствующая функция обратного вызова.
  • Функция: при изменении значения выражения будет вызвана соответствующая функция обратного вызова для завершения операции мониторинга ответа.
  • VUE $watch
new Vue({
  data: { a: 1, b: { age: 10 } },
  watch: {
    a: function(val, oldVal) {
      // val 表示当前值
      // oldVal 表示旧值
      console.log('当前值为：' + val, '旧值为：' + oldVal)
    },

    // 监听对象属性的变化
    b: {
      handler: function (val, oldVal) { /* ... */ },
      // deep : true表示是否监听对象内部属性值的变化 
      deep: true
    },

    // 只监视user对象中age属性的变化
    'user.age': function (val, oldVal) {
    },
  }
})

вычисляемое свойство

  • Описание: вычисляемые свойства кэшируются на основе их зависимостей и переоцениваются только при изменении их зависимостей.
  • Примечание. Не добавляйте слишком много логики в синтаксис Mustache ({{}}), иначе шаблон будет слишком тяжелым, сложным для понимания и обслуживания.
  • Уведомление:computedсвойства в нельзя использовать сdataАтрибуты в атрибуте имеют одинаковое имя, иначе будет сообщено об ошибке
  • Принцип вычисляемого свойства Vue
var vm = new Vue({
  el: '#app',
  data: {
    firstname: 'jack',
    lastname: 'rose'
  },
  computed: {
    fullname() {
      return this.firstname + '.' + this.lastname
    }
  }
})

жизненный цикл экземпляра

  • Все компоненты Vue являются экземплярами Vue и принимают один и тот же объект параметров (за исключением некоторых параметров, специфичных для корневого экземпляра).
  • Жизненный цикл экземпляра также называется: жизненный цикл компонента

Введение в жизненный цикл

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

Определение функции хука жизненного цикла: от создания компонента до его монтирования, запуска на странице, закрытия страницы и выгрузки компонента — эти три этапа всегда сопровождаются различными событиями Эти события вместе называются функциями жизненного цикла компонентов!

  • Примечание. Vue будет автоматически вызывать во время выполнения.生命周期钩子函数, нам нужно только предоставить эти функции ловушек
  • Примечание. Все имена функций ловушек указаны в Vue!

Хук-функция - beforeCreate()

  • Описание: Вызывается после инициализации экземпляра, до настройки наблюдателя данных и события/события наблюдателя.
  • Примечание. В настоящее время данные в данных и методы в методах не могут быть получены.

Функция крюка -created()

Хук-функция - beforeMounted()

  • Описание: вызывается перед началом монтирования

Функция крюка -mounted()

  • Описание: на данный момент экземпляр vue смонтирован на странице, и элементы DOM в el могут быть получены для операций DOM.

Хук-функция - beforeUpdated()

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

Хук-функция - обновлено()

  • Описание: DOM компонента был обновлен, поэтому теперь вы можете выполнять операции, зависящие от DOM.

Хук-функция - beforeDestroy()

  • Описание: Вызывается перед уничтожением экземпляра. На этом этапе экземпляр все еще полностью доступен.
  • Сценарий использования: Перед уничтожением экземпляра выполните задачи очистки, такие как: очистка таймеров и т. д.

Хук-функция - уничтожена()

  • Описание: вызывается после уничтожения экземпляра Vue. После вызова все, на что указывает экземпляр Vue, будет развязано, все прослушиватели событий будут удалены, а все дочерние экземпляры уничтожены.

axios

  • Promise based HTTP client for the browser and node.js

    • HTTP-клиент на основе Promise для: браузеров и node.js
    • Инкапсулируйте ajax для отправки запросов и получения данных асинхронно
  • Установить:npm i -S axios
  • axios
// 在浏览器中使用，直接引入js文件使用下面的GET/POST请求方式即可
// 1 引入 axios.js
// 2 直接调用axios提供的API发送请求
created: function () {
  axios.get(url)
    .then(function(resp) {})
}

---
// 配合 webpack 使用方式如下：
import Vue from 'vue'
import axios from 'axios'
// 将 axios 添加到 Vue.prototype 中
Vue.prototype.$axios = axios

---
// 在组件中使用：
methods: {
  getData() {
    this.$axios.get('url')
      .then(res => {})
      .catch(err => {})
  }
}

---
// API使用方式：

axios.get(url[, config])
axios.post(url[, data[, config]])
axios(url[, config])
axios(config)

Получить запрос

const url = 'http://vue.studyit.io/api/getnewslist'

// url中带有query参数
axios.get('/user?id=89')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// url和参数分离，使用对象
axios.get('/user', {
  params: {
    id: 12345
  }
})

Отправить запрос

// 使用 qs 包，处理将对象序列化为字符串
// npm i -S qs
// var qs = require('qs')
import qs from 'qs'
qs.stringify({ 'bar': 123 }) ===> "bar=123"
axios.post('/foo', qs.stringify({ 'bar': 123 }))

// 或者：
axios.post('/foo', 'bar=123&age=19')
const url = 'http://vue.studyit.io/api/postcomment/17'
axios.post(url, 'content=点个赞不过份')

axios.post('/user', qs.stringify({
    firstName: 'Fred',
    lastName: 'Flintstone'
  }))
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Глобальная конфигурация

// 设置请求公共路径：
axios.defaults.baseURL = 'http://vue.studyit.io'

перехватчик

  • Перехватчик будет перехватывать каждый отправленный запрос и выполняться до того, как запрос будет отправлен.requestФункция в , выполняемая после отправки запросаresponseфункционировать в
// 请求拦截器
axios.interceptors.request.use(function (config) {
    // 所有请求之前都要执行的操作

    return config;
  }, function (error) {
    // 错误处理

    return Promise.reject(error);
  });

// 响应拦截器
axios.interceptors.response.use(function (response) {
    // 所有请求完成后都要执行的操作

    return response;
  }, function (error) {
    // 错误处理
    return Promise.reject(error);
  });

пользовательская директива

  • Роль: выполнять манипуляции с DOM
  • Сценарий использования: выполнение низкоуровневых операций над чистыми элементами DOM, например: текстовое поле получает фокус
  • Пример использования пользовательской директивы Vue
  • Два вида инструкций: 1 глобальная инструкция 2 локальная инструкция

Глобальная пользовательская директива

// 第一个参数：指令名称
// 第二个参数：配置对象，指定指令的钩子函数
Vue.directive('directiveName', {
  // bind中只能对元素自身进行DOM操作，而无法对父级元素操作
  // 只调用一次 指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  bind( el，binding, vnode ) {
    // 参数详解
    // el：指令所绑定的元素，可以用来直接操作 DOM 。
    // binding：一个对象，包含以下属性：
      // name：指令名，不包括 v- 前缀。
      // value：指令的绑定值，等号后面的值 。
      // oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
      // expression：字符串形式的指令表达式 等号后面的字符串 形式
      // arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
      // modifiers：指令修饰符。例如：v-directive.foo.bar中，修饰符对象为 { foo: true, bar: true }。
    // vnode：Vue 编译生成的虚拟节点。。
    // oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
  },
  // inserted这个钩子函数调用的时候，当前元素已经插入页面中了，也就是说可以获取到父级节点了
  inserted (  el，binding, vnode ) {},
  //  DOM重新渲染前
  update(el，binding, vnode,oldVnode) {},
  // DOM重新渲染后
  componentUpdated ( el，binding, vnode,oldVnode ) {},
  // 只调用一次，指令与元素解绑时调用
  unbind ( el ) {
    // 指令所在的元素在页面中消失，触发
  }
})
// 简写 如果你想在 bind 和 update 时触发相同行为，而不关心其它的钩子:
Vue.directive('自定义指令名', function( el, binding ) {})
// 例：
Vue.directive('color', function(el, binding) {
  el.style.color = binging.value
})
// 使用 注意直接些会被i成data中的数据“red” 需要字符串则嵌套引号"'red'"
<p v-color="'red'"></p>

Локальная пользовательская директива

var vm = new Vue({
  el : "#app",
  directives: {
    directiveName: { }
  }
})

компоненты

Система компонентов — еще одна важная концепция Vue, потому что это абстракция, которая позволяет нам создавать большие приложения с небольшими, независимыми и часто повторно используемыми компонентами. Подумайте об этом, почти любой тип интерфейса приложения можно абстрагировать в дерево компонентов.
  • Два способа создания компонентов: 1 глобальный компонент 2 локальный компонент

глобальный компонент

  • Описание: глобальные компоненты доступны во всех экземплярах vue.
  • Уведомление:Сначала зарегистрируйте компонент, затем инициализируйте корневой экземпляр. 
// 1 注册全局组件  
Vue.component('my-component', {
  // template 只能有一个根元素
  template: '<p>A custom component!</p>',
  // 组件中的 `data` 必须是函数 并且函数的返回值必须是对象
  data() {
    return {
      msg: '注意：组件的data必须是一个函数！！！'
    }
  }
})

// 2 使用：以自定义元素的方式
<div id="example">
  <my-component></my-component>
</div>

// =====> 渲染结果
<div id="example">
  <p>A custom component!</p>
</div>


// 3 template属性的值可以是：
  - 1 模板字符串
  - 2 模板id  template: '#tpl'
<script type="text/x-template" id="tpl">
  <p>A custom component!</p>
</script>
  • extend: Используя базовый конструктор Vue, создайте «подкласс». Параметр — это объект, содержащий параметры компонента.
// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

var Home = Vue.extend({
  template: '',
  data() {}
})
Vue.component('home', Home)

местные компоненты

  • Описание: локальные компоненты определены в конкретном экземпляре vue и могут использоваться только в этом экземпляре vue.
var Child = {
  template: '<div>A custom component!</div>'
}

new Vue({
  // 注意：此处为 components
  components: {
    // <my-component> 将只在当前vue实例中使用
    // my-component 为组件名 值为配置对象 
    'my-component': {
      template: ``,
      data () { return { } },
      props : []
    }
  }
})

особенность

Только указанная таблица может существовать в некоторых определенных тегах.Так же, как ul > li, если вы хотите, чтобы браузер нормально анализировал ее, вам нужно использовать is
<!-- 案例 -->
<ul id="app">
  <!-- 不能识别 -->
  <my-li></my-li> 
  正常识别
  <li is="my-li"></li>
</ul>

<script>
  var vm = new Vue({
    el: "#app",
    components : {
      myLi : {
        template : `<li>内容</li>`
      }
    }
  })
</script>

компонент связи

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

  • Как: через подкомпонентыpropsсвойства для передачи реквизитов данных - это массив
  • Примечание. Значение свойства должно быть передано в компонентеpropsАтрибут отображается и указывается, иначе он не вступит в силу
  • Описание: прошлоpropsиспользование имущества иdataСвойства используются одинаковые
<div id="app">
  <!-- 如果需要往子组件总传递父组件data中的数据 需要加v-bind="数据名称" -->
  <hello v-bind:msg="info"></hello>
  <!-- 如果传递的是字面量 那么直接写-->
  <hello my-msg="abc"></hello>
</div>

<!-- js -->
<script>
  new Vue({
    el: "#app",
    data : {
      info : 15
    },
    components: {
      hello: {
        // 创建props及其传递过来的属性
        props: ['msg', 'myMsg'],
        template: '<h1>这是 hello 组件，这是消息：{{msg}} --- {{myMsg}}</h1>'
      }
    }
  })
</script>

дочерний компонент к родительскому компоненту

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

  • Описание: С помощью пользовательских событий в vue (v-on:cunstomFn="fn")

шаг:

  • 1. Определите метод parentFn в родительском компоненте
  • 2. Привяжите пользовательское событие к тегу введения компонента дочернего компонента v-on: имя пользовательского события = "метод в родительском компоненте" ==> @pfn="parentFn"
  • 3. Передайте подкомпонент$emit()Инициировать пользовательское событие события this.$emit(pfn, список параметров...)
<hello @pfn="parentFn"></hello>

<script>
  Vue.component('hello', {
    template: '<button @click="fn">按钮</button>',
    methods: {
      // 子组件：通过$emit调用
      fn() {
        this.$emit('pfn', '这是子组件传递给父组件的数据')
      }
    }
  })
  new Vue({
    methods: {
      // 父组件：提供方法
      parentFn(data) {
        console.log('父组件：', data)
      }
    }
  })
</script>

Коммуникация между компонентами, не являющимися родительскими и дочерними

В простых сценариях вы можете использовать пустой экземпляр Vue в качестве шины событий.
  • $on(): привязать пользовательские события
var bus = new Vue()

// 在组件 B 绑定自定义事件
bus.$on('id-selected', function (id) {
  // ...
})
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
  • Пример: Компонент A ---> Компонент B
<!-- 组件A： -->
<com-a></com-a>
<!-- 组件B： -->
<com-b></com-b>

<script>
  // 中间组件
  var bus = new Vue()
  // 通信组件
  var vm = new Vue({
    el: '#app',
    components: {
      comB: {
        template: '<p>组件A告诉我：{{msg}}</p>',
        data() {
          return {
            msg: ''
          }
        },
        created() {
          // 给中间组件绑定自定义事件 注意:如果用到this 需要用箭头函数
          bus.$on('tellComB', (msg) => {
            this.msg = msg
          })
        }
      },
      comA: {
        template: '<button @click="emitFn">告诉B</button>',
        methods: {
          emitFn() {
            // 触发中间组件中的自定义事件
            bus.$emit('tellComB', '土豆土豆我是南瓜')
          }
        }
      }
    }
  })
</script>

Распространение контента

  • Укажите область отображения контента через тег

Случай:

<!-- html代码 -->
<div id="app">
  <hello>
    <!-- 如果只有一个slot插槽 那么不需要指定名称 -->
    <p slot="插槽名称">我是额外的内容</p>
  </hello>
</div>
// js代码
new vue({
  el : "#app",
  components : {
    hello : {
      template : `
          <div>
            <p>我是子组件中的内容</p>
            <slot name="名称"></slot>
          </div>
        `
    }
  }
})

Получить компонент (или элемент) - refs

  • проиллюстрировать:vm.$refsОбъект, содержащий все дочерние компоненты (или элементы HTML), которые имеют зарегистрированные ссылки.
  • Использование: в элементе HTML добавьтеrefсвойство, затем в JS черезvm.$refs.属性получить
  • Примечание. Если вы получаете подкомпонент, вы можете получить данные и методы в подкомпоненте через ref
<div id="app">
  <div ref="dv"></div>
  <my res="my"></my>
</div>

<!-- js -->
<script>
  new Vue({
    el : "#app",
    mounted() {
      this.$refs.dv //获取到元素
      this.$refs.my //获取到组件
    },
    components : {
      my : {
        template: `<a>sss</a>`
      }
    }
  })
</script>

SPA – одностраничное приложение

SPA: одностраничное приложение

单页Web应用（single page application，SPA），就是只有一个Web页面的应用，
是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。

  • Одностраничное приложение:

    • Только в первый раз страница будет загружена, а каждый последующий запрос только для получения необходимых данных, далее на страницу выводятся данные, полученные парсингом js в странице

  • Традиционные многостраничные приложения:

    • Для традиционных многостраничных приложений каждый запрос к серверу возвращает полную страницу.

Преимущество

  • 1 Уменьшите объем запросов, увеличьте скорость ответа страницы и уменьшите нагрузку на сервер
  • 2 Улучшенный пользовательский интерфейс, позволяющий пользователям почувствовать плавность нативного приложения в веб-приложении.

Реализовать идеи и технические моменты

  • 1 ajax
  • 2 Использование якорей (window.location.hash #)
  • 3 событие hashchange window.addEventListener ("hashchange", function () {})
  • 4 Отслеживайте событие изменения значения точки привязки и запрашивайте соответствующие данные в соответствии с различными значениями точки привязки.
  • 5 Первоначально использовался для перехода внутрь страницы, поиска и отображения соответствующего содержимого.

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

  • Маршрутизация: соответствующее правило между значением хеш-функции (# hash) в браузере и отображаемым содержимым представления (шаблоном).
  • Маршрутизация в vue: соответствие между хешем и компонентом

    В веб-приложении функциональность всего приложения отображается и управляется на одной странице.
    SPA часто представляет собой приложение со сложными функциями, поэтому для эффективного управления всем содержимым представлений возникла интерфейсная маршрутизация!
    Проще говоря, маршрутизация — это набор правил сопоставления (правил взаимно однозначного соответствия), которые формулируются разработчиками.
    При изменении значения хеш-функции (# хэш) в URL-адресе маршрут будет отображать соответствующий контент представления в соответствии с установленными правилами.

основное использование

  • Установить: npm i -S vue-router
    <div id="app">
      <!-- 5 路由入口 指定跳转到只定入口 -->
      <router-link to="/home">首页</router-link>
      <router-link to="/login">登录</router-link>
    
      <!-- 7 路由出口：用来展示匹配路由视图内容 -->
      <router-view></router-view>
    </div>
    
    <!-- 1 导入 vue.js -->
    <script src="./vue.js"></script>
    <!-- 2 导入 路由文件 -->
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
      // 3 创建两个组件
      const Home = Vue.component('home', {
        template: '<h1>这是 Home 组件</h1>'
      })
      const Login = Vue.component('login', {
        template: '<h1>这是 Login 组件</h1>'
      })
    
      // 4 创建路由对象
      const router = new VueRouter({
        routes: [
          // 路径和组件一一对应
          { path: '/home', component: Home },
          { path: '/login', component: Login }
        ]
      })
    
      var vm = new Vue({
        el: '#app',
        // 6 将路由实例挂载到vue实例
        router
      })
    </script>

перенаправить

//  将path 重定向到 redirect
{ path: '/', redirect: '/home' }

Маршрут другой конфигурации

  • Подсветка навигации по маршруту

    • Описание: Текущая совпадающая навигационная ссылка автоматически добавит класс router-link-exact-active router-link-active.
    • Конфигурация: linkActiveClass

  • сопоставить шаблон маршрута

    • Конфигурация: режим
new Router({
  routers:[],
  mode: "hash", //默认hash | history 可以达到隐藏地址栏hash值 | abstract，如果发现没有浏览器的 API 则强制进入
  linkActiveClass : "now" //当前匹配的导航链接将被自动添加now类
})

параметр маршрута

  • Описание: нам часто нужно сопоставить все маршруты, соответствующие определенному шаблону, с одним и тем же компонентом, в это время мы можем обрабатывать их через параметры маршрутизации.
  • Синтаксис: /пользователь/:идентификатор
  • Использование: при совпадении маршрута значение параметра будет установлено в this.$route.params
  • Другие: вы можете получить параметры запроса в URL-адресе через $route.query и т. д.
    // 方式一
    <router-link to="/user/1001">如果你需要在模版中使用路由参数 可以这样 {{$router.params.id}}</router-link>
    // 方式二
    <router-link :to="{path:'/user',query:{name:'jack',age:18}}">用户 Rose</router-link>


    <script>
    // 路由
    var router = new Router({
      routers : [
        // 方式一 注意 只有/user/1001这种形式能被匹配 /user | /user/ | /user/1001/ 都不能被匹配
        // 将来通过$router.params获取参数返回 {id:1001}
        { path: '/user/:id', component: User }, 
        // 方式二
        { path: "user" , component: User}
      ]
    })
    
    // User组件：
    const User = {
      template: `<div>User {{ $route.params.id }}</div>`
    }
    </script>  
    <!-- 如果要子啊vue实例中获取路由参数 则使用this.$router.params 获取路由参数对象 -->
    <!--  {{$router.query}} 获取路由中的查询字符串 返回对象 -->

Вложенные маршруты — дочерние маршруты

  • Маршруты могут быть вложенными, то есть: маршруты содержат подмаршруты
  • Правила: родительский компонент содержит router-view, а дочерняя конфигурация используется в правилах маршрутизации.
    // 父组件：
    const User = Vue.component('user', {
      template: `
        <div class="user">
          <h2>User Center</h2>
          <router-link to="/user/profile">个人资料</router-link>
          <router-link to="/user/posts">岗位</router-link>
          <!-- 子路由展示在此处 -->
          <router-view></router-view>
        </div>
        `
    })
    
    // 子组件[简写]
    const UserProfile = {
      template: '<h3>个人资料：张三</h3>'
    }
    const UserPosts = {
      template: '<h3>岗位：FE</h3>'
    }
    
    // 路由
    var router =new Router({
      routers : [

        { path: '/user', component: User,
          // 子路由配置：
          children: [
            {
              // 当 /user/profile 匹配成功，
              // UserProfile 会被渲染在 User 的 <router-view> 中
              path: 'profile',
              component: UserProfile
            },
            {
              // 当 /user/posts 匹配成功
              // UserPosts 会被渲染在 User 的 <router-view> 中
              path: 'posts',
              component: UserPosts
            }
          ]
        }
      ]
    })

Передняя часть модульная

Зачем нужна модульность
  • 1 Первый js предназначен для проверки на стороне клиента и некоторых простых эффектов.
  • 2 Позже js привлек внимание, его применение становилось все шире, а сложность front-end разработки становилась все выше и выше.
  • 3 Контент, относящийся к модулю (модулю), не предоставляется в старой версии js

концепция модуля

  • В js модуль — это файл (js-файл), который реализует определенную функцию
  • Следуйте механизму модулей, загружайте любые модули, какие хотите
  • Модульная разработка должна соответствовать спецификациям

Проблемы, решаемые модульностью

  • 1 конфликт имен
  • 2 файловые зависимости (загрузить файлы)
  • 3 Повторное использование модулей
  • 4 Единые спецификации и методы разработки

JS реализует спецификацию модульности

  • Сторона браузера AMD

    • requirejs

  • CommonJS nodejs

    • Загрузка модулей: require()
    • Экспорт модулей: module.exports={}/exports={}
  • импорт/экспорт в ES6

  • Сторона браузера CMD

    • Юбо (бог интерфейса Али) -> сейс
  • Универсальная модульная спецификация UMD, совместимая с AMD, CommonJS, отсутствие модульной спецификации в браузерах и т. д.

Использование AMD

Определение асинхронного модуля: определение асинхронного модуля, спецификация для разработки модуля на стороне браузера Представитель: require.js Особенности: Модули загружаются асинхронно, и загрузка модуля не влияет на работу последующих операторов.

1. Определите модуль

    // 语法:define(name, dependencies?, factory);
    // name表示：当前模块的名称，是一个字符串 可有可无
    // dependencies表示：当前模块的依赖项，是一个数组无论依赖一项还是多项 无则不写
    // factory表示：当前模块要完成的一些功能，是一个函数
    
    // 定义对象模块
    define({})
    // 定义方法模块
    define(function() {
      return {}
    })
    // 定义带有依赖项的模块
    define(['js/a'], function() {})

2. Загрузите модуль

// - 注意：require的第一个参数必须是数组

    // 参数必须是数组 表示模块路径 以当前文件为基准,通过回调函数中的参数获取加载模块中的变量 参数与模块按照顺序一一对应
    require(['a', 'js/b'], function(a, b) {
      // 使用模块a 和 模块b 中的代码
    })

3. Конфигурация поиска пути

  • requirejs по умолчанию использует метод разрешения пути baseUrl+paths

  • Эту настройку можно обойти, используя:

    • 1 заканчивается на .js
    • 2 начинается с /
    • 3 Содержит протокол:https://илиhttp:// 
// 配置示例
    // 注意配置应当在使用之前
    require.config({
      baseUrl: './js' // 配置基础路径为：当前目录下的js目录
    })
    require(['a'])    // 查找 基础路径下的 ./js/a.js

// 简化加载模块路径
    require.config({
      baseUrl: './js',
      // 配置一次即可，直接通过路径名称（template || jquery）加载模块
      paths: {
        template: 'assets/artTemplate/template-native',
        jquery: 'assets/jquery/jquery.min'
      }
    })
    // 加载jquery template模块
    require(['jquery', 'template'])

4. Немодульность и поддержка зависимостей

  • 1 Добавьте зависимые модули модуля, чтобы обеспечить порядок загрузки (deps)
  • 2 Преобразование немодульных модулей в модульные (экспорт)
// 示例
    require.config({
      baseUrl: './js',
      paths: {
        // 配置路径
        noModule: 'assets/demo/noModule'
      },
      // 配置不符合规范的模块项
      shim: {
        // 模块名称
        noModule: {
          deps: [],         // 依赖项
          exports: 'sayHi'  // 导出模块中存在的函数或变量
        }
      }
    });

// 注意点  如果定义模块的时候，指定了模块名称，需要使用该名称来引用模块
    // 定义 这个模块名称与paths中的名称相同
    define('moduleA', function() {})
    // 导入
    require.config({
      paths: {
        // 此处的模块名：moduleA
        moduleA: 'assets/demo/moduleA'
      }
    })

5. Правила загрузки пути

  • Приоритет конфигурации пути:

    • 1 Найти через правила конфигурации конфигурации
    • 2 Найдите путь, указанный в data-main
    • 3 Поиск на основе пути к странице, где вводится requirejs
    <!-- 
      设置data-main属性
      1 data-main属性指定的文件也会同时被加载
      2 用于指定查找其他模块的基础路径
    -->
    <script src="js/require.js" data-main="js/main"></script>

Webpack

1 webpack 将带有依赖项的各个模块打包处理后，变成了独立的浏览器能够识别的文件
2 webpack 合并以及解析带有依赖项的模块

Обзор

webpack — сборщик модулей для современных приложений JavaScript (функциональный модуль, сборщик)
вебпак этоМодульное решение (предварительно скомпилированное)
webpack берет модули с зависимостями и генерирует статические ресурсы, представляющие эти модули
  • Четыре основных понятия:Вход,выход,погрузчик погрузчик,Плагины 
对比
模块化方案: webpack 和 requirejs（通过编写代码的方式将前端的功能，划分成独立的模块）

browserify 是与 webpack 相似的模块化打包工具

webpack 预编译 (在开发阶段通过webpack进行模块化处理, 最终项目上线, 就不在依赖于 webpack)
requirejs 线上的编译( 代码运行是需要依赖与 requirejs 的 )

происхождение веб-пакета

  • Webpack решает две болевые точки существующих сборщиков модулей:

    • 1 Code Spliting- Разделение кода и загрузка по запросу
    • 2 Модульное решение для статических ресурсов

веб-пакет и модули

  • Эволюция интерфейсных модульных систем
  • В представлении веб-пакета: всеСтатические ресурсы — это модули
  • Модули webpack способны распознавать зависимости между модулями в виде:

  • Модульная спецификация JS:

    • ES2015 import export
    • CommonJS require() module.exports
    • AMD defineа такжеrequire

  • Статические ресурсы, такие как не-JS:

    • в файлах css/sass/less@import
    • Связь с изображением, например: стильurl(...)или HTML<img src=...>
    • шрифт и т. д.

документация и ресурсы веб-пакета

Установить веб-пакет

  • Установить глобально:npm i -g webpack

    • Назначение: Использование через CLI в любом каталогеwebpackэта команда

  • Установка проекта:npm i -D webpack

    • Цель: выполнить сборку текущего проекта

Основное использование веб-пакета

  • Установить:npm i -D webpack
  • Два способа использования webpack: 1 командная строка 2 файл конфигурации (webpack.config.js)

Демонстрация командной строки — случай: цвет чересстрочный

  • 1 Использованиеnpm init -yИсходный package.json, используйте npm для управления пакетами в проекте.
  • 2 новыхindex.htmlа такжеindex.js, для достижения чересстрочной функции изменения цвета
  • 3 пробегаwebpack src/js/index.js dist/bundle.jsДля сборки пакета используется следующий синтаксис:webpack 入口文件 输出文件 
/*
  src/js/index.js
*/

// 1 导入 jQuery
import $ from 'jquery'
// 2 获取页面中的li元素
const $lis = $('#ulList').find('li')
// 3 隔行变色
// jQuery中的 filter() 方法用来过滤jquery对象
$lis.filter(':odd').css('background-color', '#def')
$lis.filter(':even').css('background-color', 'skyblue')

//命令行运行 `webpack src/js/index.js   dist/bundle.js   目录生成在命令行运行目录
/*
  运行流程：
  1、webpack 根据入口找到入口文件
  2、分析js中的模块化语法 
  3、将所有关联文件 打包合并输出到出口
*/

  • npm i -D webpack-dev-server
  • webpack-dev-serverpackage.jsonscripts
  • npm run dev 
// 参数解释  注意参数是无序的 有值的参数空格隔开
// --open 自动打开浏览器
// --contentBase ./  指定浏览器 默认打开的页面路径中的 index.html 文件
// --open 自动打开浏览器
// --port 8080 端口号
// --hot 热更新，只加载修改的文件(按需加载修改的内容)，而非全部加载
"scripts": {
  "dev": "webpack-dev-server --open --contentBase ./ --port 8080 --hot"
}


var path = require('path')
module.exports = {
  // 入口文件
  entry: path.join(__dirname, 'src/js/index.js'),

  // 输出文件
  output: {
    path: path.join(__dirname, 'dist'),   // 输出文件的路径
    filename: 'bundle.js'                 // 输出文件的名称
  }
}

const webpack = require('webpack')

devServer: {
  // 服务器的根目录 Tell the server where to serve content from
  // https://webpack.js.org/configuration/dev-server/#devserver-contentbase
  contentBase: path.join(__dirname, './'),
  // 自动打开浏览器
  open: true,
  // 端口号
  port: 8888,

  // --------------- 1 热更新 -----------------
  hot: true
},

plugins: [
  // ---------------- 2 启用热更新插件 ----------------
  new webpack.HotModuleReplacementPlugin()
]

    • npm i -D html-webpack-plugin
    • bundle.jscss 
/* webpack.config.js */
const htmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
  new htmlWebpackPlugin({
    // 模板页面路径
    template: path.join(__dirname, './index.html'),
    // 在内存中生成页面路径，默认值为：index.html
    filename: 'index.html'
  })
]

webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript.

  • npm i -D style-loader css-loader 
/* 在index.js  导入 css 文件*/
import './css/app.css'

/* webpack.config.js 配置各种资源文件的loader加载器*/
module: {
  // 配置匹配规则
  rules: [
    // test 用来配置匹配文件规则（正则）
    // use  是一个数组，按照从后往前的顺序执行加载
    {test: /\.css$/, use: ['style-loader', 'css-loader']},
  ]
}

  • npm i -D sass-loader node-sass
  • sass-loadernode-sass 
/* webpack.config.js */
// 参考：https://webpack.js.org/loaders/sass-loader/#examples
// "style-loader"  ：creates style nodes from JS strings 创建style标签
// "css-loader"    ：translates CSS into CommonJS 将css转化为CommonJS代码
// "sass-loader"   ：compiles Sass to CSS 将Sass编译为css
module:{
  rules:[
    {test: /\.(scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader']},
  ]
}

  • npm i -D url-loader file-loader
  • file-loader
  • url-loader 
/* webpack.config.js */
module: {
  rules:[
    // 打包 图片文件
    { test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader' },

    // 打包 字体文件
    { test: /\.(woff|woff2|eot|ttf|otf)$/, use: 'file-loader' }
  ]
}

  • limit

    • 小于
    • 大于等于file-loader 
/* webpack.config.js */

module: {
  rules: [
    // {test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=100'},
    {
      test: /\.(jpg|png|gif|jpeg)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192
          }
        }
      ]
    }
  ]
}

  • file-loaderurl-loader

babel

/* webpack.config.js */

module: {
  rules: [
    // exclude 排除，不需要编译的目录，提高编译速度
    {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
  ]
}
  • .babelrc
/* 创建 .babelrc 文件*/
// 将来babel-loader运行的时候，会检查这个配置文件，并读取相关的语法和插件配置
{
  "presets": ["env"]
}

  • Роль Бабеля:

    • 1 грамматика преобразования: преобразовать новую грамматику ES в грамматику, которую может распознать браузер (Babel-Preset- *)
    • 2. Совместимость с браузером Polyfill: сделайте браузеры более ранних версий совместимыми с последней версией ES API.

babel-preset-*


babel-preset-* используется, чтобы указать, какую версию кода JS мы пишем
  • Роль: преобразовать новый синтаксис ES в код ES5, который может распознать браузер.

  • Процесс утверждения предложений по грамматике ES6

    • ES2015 — это тоже ES6, следующая версия — ES7, и она прошла 5 этапов от ES6 до ES7.
    • Babel-preset-es2015 преобразовать синтаксис es6
    • Babel-Preset-Stage-0 преобразует синтаксис новее, чем ES6
Stage 0 - Strawman（展示阶段）
Stage 1 - Proposal（征求意见阶段）
Stage 2 - Draft（草案阶段）
Stage 3 - Candidate（候选人阶段）
Stage 4 - Finished（定案阶段）

Stage 0 is "i've got a crazy idea",
stage 1 is "this idea might not be stupid",
stage 2 is "let's use polyfills and transpilers to play with it",
stage 3 is "let's let browsers implement it and see how it goes",
stage 4 is "now it's javascript".

babel-polyfill и transform-runtime

  • Роль: добиться совместимости браузера с неподдерживаемыми API (совместимость со старыми средами, заливка)

    • Используйте расширенные методы или функции ES6 или ES7 в старых браузерах, например:'abc'.padStart(10)
  • Метод 1 полифилл
  • Метод 2 Transform-Runtime
  • метод первый:npm i -S babel-polyfill

  • Способ второй:npm i -D babel-plugin-transform-runtimeа такжеnpm i -S babel-runtime

    • Примечание: код из пакета babel-runtime будет упакован в ваш код (-S).
区别：
polyfill 所有兼容性问题，都可以通过polyfill解决（包括：实例方法）、污染全局环境
runtime  除了实例方法以外，其他兼容新问题都能解决、不污染全局环境

polyfill：如果想要支持全局对象（比如：`Promise`）、静态方法（比如：`Object.assign`）或者**实例方法**（比如：`String.prototype.padStart`）等，那么就需要使用`babel-polyfill`

babel-runtime ：提供了兼容旧环境的函数，使用的时候，需要我们自己手动引入
  比如： const Promise = require('babel-runtime/core-js/promise')
  存在的问题：
    1 手动引入太繁琐
    2 多个文件引入同一个helper（定义），造成代码重复，增加代码体积
babel-plugin-transform-runtime：
    1 自动引入helper（比如，上面引入的 Promise）
    2 babel-runtime提供helper定义，引入这个helper即可使用，避免重复
    3 依赖于 babel-runtime 插件

transform-runtime插件的使用：
  直接在 .bablerc 文件中，添加一个 plugins 的配置项即可！！！
  "plugins": [
    "transform-runtime"
  ]
/*
  babel-polyfill 的使用步骤：
  1 main.js
*/
// 第一行引入
require("babel-polyfill")

var s = 'abc'.padStart(4)
console.log(s)


// 2 webpack.config.js 配置
module.exports = {
  entry: ['babel-polyfill', './js/main.js']
}

Суммировать

babel-core babel核心包

babel-loader 用来解析js文件

babel-preset-* 新ES语法的解析和转换

transform-runtime / babel-polyfill 兼容旧浏览器，到达支持新API目的

// 判断浏览器是否兼容 padStart 这个 API
if (!String.prototype.padStart) {
  // 如果不兼容, 就自己模拟 padStart的功能实现一份
  String.prototype.padStart = function padStart(targetLength,padString) {
  }
}

компонент vue с одним файлом

  • vue-loader
  • однофайловые компоненты
  • Суффикс имени:.vueЭтот файл должен быть в браузере, чтобы использовать предварительно скомпилированный
  • Примечание. Однофайловые компоненты зависят от двух пакетов.vue-loader / vue-template-compiler
  • Установить:npm i -D vue-loader vue-template-compiler 
<!-- App.vue 示例代码： -->
<template>
  <div>
    <h1>VUE 单文件组件示例 -- App.vue</h1>
    <p>这是 模板内容</p>
  </div>
</template>

<script>
  // 组件中的逻辑代码
  export default {}
</script>

<style>
/* 组件样式 */
h1 {
  color: red;
}
</style>
// webpack.config.js 配置：
module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    }
  ]
}

Используйте однофайловые компоненты

/* main.js */

import Vue from 'vue'
// 导入 App 组件
import App from './App.vue'

const vm = new Vue({
  el: '#app',
  // 通过 render 方法，渲染App组件
  render: c => c(App)
})

Шаги для использования однофайлового компонента

  • 1 Установите:npm i -D vue-loader vue-template-compiler

  • 2 дюймаwebpack.config.jsСредняя конфигурация.vueзагрузчик файлов

    • { test: /\.vue$/, use: 'vue-loader' }
  • 3 СоздатьApp.vueКомпонент с одним файлом, примечание: имя приложения может быть любым.
  • 4 дюймаmain.jsВ файле ввода импортируйтеvueа такжеApp.vueКомпонент, который подключает компонент к экземпляру через рендеринг

Компонент одного файла + маршрутизация

import Vue from 'vue'
import App from './App.vue'

// ------------- vue路由配置 开始 --------------
import Home from './components/home/Home.vue'
import Login from './components/login/Login.vue'

// 1 导入 路由模块
import VueRouter from 'vue-router'
// 2 ** 调用use方法使用插件 **
Vue.use(VueRouter)
// 3 创建路由对象
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/login', component: Login }
  ]
})

// ------------- vue路由配置 结束 --------------

const vm = new Vue({
  el: '#app',
  render: c => c(App),
  // 4 挂载到 vue 实例中
  router
})

Mint-UI

  • Библиотека мобильных компонентов на основе Vue.js
  • Mint-UI

быстрый старт

  • Установить:npm i -S mint-ui 
// 1 导入 mint-ui模块
import MintUI from 'mint-ui'
// 2 导入 样式
import 'mint-ui/lib/style.css'
// 3 注册插件
Vue.use(MintUI)

MUI

  • MUI
  • MUI также является библиотекой пользовательского интерфейса для мобильных устройств.
  • Использование: скачайте пакет с github, найдите папку dist, просто импортируйте стиль
// 只需要导入 MUI的样式 即可，根据MUI的例子，直接使用HTML结果即可
// 导入样式
import './lib/mui/css/mui.min.css'

ElementUI

  • Это библиотека компонентов пользовательского интерфейса на стороне ПК.
  • Установить:npm i -S element-ui
  • Вы голодны - ElementUI
{
  "presets": [
    ["es2015", { "modules": false }], "stage-0"
  ],

  "plugins": [
    ["component", [
      {
        "libraryName": "mint-ui",
        "style": true
      },
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-default"
      }
    ]]
  ]
}

Публикация проекта Webpack

  • Различные питы, упакованные webpack
  • webpackКоманда может сгенерировать каталог dist на диск и, наконец, развернуть упакованный код на сервере развертывания.
  • webpack-dev-serverЭто всего лишь файл, созданный в памяти и не записываемый на диск, поэтому его можно использовать только во время разработки.

Создайте профиль публикации проекта

  • Конфигурационный файл во время разработки:webpack.config.js
  • Профиль публикации проекта:webpack.prod.js(имя файла не является фиксированной производственной средой)
  • Заказ:webpack --config webpack.prod.jsЗапустите webpack с указанным именем файла конфигурации
  • параметр:--display-error-detailsСообщение об ошибке, используемое для отображения упаковки веб-пакета
/* package.json */

"scripts": {
  "build": "webpack --config webpack.prod.js"
}
1 在项目根目录中创建 webpack.prod.js 文件
2 在 package.json 中, 配置一个 scripts
3 在 终端中 通过 npm run build 对项目进行打包

процесс упаковки

1 删除掉 devServer 相关的配置项
2 将图片和字体文件输出到指定的文件夹中
3 自动删除dist目录
4 分离第三方包（将使用的vue等第三方包抽离到 vender.js 中）
5 压缩混淆JS 以及 指定生成环境
6 抽取和压缩CSS文件
7 压缩HTML页面
8 配合vue的异步组件，实现按需加载功能

Пути образа процесса

/* webpack.prod.js */
// 处理URL路径的loader

{
  test: /\.(jpg|png|gif|bmp|jpeg)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 8192,
      name: 'images/[hash:7].[ext]' // 作用：将图片输出到images文件夹中，文件名采用7位的哈希值（MD5），并且保持原来的图片文件扩展名

      // name：指定文件输出路径和输出文件命令规则
      // [hash:7]：表示使用7位哈希值代表文件名称
      // [ext]：表示保持文件原有后缀名
      // name: 'imgs/img-[hash:7].[ext]'
    }
  }
},

Автоматически удалить каталог dist

  • Установить:npm i -D clean-webpack-plugin
  • Функция: Перед каждым пакетом удалить последний упакованный дистрибутив.
/* webpack.prod.js */
const cleanWebpackPlugin = require('clean-webpack-plugin')

plugins: [
  // 创建一个删除文件夹的插件，删除dist目录
  new cleanWebpackPlugin(['./dist'])
]

Отдельные сторонние пакеты

  • Цель: Выделить общедоступный сторонний пакет в отдельный файл пакета, чтобы предотвратить повторную упаковку!

    • Например: vue присутствует в main.js, router и vuex, если не разделить, то vue будет упаковано 3 раза
    • После извлечения файл vue будет упакован только один раз, а место используется только для справки.
/* webpack.prod.js */

// 1 入口 -- 打包文件的入口
entry: {
  // 项目代码入口
  app: path.join(__dirname, './src/js/main.js'),
  // 第三方包入口
  vendor: ['vue', 'vue-router', 'axios']
},

output: {
  // 2 修改输出文件路径和命名规则
  filename: 'js/[name].[chunkhash].js',
},

plugins: [
  // 3 抽离第三方包
  new webpack.optimize.CommonsChunkPlugin({
    // 将 entry 中指定的 ['vue', 'vue-router', 'axios'] 打包到名为 vendor 的js文件中
    // 第三方包入口名称，对应 entry 中的 vendor 属性
    name: 'vendor',
  }),
]

Сжатие и обфускация JS

  • Уведомление:uglifyjs не может сжимать код ES6 
plugins: [
  // 优化代码
  // https://github.com/webpack-contrib/uglifyjs-webpack-plugin/tree/v0.4.6
  new webpack.optimize.UglifyJsPlugin({
    // 压缩
    compress: {
      // 移除警告
      warnings: false
    }
  }),

  // 指定环境为生产环境：vue会根据这一项启用压缩后的vue文件
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('production')
    }
  })
]

Извлечение и сжатие файлов CSS

压缩和抽离CSS报错的说明：
Error processing file: css/style.css
postcss-svgo: Error in parsing SVG: Unquoted attribute value

原因：压缩和抽离CSS的插件中只允许 SVG 使用双引号
/* webpack.prod.js */

// 分离 css 到独立的文件中
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// 压缩 css 资源文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

// bug描述: 生成后面的css文件中图片路径错误，打开页面找不到图片
// 解决：google搜索 webpack css loader 样式图片路径
output: {
  // ...

  // https://doc.webpack-china.org/configuration/output/#output-publicpath
  // 设置公共路径
  publicPath: '/',
},

module: {
  rules: [
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader"
      })
    },
    {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: ['css-loader', 'sass-loader']
      })
    },
  ]
},
plugins: [
  // 通过插件抽离 css (参数)
  new ExtractTextPlugin("css/style.css"),
  // 抽离css 的辅助压缩插件
  new OptimizeCssAssetsPlugin()
]

Сжимайте HTML-страницы

  • Подробная конфигурация может относиться кhtml-minifier 
new htmlWebpackPlugin({
  // 模板页面
  template: path.join(__dirname, './index.html'),

  // 压缩HTML
  minify: {
    // 移除空白
    collapseWhitespace: true,
    // 移除注释
    removeComments: true,
    // 移除属性中的双引号
    removeAttributeQuotes: true
  }
}),

Vue сотрудничает с webpack для обеспечения маршрутизации загрузки по запросу.

шаг

  • 1 Изменить эталонный метод компонентов
// 方式一: require.ensure()
const NewsList = r => require.ensure([], () => r(require('../components/news/newslist.vue')), 'news')

// 方式二: import() -- 推荐
// 注意：/* webpackChunkName: "newsinfo" */ 是一个特殊的语法，表示生成js文件的名称
const NewsInfo = () => import(/* webpackChunkName: "newsinfo" */ '../components/news/newsinfo.vue')
  • 2 Измените вывод файла конфигурации веб-пакета
output: {
  // ------添加 chunkFilename, 指定输出js文件的名称------
  chunkFilename: 'js/[name].[chunkhash].js',
},
Категории