Руководство
Основы
- Установка
- Введение
- Экземпляр Vue
- Синтаксис шаблонов
- Вычисляемые свойства и слежение
- Работа с классами и стилями
- Условная отрисовка
- Отрисовка списков
- Обработка событий
- Работа с формами
- Основы компонентов
Продвинутые компоненты
- Регистрация компонентов
- Входные параметры
- Пользовательские события
- Слоты
- Динамические и асинхронные компоненты
- Обработка крайних случаев
Переходы и анимации
- Анимирование списков и появления/исчезновения
- Анимирование переходов между состояниями
Переиспользование и композиция
- Примеси
- Пользовательские директивы
- Render-функции и JSX
- Плагины
- Фильтры
Инструментарий
- Однофайловые компоненты
- Тестирование
- Поддержка TypeScript
- Публикация на production
Масштабирование
- Роутинг
- Управление состоянием приложения
- SSR. Отрисовка на стороне сервера
- Безопасность
Продвинутые темы
- Подробно о реактивности
Вопросы миграции
- Миграция с Vue 1.x
- Миграция с Vue Router 0.7.x
- Миграция с Vuex 0.6.x на 1.0
Мета
- Сравнение с другими фреймворками
- Присоединяйтесь к сообществу Vue.js!
- Познакомьтесь с командой
Эта документация для версий v2.x и ранее. Для v3.x, документация на русском здесь.
Публикация на production
Большинство из советов, описанных ниже, уже включены, если вы используете Vue CLI. Этот раздел актуален только в том случае, если вы используете собственные конфигурации сборки.
Включение режима production
В процессе разработки Vue предусматривает множество полезных предупреждений, чтобы помочь разобраться с типичными ошибками и подводными камнями. Однако в production эти предупреждения бессмысленны и лишь увеличивают размер вашего приложения. К тому же, часть проверок для этих предупреждений добавит небольшие затраты к времени выполнения и поэтому должны быть исключены в режиме production.
Без использования систем сборки
Если вы используете полную сборку, т.е. напрямую подключаете Vue через тег <script>
без использования каких-либо систем сборки, удостоверьтесь что используете минифицированную версию (vue.min.js
) для production. Обе версии можно найти на странице установки.
С использованием систем сборки
При использовании систем сборки, таких как Webpack или Browserify, режим production определяется по значению process.env.NODE_ENV
внутри исходного кода Vue. По умолчанию используется режим для разработки. Обе системы сборки предоставляют возможности для переопределения этой переменной — для включения режима production во Vue и удаления всех проверок и предупреждений на этапе сборки. Все шаблоны vue-cli
уже настроены для вас, но было бы полезно знать, как это делается:
Webpack
С версии Webpack 4+ вы можете использовать опцию mode
:
|
Но в версиях Webpack 3 и более ранних вам необходимо использовать DefinePlugin:
|
Browserify
Запустите сборку, указав в команде переменную
NODE_ENV
со значением"production"
. Это позволитvueify
исключить код для горячей замены модулей, а также код, относящийся к разработке.Примените глобальное преобразование envify к вашей сборке. Это позволит минификатору удалить все предупреждения из исходного кода Vue, обёрнутые в условия проверки переменной окружения. Например:
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
Или используйте envify вместе с Gulp:
// Используйте пользовательский модуль envify для указания переменных окружения
var envify = require('envify/custom')
browserify(browserifyOptions)
.transform(vueify)
.transform(
// Порядок необходим для обработки файлов node_modules
{ global: true },
envify({ NODE_ENV: 'production' })
)
.bundle()Или используя envify вместе с Grunt и grunt-browserify:
// Используйте пользовательский модуль envify для указания переменных окружения
var envify = require('envify/custom')
browserify: {
dist: {
options: {
// Функция для изменения порядка по умолчанию у grunt-browserify
configure: b => b
.transform('vueify')
.transform(
// Порядок необходим для обработки файлов node_modules
{ global: true },
envify({ NODE_ENV: 'production' })
)
.bundle()
}
}
}
Rollup
Используйте @rollup/plugin-replace:
|
Прекомпиляция шаблонов
При использовании DOM в качестве шаблона или строковых шаблонов в JavaScript, компиляция в render
-функцию будет выполняться на лету. Это достаточно быстро для большинства случаев, но если ваше приложение нуждается в максимальной производительности стоит этого избегать.
Самый простой способ предварительной компиляции шаблонов — использовать однофайловые компоненты. На этапе сборки проекта будет выполнена предварительная компиляция, поэтому результирующий код будет содержать только render
-функции вместо необработанных строковых шаблонов.
Если вы используете Webpack и предпочитаете разделять JavaScript и файлы шаблонов, вы можете воспользоваться vue-template-loader, который также преобразует файлы шаблонов в render
-функции на JavaScript на этапе сборки.
Извлечение CSS из компонентов
При использовании однофайловых компонентов, CSS из компонента будет динамически добавлен как тег <style>
через JavaScript. Это немного увеличивает затраты времени выполнения, поэтому при использовании отрисовки на стороне сервера может привести к «мельканию неоформленного содержимого» (flash of unstyled content — FOUC). Извлечение CSS из всех компонентов в один файл позволит избежать этой проблемы, а также добиться лучших результатов в минификации и кэшировании CSS.
Обратитесь к документации соответствующих инструментов для сборки, чтобы узнать как это реализовать:
- Webpack + vue-loader (в
vue-cli
с шаблоном webpack это уже настроено) - Browserify + vueify
- Rollup + rollup-plugin-vue
Отслеживание ошибок во время выполнения
Если при отрисовке компонента произойдёт ошибка, она будет передана в глобальную функцию Vue.config.errorHandler
, если таковая была указана. Использование этого хука в связке с сервисом отслеживания ошибок, например с Sentry, может быть неплохой идеей — тем более, что интеграция с Vue официально поддерживается.