Руководство

Установка

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

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

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

Последняя релизная версия: 2.5.16

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

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

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

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

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

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


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

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

CDN

Мы рекомендуем указывать ссылку на конкретную версию, чтобы вы могли производить обновление вручную:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.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) для быстрого создания каркаса амбициозных одностраничных приложений. Предлагаемые шаблоны содержат всё необходимое для организации современной фронтенд-разработки. Всего за несколько минут вы получите работающую конфигурацию с hot-reload, линтингом кода при сохранении и настроенной конфигурацией production-сборки. Подробнее вы можете изучить в документации Vue CLI.

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

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

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

UMD CommonJS ES Module
Полная vue.js vue.common.js vue.esm.js
Runtime-only vue.runtime.js vue.runtime.common.js vue.runtime.esm.js
Полная (production) vue.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': '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!