Vue.js

# Установка

Vue.js изначально разрабатывался быть инкрементально адаптируемым. Это значит, что он может быть интегрирован в проект несколькими способами, в зависимости от требований.

Есть четыре основных способа добавления Vue.js в проект:

  1. Импорт CDN пакета на странице
  2. Скачивание файлов JavaScript и их самостоятельный хостинг
  3. Установка с использованием npm
  4. Использование официального CLI для развёртывания проекта, предоставляющего продвинутые инструменты для создания современного рабочего процесса разработки фронтенда (например, горячая перезагрузка, линтинг при сохранении и многое другое).

# История изменений

Последняя версия: npm

Подробная история изменений для каждой версии доступна на GitHub (opens new window).

# Инструменты разработчика

На данный момент в бета-тестировании — интеграция с Vuex и Router в разработке

Узнайте как устанавливать и использовать Vue Devtools в бесплатном уроке Vue School

При использовании Vue рекомендуем установить расширение Vue Devtools (opens new window) для браузера, которое позволит легче проверять и отлаживать приложения на Vue в удобном интерфейсе.

Расширение для Chrome (opens new window)

Расширение для Firefox (opens new window)

Автономное Electron-приложение (opens new window)

# CDN

Для прототипов и в обучающих целях можно использовать последнюю версию с CDN:

<script src="https://unpkg.com/vue@next"></script>
1

Для production рекомендуется указывать конкретную версию и сборку, чтобы избежать неожиданных поломок при выходе новых версий.

# Скачивание и самостоятельный хостинг

Если нужно избежать использования систем сборки, но нет возможности использовать CDN в production — в таком случае можно скачать соответствующий .js файл и разместить его на собственном веб-сервере. После чего подключать его, с помощью тега <script>, точно также, как и при подключении с CDN.

Можно просматривать и скачивать файлы с CDN, например unpkg (opens new window) или jsDelivr (opens new window). Различия файлов сборок подробнее объясняются ниже, но обычно потребуется загрузить обе сборки: для разработки и для production.

# npm

npm — рекомендованный способ установки при создании больших приложений на Vue. Он прекрасно сочетается с системами сборки, такими как webpack (opens new window) или Rollup (opens new window).

# установка последней стабильной версии
$ npm install vue@next
1
2

Также Vue предоставляет инструменты для создания однофайловых компонентов (также именуемых как SFC). Если хотите их использовать, то также потребуется установить @vue/compiler-sfc:

$ npm install -D @vue/compiler-sfc
1

Обратите внимание, если выполняете миграцию с Vue 2, то @vue/compiler-sfc заменяет используемый ранее vue-template-compiler.

Кроме @vue/compiler-sfc также понадобится подходящий загрузчик SFC или плагин для системы сборки. Более подробную информацию можно найти в разделе про однофайловые компоненты.

В большинстве случаев предпочтительным способом создания сборки с webpack и минимальной конфигурацией будет использование Vue CLI.

# CLI

Vue предоставляет официальный CLI (opens new window) для быстрого создания каркаса одностраничных приложений (SPA). Предлагаемые шаблоны содержат всё необходимое для организации современной фронтенд-разработки. За несколько минут можно получить работающую конфигурацию с горячей перезагрузкой модулей, линтингом кода при сохранении и настроенной конфигурацией production-сборки.

Совет

Использование CLI предполагает наличие знаний о Node.js и связанных с ней инструментов сборки. Новичкам во Vue или в инструментах сборки фронтенда настоятельно рекомендуем сначала прочитать руководство без применения каких-либо систем сборки прежде чем начинать использовать CLI.

Для Vue 3 требуется использовать Vue CLI v4.5, доступная в npm по имени @vue/cli. Для обновления необходимо переустановить последнюю версию @vue/cli глобально:

yarn global add @vue/cli
# ИЛИ
npm install -g @vue/cli
1
2
3

После установки в проекте Vue необходимо выполнить:

vue upgrade --next
1

# Vite

Vite (opens new window) — инструмент для сборки веб-приложений, предлагающий исключительно быструю обработку кода, благодаря применяемому подходу по использованию нативных импортов ES-модулей.

Быстро развернуть проект на Vue используя Vite можно с помощью следующих команд.

Используя npm:

# npm 6.x
$ npm init vite@latest <project-name> --template vue

# npm 7+, НУЖНО дополнительное двойное тире:
$ npm init vite@latest <project-name> -- --template vue

$ cd <project-name>
$ npm install
$ npm run dev
1
2
3
4
5
6
7
8
9

или используя Yarn:

$ yarn create vite <project-name> --template vue
$ cd <project-name>
$ yarn
$ yarn dev
1
2
3
4

