Vue не поддерживает IE8 и ниже, так как использует возможности ECMAScript 5, которые невозможно эмулировать в IE8. В остальном, поддерживаются все обозреватели, совместимые с ECMAScript 5.
Vue следует семантическому версионированию во всех своих официальных проектах для документирования возможностей и поведения. Для недокументированного поведения или описания внутренней логики, изменения описываются в информации о релизах.
Подробная информация об изменениях в каждой версии доступна на GitHub.
При использовании Vue мы рекомендуем установить Vue Devtools в обозревателе, для большего удобства выполнения проверок и отладки ваших приложений Vue.
<script>Просто скачайте JS-файл и подключите его тегом <script> на странице. Будет зарегистрирована глобальная переменная Vue.
Не используйте сжатую версию во время разработки, иначе вы не будете получать предупреждения о типичных ошибках!
Для создания прототипов или в целях обучения можно использовать последнюю версию:
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
Для продуктива мы рекомендуем указывать конкретную версию и сборку, чтобы избежать неожиданных поломок при выходе новых версий:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
Если используете родные ES-модули, также существует и совместимая с ES-модулями сборка:
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'
</script>
Исходный код самого npm-пакета также доступен по ссылке cdn.jsdelivr.net/npm/vue.
Обязательно прочитайте про отличия в сборках Vue и используйте версию для продуктива на своём опубликованном сайте, заменив vue.js на vue.min.js. Это сборка оптимизирована для скорости, а не для удобства разработки.
Рекомендуем использовать npm при создании крупных приложений на Vue. Этот вариант прекрасно работает в паре с инструментами сборки, такими как Webpack и Browserify. Во Vue также есть совместимые с ними инструменты для использования однофайловых компонентов.
# последняя стабильная версия
$ npm install vue
Vue.js предоставляет официальный инструментарий для командной строки (CLI) для быстрого создания каркаса амбициозных одностраничных приложений. Предлагаемые шаблоны содержат всё необходимое для организации современной фрон-разработки. Всего за несколько минут вы получите работающую конфигурацию с горячей перезагрузкой модулей, проверкой кода при сохранении и настроенной конфигурацией продуктив-сборки. Подробнее вы можете изучить в документации Vue CLI.
CLI — это инструмент для тех, кто знаком с Node.js и соответствующими инструментами сборки. Если вы новичок во Vue или инструментах сборки фронта, рекомендуем сначала прочитать руководство, не требующее использования инструментов сборки, а уже потом разбираться с CLI.
В папке 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 | - |
| Полная (продуктив) | vue.min.js | - | - | vue.esm.browser.min.js |
| Runtime-only (продуктив) | vue.runtime.min.js | - | - | - |
Полная: сборка, которая содержит среду выполнения и компилятор шаблонов.
Компилятор: код, который отвечает за компиляцию строковых шаблонов в функции отрисовки JavaScript.
Среда выполнения: код, который отвечает за создание экземпляров Vue, отрисовку и изменение виртуального DOM и т.д. По сути, это всё, кроме компилятора.
UMD: сборки UMD можно использовать сразу в обозревателе, подключая тегом <script>. По умолчанию в jsDelivr CDN из https://cdn.jsdelivr.net/npm/vue@2 будет UMD-сборка Runtime + Компилятор (vue.js).
CommonJS: сборки CommonJS предназначены для использования вместе со старыми инструментами сборки, такими как Browserify или Webpack 1. По умолчанию для них (pkg.main) будет сборка Runtime-only CommonJS (vue.runtime.common.js).
ES-модули: начиная с версии 2.6, Vue предоставляет две сборки ES-модулей (ESM):
ESM для сборщиков: предназначена для использования с современными системами сборки, такими как webpack 2 или Rollup. Формат ESM разработан для статического анализа, поэтому сборщики могут воспользоваться преимуществами «tree-shaking» и удалить неиспользуемый код из конечной сборки. Файл по умолчанию для этих сборщиков (pkg.module) — это сборка только среды выполнения для ES-модулей (vue.runtime.esm.js).
ESM для обозревателей (только 2.6.0+): предназначена для загрузки в современных обозревателях через <script type="module">.
Если нужно компилировать шаблоны на клиенте (например, передаёте строку в параметр template или монтируете к элементу DOM, используя его HTML в качестве шаблона), вам потребуется компилятор, а значит, полная сборка:
// это требует компилятора шаблонов
new Vue({
template: '<div>{{ hi }}</div>'
})
// это нет
new Vue({
render (h) {
return h('div', this.hi)
}
})
При использовании vue-loader или vueify шаблоны внутри *.vue файлов будут скомпилированы в JavaScript ещё на этапе сборки. Поэтому компилятор в итоговой сборке не потребуется и можно использовать сборки среда исполнения
Так как сборки среда исполнения примерно на 30% легче, в сравнении с полными, вы должны использовать их всякий раз, когда это возможно. Если вы всё равно хотите использовать полную сборку, вам потребуется настроить псевдоним в сборщике:
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' для webpack 1
}
}
}
const alias = require('rollup-plugin-alias')
rollup({
// ...
plugins: [
alias({
'vue': require.resolve('vue/dist/vue.esm.js')
})
]
})
Добавьте в package.json вашего проекта:
{
// ...
"browser": {
"vue": "vue/dist/vue.common.js"
}
}
Добавьте в package.json вашего проекта:
{
// ...
"alias": {
"vue" : "./node_modules/vue/dist/vue.common.js"
}
}
Режим разработки/продуктив жёстко установлен в UMD-сборках: несжатые файлы для разработки и сжатые файлы для продуктива.
Сборки CommonJS и ES Module предназначены для инструментов сборки, поэтому мы не предоставляем сжатые версий для них. Вы ответственны за сжатие итоговой сборки..
Сборки CommonJS и ES Module содержат проверки на process.env.NODE_ENV для определения режима, в котором они должны выполняться. Вы должны использовать соответствующие возможности систем сборки для переопределения этих переменных окружения, чтобы контролировать режим, в котором Vue будет запускаться. Замена process.env.NODE_ENV на строковый литерал позволяет уменьшителям, таким как UglifyJS, удалять целые блоки кода, предназначенные только для разработки, уменьшая итоговый размер файла.
С версии 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-plugin-replace:
const replace = require('rollup-plugin-replace')
rollup({
// ...
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}).then(...)
Примените глобальное превращение envify для вашей сборки.
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
Подробнее в разделе развёртывания на продуктиве.
Некоторые окружения, такие как Google Chrome Apps, требуют соблюдения Content Security Policy (CSP), запрещающей использование конструкции new Function() для исполнения выражений. Полная сборка использует подобные конструкции для компиляции шаблонов, и потому непригодна к использованию в таких окружениях.
С другой стороны, сборки среды исполнения полностью совместимы с CSP. Если использовать их с Webpack и vue-loader или Browserify и vueify, то шаблоны компилируются на этапе сборки в функции отрисовки, которые отлично работают в CSP-окружениях.
Важное замечание: файлы сборки в /dist на GitHub обновляются только при выпускахю Чтобы использовать версию из последних исходников с GitHub, соберите проект самостоятельно:
git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build
Только UMD-сборки доступны в Bower.
# последняя стабильная версия
$ bower install vue
Все UMD-сборки могут быть напрямую использованы как AMD-модули.