Руководство

Установка

Предупреждение о совместимости

Vue не поддерживает IE8 и ниже, так как использует возможности ECMAScript 5, которые невозможно эмулировать в IE8. В остальном, поддерживаются все браузеры, совместимые с ECMAScript 5.

Информация о релизах

Версия последнего релиза: 2.6.6

Подробная информация об изменениях в каждой версии доступна на GitHub.

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

При использовании Vue мы рекомендуем установить Vue Devtools в браузере, для большего удобства выполнения проверок и отладки ваших приложений Vue.

Подключение через <script>

Просто скачайте JS-файл и подключите его тегом <script> на странице. Будет зарегистрирована глобальная переменная Vue.

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


Версия для разработкиС предупреждениями для удобства разработки и отладки

Версия для productionБез предупреждений, 33.06КБ min+gzip

CDN

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

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>

Если используете нативные ES-модули, также существует и совместимая с ES-модулями сборка:

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.esm.browser.js'
</script>

Исходный код самого NPM-пакета также доступен по ссылке cdn.jsdelivr.net/npm/vue.

Vue также доступен на unpkg и cdnjs (cdnjs синхронизируется с NPM с некоторой задержкой, из-за чего последняя версия может быть не всегда доступна сразу).

Обязательно прочитайте про отличия в сборках Vue и используйте версию для production на своём опубликованном сайте, заменив vue.js на vue.min.js. Это сборка оптимизирована для скорости, а не для удобства разработки.

NPM

Рекомендуем использовать NPM при создании крупных приложений на Vue. Этот вариант прекрасно работает в паре с инструментами сборки, такими как Webpack и Browserify. Во Vue также есть совместимые с ними инструменты для использования однофайловых компонентов.

# последняя стабильная версия
$ npm install vue

Инструменты командной строки (CLI)

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

CLI — это инструмент для тех, кто знаком с Node.js и соответствующими инструментами сборки. Если вы новичок во Vue или инструментах сборки фронтенда, рекомендуем сначала прочитать руководство, не требующее использования инструментов сборки, а уже потом разбираться с CLI.

Посмотрите объясняющее видео на Vue Mastery

Объяснение различных сборок

В папке dist/ NPM-пакета можно найти много разных сборок Vue.js. Вот краткий обзор отличий между ними:

UMD CommonJS ES Module (для сборщиков) ES Module (для браузеров)
Полная vue.js vue.common.js vue.esm.js vue.esm.browser.js
Runtime-only vue.runtime.js vue.runtime.common.js vue.runtime.esm.js -
Полная (production) vue.min.js - - vue.esm.browser.min.js
Runtime-only (production) vue.runtime.min.js - - -

Термины

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

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

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

// это нет
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

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

Так как сборки runtime-only примерно на 30% легче, в сравнении с полными, вы должны использовать их всякий раз, когда это возможно. Если вы всё равно хотите использовать полную сборку, вам потребуется настроить псевдоним в сборщике:

Webpack

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' для webpack 1
    }
  }
}

Rollup

const alias = require('rollup-plugin-alias')

rollup({
  // ...
  plugins: [
    alias({
      'vue': require.resolve('vue/dist/vue.esm.js')
    })
  ]
})

Browserify

Добавьте в package.json вашего проекта:

{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

Parcel

Добавьте в package.json вашего проекта:

{
  // ...
  "alias": {
    "vue" : "./node_modules/vue/dist/vue.common.js"
  }
}

Режим разработки vs. режим production

Режим разработки/production жёстко установлен в UMD-сборках: несжатые файлы для разработки и минифицированные файлы для production.

Сборки CommonJS и ES Module предназначены для инструментов сборки, поэтому мы не предоставляем минифицированных версий для них. Вы ответственны за минификацию итоговой сборки.

Сборки CommonJS и ES Module содержат проверки на process.env.NODE_ENV для определения режима, в котором они должны выполняться. Вы должны использовать соответствующие возможности систем сборки для переопределения этих переменных окружения, чтобы контролировать режим, в котором Vue будет запускаться. Замена process.env.NODE_ENV на строковый литерал позволяет минификаторам, таким как UglifyJS, удалять целые блоки кода, предназначенные только для разработки, уменьшая итоговый размер файла.

Webpack

С версии Webpack 4+ можно использовать опцию mode:

module.exports = {
  mode: 'production'
}

Но в Webpack 3 и более ранних версиях необходимо использовать DefinePlugin:

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ]
}

Rollup

Используйте rollup-plugin-replace:

const replace = require('rollup-plugin-replace')

rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}).then(...)

Browserify

Примените глобальную трансформацию envify для вашей сборки.

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

Подробнее в разделе развёртывания на production.

CSP-окружения

Некоторые окружения, такие как Google Chrome Apps, требуют соблюдения Content Security Policy (CSP), запрещающей использование конструкции new Function() для исполнения выражений. Полная сборка использует подобные конструкции для компиляции шаблонов, и потому непригодна к использованию в таких окружениях.

С другой стороны, runtime-сборки полностью совместимы с CSP. Если использовать их с Webpack и vue-loader или Browserify и vueify, то шаблоны компилируются на этапе сборки в render-функции, которые отлично работают в CSP-окружениях.

Сборка dev-версии

Важное замечание: файлы сборки в /dist на GitHub обновляются только при релизах. Чтобы использовать версию из последних исходников с GitHub, соберите проект самостоятельно:

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

Bower

Только UMD-сборки доступны в Bower.

# последняя стабильная версия
$ bower install vue

Загрузчики модулей AMD

Все UMD-сборки могут быть напрямую использованы как AMD-модули.

Введение →
Обнаружили ошибку или хотите добавить что-то своё в документацию? Отредактируйте эту страницу на GitHub!