или с помощью pnpm:

$ pnpm create vite <project-name> -- --template vue
$ cd <project-name>
$ pnpm install
$ pnpm dev
1
2
3
4

# Объяснение различий сборок

В папке dist/ npm-пакета (opens new window) можно обнаружить несколько различных сборок Vue.js. Рассмотрим подробнее какой файл из dist для каких случаев должен использоваться.

# Из CDN или без системы сборки

# vue(.runtime).global(.prod).js:

  • Для использования напрямую, через <script src="..."> в браузере, предоставляет глобальный доступ к Vue.
  • Компиляция шаблонов в браузере:
    • vue.global.js — «полная» сборка, которая включает в себя и компилятор шаблонов и runtime, поэтому поддерживает компиляцию шаблонов «на лету».
    • vue.runtime.global.js — содержит только runtime и требует чтобы шаблоны были предварительно скомпилированы на этапе сборки.
  • Содержит в себе все внутренние зависимости Vue — т.е. это один файл без зависимостей от других файлов. Это означает, что необходимо импортировать всё из этого файла и этот файл только для того, чтобы убедиться в получении того же самого экземпляра кода.
  • Содержит подготовленные варианты для production/разработки, кроме того сборка для production предварительно минифицирована. Используйте в production файлы *.prod.js.

Примечание

Глобальные сборки не являются UMD (opens new window) сборками. Они собраны как IIFE (opens new window) и предназначаются только для использования напрямую через <script src="...">.

# vue(.runtime).esm-browser(.prod).js:

  • Для использования в нативных импортах ES-модулей (в браузере через <script type="module">).
  • Предоставляет ту же компиляцию в runtime, содержит все внутренние зависимости и жёстко заданное поведение для production/разработки глобальной сборки.

# С использованием системы сборки

# vue(.runtime).esm-bundler.js:

  • Для использования с системами сборки, такими как webpack, rollup и parcel.
  • Определение поведения для production/разработки условиями с process.env.NODE_ENV (значение будет подменяться системой сборки)
  • Нет готовых минифицированных сборок (минификация должна выполняться системой сборки, как и для всего остального кода)
  • Импорт зависимостей (например, @vue/runtime-core, @vue/runtime-compiler)
    • Импортируемые зависимости также являются esm-сборками и, в свою очередь, будут импортировать свои зависимости (например, @vue/runtime-core импортирует @vue/reactivity)
    • Это означает, что можно устанавливать/импортировать зависимости по-отдельности и не оказаться в ситуации с разными экземплярами этих зависимостей, но всё равно следует убедиться, что все они разрешаются одной и той же версией.
  • Компиляция шаблонов в браузере:
    • vue.runtime.esm-bundler.js (по умолчанию) — содержит только runtime и требует чтобы все шаблоны были предварительно скомпилированы. По умолчанию это точка входа для систем сборки (через поле module в package.json), потому что обычно при их применении шаблоны компилируются на этапе сборки (например, в файлах *.vue).
    • vue.esm-bundler.js — содержит компилятор шаблонов. Следует использовать когда есть система сборки, но всё равно нужна компиляция шаблонов «на лету» (например, шаблоны в DOM или в виде инлайн-строк JavaScript). Потребуется настроить систему сборки, чтобы псевдоним vue вёл к этому файлу.

# Для отрисовки на стороне сервера (SSR)

# vue.cjs(.prod).js:

  • Для использования отрисовки на стороне сервера в Node.js через require().
  • При сборке приложения с помощью webpack с опцией target: 'node' и корректной экстернализацией vue — это та сборка, которая будет загружена.
  • Есть предварительно собранные файлы для разработки/production, но соответствующий файл будет автоматически выбираться на основе значения process.env.NODE_ENV.

# Runtime + Компилятор vs. Runtime-only

При необходимости компилировать шаблоны на клиенте (например, если передаёте строку в опцию template или монтируетесь к элементу DOM, используя его HTML в качестве шаблона) потребуется компилятор шаблонов, а с ним и подключение полной сборки:

// нужен компилятор шаблонов
Vue.createApp({
  template: '<div>{{ hi }}</div>'
})

// можно обойтись без него
Vue.createApp({
  render() {
    return Vue.h('div', {}, this.hi)
  }
})
1
2
3
4
5
6
7
8
9
10
11

При использовании vue-loader шаблоны внутри файлов *.vue будут предварительно компилироваться в JavaScript на этапе сборки. Поэтому в итоговой сборке компилятор шаблонов уже не будет нужен и можно использовать более лёгкую runtime-only сборку.

Введение →