From 1c5f6de9ddaed56041168c9ae268d84282196455 Mon Sep 17 00:00:00 2001 From: Grigoriy Beziuk Date: Thu, 27 Apr 2017 13:16:04 +0800 Subject: [PATCH 01/24] Russian translation update --- docs/ru/configurations/extract-css.md | 41 ++++++++++++++++-- docs/ru/features/scoped-css.md | 4 +- docs/ru/options.md | 61 +++++++++++++++++++++++++++ 3 files changed, 100 insertions(+), 6 deletions(-) diff --git a/docs/ru/configurations/extract-css.md b/docs/ru/configurations/extract-css.md index 7df77b65e..e092e87bb 100644 --- a/docs/ru/configurations/extract-css.md +++ b/docs/ru/configurations/extract-css.md @@ -1,13 +1,46 @@ # Извлечение CSS в отдельный файл -Пример конфигурации для извлечения CSS из всех компонентов Vue в отдельный CSS-файл: - -### Webpack 2.x - ``` bash npm install extract-text-webpack-plugin --save-dev ``` +## Простой путь + +> требуется vue-loader@^12.0.0 и webpack@^2.0.0 + +``` js +// webpack.config.js +var ExtractTextPlugin = require("extract-text-webpack-plugin") + +module.exports = { + // другие настройки... + module: { + rules: [ + { + test: /\.vue$/, + loader: 'vue-loader', + options: { + extractCSS: true + } + } + ] + }, + plugins: [ + new ExtractTextPlugin("style.css") + ] +} +``` + +Указанный выше пример будет автоматически обрабатывать извлечение ` ``` diff --git a/docs/ru/options.md b/docs/ru/options.md index bade17b84..32429384b 100644 --- a/docs/ru/options.md +++ b/docs/ru/options.md @@ -185,3 +185,64 @@ module.exports = { ] } ``` + +### extractCSS + +> Добавлено в версии 12.0.0 + +Автоматически извлекает CSS с помощью `extract-text-webpack-plugin`. Работает для большинства пре-процессоров из коробки и минифицирует при сборке в production. + +Передаваемое значение может быть `true`, или экземпляром плагина (так что вы можете использовать несколько экземпляров extract plugin для разных извлекаемых файлов). + +Это должно использоваться только в production, чтобы горячая перезагрузка модулей работала в процессе разработки. + +Пример: + +``` js +// webpack.config.js +var ExtractTextPlugin = require("extract-text-webpack-plugin") + +module.exports = { + // другие настройки... + module: { + rules: [ + { + test: /\.vue$/, + loader: 'vue-loader', + options: { + extractCSS: true + } + } + ] + }, + plugins: [ + new ExtractTextPlugin("style.css") + ] +} +``` + +Or passing in an instance of the plugin: + +``` js +// webpack.config.js +var ExtractTextPlugin = require("extract-text-webpack-plugin") +var plugin = new ExtractTextPlugin("style.css") + +module.exports = { + // другие настройки... + module: { + rules: [ + { + test: /\.vue$/, + loader: 'vue-loader', + options: { + extractCSS: plugin + } + } + ] + }, + plugins: [ + plugin + ] +} +``` \ No newline at end of file From 10347b6e0e8628975dcfc2b05e984b6d838faa08 Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Thu, 27 Apr 2017 11:44:46 +0300 Subject: [PATCH 02/24] =?UTF-8?q?options.md=20=D0=B4=D0=BE=D0=BF=D0=B5?= =?UTF-8?q?=D1=80=D0=B5=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=D0=BE=20=D0=BF=D1=80?= =?UTF-8?q?=D0=B5=D0=B4=D0=BB=D0=BE=D0=B6=D0=B5=D0=BD=D0=B8=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/options.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/ru/options.md b/docs/ru/options.md index 32429384b..d99b5a143 100644 --- a/docs/ru/options.md +++ b/docs/ru/options.md @@ -196,7 +196,7 @@ module.exports = { Это должно использоваться только в production, чтобы горячая перезагрузка модулей работала в процессе разработки. -Пример: +Например: ``` js // webpack.config.js @@ -221,7 +221,7 @@ module.exports = { } ``` -Or passing in an instance of the plugin: +Или можно передать экземпляр плагина: ``` js // webpack.config.js From fbb27a12389da0fc6d72dbb316b3c9c3ee062393 Mon Sep 17 00:00:00 2001 From: Alex-Sokolov Date: Sat, 27 May 2017 14:33:39 +0300 Subject: [PATCH 03/24] =?UTF-8?q?SUMMARY.md=20=D0=B4=D0=BE=D0=B1=D0=B0?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=20=D0=BF=D0=B5=D1=80=D0=B5=D1=87=D0=B5?= =?UTF-8?q?=D0=BD=D1=8C=20=D0=BD=D0=B0=D1=81=D1=82=D1=80=D0=BE=D0=B5=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/SUMMARY.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/ru/SUMMARY.md b/docs/ru/SUMMARY.md index c2735607a..c4468f738 100644 --- a/docs/ru/SUMMARY.md +++ b/docs/ru/SUMMARY.md @@ -19,3 +19,14 @@ - [Тестирование](workflow/testing.md) - [Тестирование с моками](workflow/testing-with-mocks.md) - [Перечень настроек](options.md) + - [loaders](options.md#loaders) + - [preLoaders](options.md#preloaders) + - [postLoaders](options.md#postloaders) + - [postcss](options.md#postcss) + - [cssSourceMap](options.md#csssourcemap) + - [esModule](options.md#esmodule) + - [preserveWhitespace](options.md#preservewhitespace) + - [transformToRequire](options.md#transformtorequire) + - [buble](options.md#buble) + - [extractCSS](options.md#extractcss) + - [optimizeSSR](options.md#optimizessr) From 8dde9f1a1f141f8e915d3ed536e74baf04901821 Mon Sep 17 00:00:00 2001 From: Alex-Sokolov Date: Sat, 27 May 2017 14:40:18 +0300 Subject: [PATCH 04/24] =?UTF-8?q?options.md=20=D0=B4=D0=BE=D0=B1=D0=B0?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=BD=D0=BE=D0=B2=D0=B0=D1=8F?= =?UTF-8?q?=20=D0=BE=D0=BF=D1=86=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/options.md | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/docs/ru/options.md b/docs/ru/options.md index d99b5a143..0e2d361b8 100644 --- a/docs/ru/options.md +++ b/docs/ru/options.md @@ -114,7 +114,7 @@ module.exports = { ### cssSourceMap -- Тип: `Boolean` +- Тип: `boolean` - По умолчанию: `true` Использование source maps для CSS. Отключение этой опции может позволить избежать некоторых багов с относительными путями в `css-loader` и сделать сборку немного быстрее. @@ -123,14 +123,14 @@ module.exports = { ### esModule -- Тип: `Boolean` -- По умолчанию: `undefined` +- Тип: `boolean` +- По умолчанию: `false` Генерация esModule совместимого кода. По умолчанию vue-loader генерирует модули в формате commonjs `module.exports = ....`. Когда опция `esModule` установлена в true, экспорт по умолчанию (default export) будет преобразован в `exports.__esModule = true; exports = ...`. Это может быть полезным для настройки взаимодействия с транспиляторами, отличными от Babel, как например TypeScript. ### preserveWhitespace -- Тип: `Boolean` +- Тип: `boolean` - По умолчанию: `true` При установке в `false` пробельные символы между HTML тегами в шаблонах будут проигнорированы. @@ -190,6 +190,9 @@ module.exports = { > Добавлено в версии 12.0.0 +- Тип: `boolean` +- По умолчанию: `false` + Автоматически извлекает CSS с помощью `extract-text-webpack-plugin`. Работает для большинства пре-процессоров из коробки и минифицирует при сборке в production. Передаваемое значение может быть `true`, или экземпляром плагина (так что вы можете использовать несколько экземпляров extract plugin для разных извлекаемых файлов). @@ -245,4 +248,13 @@ module.exports = { plugin ] } -``` \ No newline at end of file +``` + +### optimizeSSR + +> Добавлено в версии 12.1.1 + +- Тип: `boolean` +- По умолчанию: `true` когда конфигурация Webpack имеет `target: 'node'` и версия `vue-template-compiler` 2.4.0 или выше. + +Включает оптимизацию компиляции в Vue 2.4 SSR, которая компилирует в простые строки часть деревьев vdom возвращаемых render-функциями, что улучшает производительность SSR. В некоторых случаях вам может потребоваться явно отключить оптимизацию, поскольку результирующие render-функции могут быть использованы только для SSR и не могут использоваться для рендеринга на стороне клиента или тестирования. \ No newline at end of file From c447e10334efaec1218d6a47134e1f013972325f Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Thu, 29 Jun 2017 09:19:39 +0300 Subject: [PATCH 05/24] =?UTF-8?q?testing-with-mocks.md=20=D0=B4=D0=BE?= =?UTF-8?q?=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20-loader?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/workflow/testing-with-mocks.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/ru/workflow/testing-with-mocks.md b/docs/ru/workflow/testing-with-mocks.md index 5326d0543..1b7b7a6ff 100644 --- a/docs/ru/workflow/testing-with-mocks.md +++ b/docs/ru/workflow/testing-with-mocks.md @@ -38,13 +38,13 @@ npm install inject-loader@^2.0.0 --save-dev ``` js // example.spec.js -const ExampleInjector = require('!!vue?inject!./example.vue') +const ExampleInjector = require('!!vue-loader?inject!./example.vue') ``` Обратите внимание на эту безумную строку импорта – мы используем [запросы к webpack загрузчику](https://webpack.github.io/docs/loaders.html). Краткое пояснение: - `!!` в начале строки означает "отключи все загрузчики из глобальной конфигурации" -- `vue?inject!` значит "используй `vue` загрузчик и передай запрос `?inject`". Это заставляет `vue-loader` скомпилировать компонент в режиме внедрения зависимостей. +- `vue-loader?inject!` значит "используй загрузчик `vue-loader` и передай запрос `?inject`". Это заставляет `vue-loader` скомпилировать компонент в режиме внедрения зависимостей. Полученный `ExampleInjector` – это фабричная функция, которую можно вызвать, чтобы создать экземпляр модуля `example.vue`: From 010629decc6afc52deda1acb3f5b729eda1c0979 Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Thu, 29 Jun 2017 09:22:07 +0300 Subject: [PATCH 06/24] =?UTF-8?q?testing.md=20=D0=B8=D1=81=D0=BF=D1=80?= =?UTF-8?q?=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=20=D0=BF=D1=80=D0=B8=D0=BC=D0=B5?= =?UTF-8?q?=D1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/workflow/testing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ru/workflow/testing.md b/docs/ru/workflow/testing.md index 389eac419..e8bdf2090 100644 --- a/docs/ru/workflow/testing.md +++ b/docs/ru/workflow/testing.md @@ -11,7 +11,7 @@ Karma – это тестовый движок, который запускае npm install\ karma karma-webpack\ karma-jasmine jasmine-core\ - karma-phantomjs-launcher phantomjs\ + karma-phantomjs-launcher phantomjs-prebuilt\ --save-dev ``` From 903362e1b43f57bc846334409605a225a91bd599 Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Thu, 29 Jun 2017 09:22:20 +0300 Subject: [PATCH 07/24] =?UTF-8?q?scoped-css.md=20=D0=B4=D0=BE=D0=B1=D0=B0?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=20=D1=80=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB?= =?UTF-8?q?=20=D0=BF=D1=80=D0=BE=20=D0=B2=D0=BB=D0=BE=D0=B6=D0=B5=D0=BD?= =?UTF-8?q?=D0=BD=D1=8B=D0=B5=20=D1=81=D0=B5=D0=BB=D0=B5=D0=BA=D1=82=D0=BE?= =?UTF-8?q?=D1=80=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/features/scoped-css.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/docs/ru/features/scoped-css.md b/docs/ru/features/scoped-css.md index 1ca2c27aa..4375a5607 100644 --- a/docs/ru/features/scoped-css.md +++ b/docs/ru/features/scoped-css.md @@ -49,3 +49,19 @@ 4. **Локальные стили не устраняют необходимость классов**. Из-за того как браузеры рендерят различные CSS-селекторы, `p { color: red }` может быть в разы медленнее при использовании в локальных стилях (например, когда комбинируется с селектором по атрибуту). Если же вы используете классы или ID, такие как `.example { color: red }`, тогда вы практически полностью исключаете ухудшение производительности. [Вот пример](http://stevesouders.com/efws/css-selectors/csscreate.php) где вы можете проверить разницу самостоятельно. 5. **Будьте внимательны с селекторами потомков в рекурсивных компонентах!** Для CSS-правила с селектором `.a .b`, если элемент, который соответствует `.a` содержит рекурсивный компонент потомок, тогда все `.b` в этом компоненте потомке будут также соответствовать правилу. + +6. Если вам нужны вложенные селекторы в `scoped` стилях, вам нужно будет использовать оператор `>>>` для CSS и `/deep/` для `scss`: + + ``` html + + + + ``` \ No newline at end of file From 3fa6e7b5b940363447fa9ac14bc8cc117081f8c6 Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Thu, 29 Jun 2017 09:31:51 +0300 Subject: [PATCH 08/24] =?UTF-8?q?pre-processors.md=20=D0=B4=D0=BE=D0=B1?= =?UTF-8?q?=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=BD=D0=BE=D0=B2=D0=B0?= =?UTF-8?q?=D1=8F=20=D1=81=D0=B5=D0=BA=D1=86=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/configurations/pre-processors.md | 34 ++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/ru/configurations/pre-processors.md b/docs/ru/configurations/pre-processors.md index 1d3c80f85..921a7b4ea 100644 --- a/docs/ru/configurations/pre-processors.md +++ b/docs/ru/configurations/pre-processors.md @@ -37,6 +37,40 @@ npm install sass-loader node-sass --save-dev Обратитесь к разделу [продвинутой конфигурации загрузчиков](./advanced.md) для получения дополнительной информации о том, как настраивать vue-loader. +#### Загрузка глобального файла настроек + +Часто встречаются просьбы добавить возможность загружать файл настроек в каждом компоненте без необходимости явно импортировать его каждый раз, например для использования SCSS-переменных глобально во всех компонентах. Для этого нужно: + +``` bash +npm install sass-resources-loader --save-dev +``` + +Затем добавить новое правило в Webpack: + +``` js +{ + loader: 'sass-resources-loader', + options: { + resources: path.resolve(__dirname, '../src/style/_variables.scss') + } +} +``` + +Например, если вы используете [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack), измените файл `build/util.js` таким образом: + +``` js +scss: generateLoaders('sass').concat( + { + loader: 'sass-resources-loader', + options: { + resources: path.resolve(__dirname, '../src/style/_variables.scss') + } + } +), +``` + +В этот файл рекомендуется включать только переменные, примеси и т.п., чтобы предотвратить дублирование CSS в финальных скомпилированных файлах. + ### JavaScript Весь JavaScript внутри Vue компонентов обрабатывается `babel-loader` по умолчанию. При необходимости это можно изменить: From 65242357d3b168ec17476f94fe3fe3884b821ff6 Mon Sep 17 00:00:00 2001 From: Alex-Sokolov Date: Sun, 30 Jul 2017 13:24:29 +0300 Subject: [PATCH 09/24] =?UTF-8?q?options.md=20=D0=BD=D1=83=D0=BC=D0=B5?= =?UTF-8?q?=D1=80=D0=B0=D1=86=D0=B8=D1=8F=20=D0=B2=D0=B5=D1=80=D1=81=D0=B8?= =?UTF-8?q?=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/options.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/ru/options.md b/docs/ru/options.md index 0e2d361b8..b78e8b037 100644 --- a/docs/ru/options.md +++ b/docs/ru/options.md @@ -64,14 +64,14 @@ module.exports = { ### preLoaders - Тип: `{ [lang: string]: string }` -- поддерживается только в версиях >=10.3.0 +- поддерживается только в версиях 10.3.0+ Конфигурация подобна как и в `loaders`, но `preLoaders` будут применены к соответствующим секциям перед стандартными загрузчиками. Вы можете использовать это для предварительной обработки секций - например для локализации на этапе сборки. ### postLoaders - Тип: `{ [lang: string]: string }` -- поддерживается только в версиях >=10.3.0 +- поддерживается только в версиях 10.3.0+ Конфигурация подобна как и в `loaders`, но `postLoaders` применяются после загрузчиков по умолчанию. Вы можете использовать это для пост-обработки языков. Обратите внимание, что тем не менее всё несколько сложнее: @@ -81,7 +81,7 @@ module.exports = { ### postcss -> Примечание: в версиях >=11.0.0 рекомендуется использовать файл конфигурации PostCSS вместо описания секции. [Использование аналогично как в `postcss-loader`](https://github.com/postcss/postcss-loader#usage). +> Примечание: в версиях 11.0.0+ рекомендуется использовать файл конфигурации PostCSS вместо описания секции. [Использование аналогично как в `postcss-loader`](https://github.com/postcss/postcss-loader#usage). - Тип: `Array` или `Function` или `Object` From fd2908385c3df4af598a7b25871d815ff65ed4af Mon Sep 17 00:00:00 2001 From: Alex-Sokolov Date: Sun, 30 Jul 2017 13:24:39 +0300 Subject: [PATCH 10/24] =?UTF-8?q?advanced.md=20=D0=BD=D1=83=D0=BC=D0=B5?= =?UTF-8?q?=D1=80=D0=B0=D1=86=D0=B8=D1=8F=20=D0=B2=D0=B5=D1=80=D1=81=D0=B8?= =?UTF-8?q?=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/configurations/advanced.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ru/configurations/advanced.md b/docs/ru/configurations/advanced.md index 015dd1ef9..51edb4d2b 100644 --- a/docs/ru/configurations/advanced.md +++ b/docs/ru/configurations/advanced.md @@ -10,7 +10,7 @@ Чтобы сделать это укажите опцию `loaders` для `vue-loader`: -> Опции `preLoaders` и `postLoaders` доступны только в версиях >=10.3.0 +> Опции `preLoaders` и `postLoaders` доступны только в версиях 10.3.0+ ### Webpack 2.x From 34128619802828c48f984ac6525da06c9a58af87 Mon Sep 17 00:00:00 2001 From: Alex-Sokolov Date: Sun, 30 Jul 2017 13:25:37 +0300 Subject: [PATCH 11/24] =?UTF-8?q?options.md=20=D1=83=D1=82=D0=BE=D1=87?= =?UTF-8?q?=D0=BD=D0=B5=D0=BD=D0=B8=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/options.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/ru/options.md b/docs/ru/options.md index b78e8b037..29ba69e6f 100644 --- a/docs/ru/options.md +++ b/docs/ru/options.md @@ -124,7 +124,8 @@ module.exports = { ### esModule - Тип: `boolean` -- По умолчанию: `false` +- По умолчанию: `true` +- В версии v12.x или ниже, значение по умолчанию `false` Генерация esModule совместимого кода. По умолчанию vue-loader генерирует модули в формате commonjs `module.exports = ....`. Когда опция `esModule` установлена в true, экспорт по умолчанию (default export) будет преобразован в `exports.__esModule = true; exports = ...`. Это может быть полезным для настройки взаимодействия с транспиляторами, отличными от Babel, как например TypeScript. From bf8d7724ce5512d550e3c3d99d54e1a00f66bda5 Mon Sep 17 00:00:00 2001 From: Alex-Sokolov Date: Sun, 30 Jul 2017 13:26:29 +0300 Subject: [PATCH 12/24] =?UTF-8?q?options.md=20=D1=83=D1=82=D0=BE=D1=87?= =?UTF-8?q?=D0=BD=D0=B5=D0=BD=D0=B8=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/options.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/ru/options.md b/docs/ru/options.md index 29ba69e6f..7b789383c 100644 --- a/docs/ru/options.md +++ b/docs/ru/options.md @@ -124,11 +124,12 @@ module.exports = { ### esModule - Тип: `boolean` -- По умолчанию: `true` -- В версии v12.x или ниже, значение по умолчанию `false` +- По умолчанию: `true` (v13.0+) Генерация esModule совместимого кода. По умолчанию vue-loader генерирует модули в формате commonjs `module.exports = ....`. Когда опция `esModule` установлена в true, экспорт по умолчанию (default export) будет преобразован в `exports.__esModule = true; exports = ...`. Это может быть полезным для настройки взаимодействия с транспиляторами, отличными от Babel, как например TypeScript. +> Примечание: до версии v12.x, значение по умолчанию `false`. + ### preserveWhitespace - Тип: `boolean` From 004e4d0b697041b86e78d78e424ec0fec957339b Mon Sep 17 00:00:00 2001 From: Alex-Sokolov Date: Sun, 3 Sep 2017 17:26:54 +0300 Subject: [PATCH 13/24] Fix merge --- docs/ru/configurations/pre-processors.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/docs/ru/configurations/pre-processors.md b/docs/ru/configurations/pre-processors.md index 41c91726f..1bb3be1bc 100644 --- a/docs/ru/configurations/pre-processors.md +++ b/docs/ru/configurations/pre-processors.md @@ -56,11 +56,7 @@ npm install sass-resources-loader --save-dev } ``` -<<<<<<< HEAD -Например, если вы используете [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack), измените файл `build/util.js` таким образом: -======= Например, если вы используете [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack), измените файл `build/utils.js` таким образом: ->>>>>>> upstream/master ``` js scss: generateLoaders('sass').concat( @@ -73,7 +69,7 @@ scss: generateLoaders('sass').concat( ), ``` -В этот файл рекомендуется включать только переменные, примеси и т.п., чтобы предотвратить дублирование CSS в финальных скомпилированных файлах. +В этот файл рекомендуется включать только переменные, примеси и т.п., чтобы предотвратить дублирование CSS в финальных скомпилированных файлах. ### JavaScript From 841b74906d8d6e3369761dc6d84ba1f4d1d1a25c Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Wed, 20 Sep 2017 15:20:03 +0300 Subject: [PATCH 14/24] =?UTF-8?q?SUMMARY.md=20=D0=B4=D0=BE=D0=B1=D0=B0?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BD=D0=BE=D0=B2=D1=8B=D0=B5?= =?UTF-8?q?=20=D0=BF=D1=83=D0=BD=D0=BA=D1=82=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/SUMMARY.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/ru/SUMMARY.md b/docs/ru/SUMMARY.md index c4468f738..cc830c1a7 100644 --- a/docs/ru/SUMMARY.md +++ b/docs/ru/SUMMARY.md @@ -26,6 +26,8 @@ - [cssSourceMap](options.md#csssourcemap) - [esModule](options.md#esmodule) - [preserveWhitespace](options.md#preservewhitespace) + - [compilerModules](options.md#compilermodules) + - [compilerDirectives](options.md#compilerdirectives) - [transformToRequire](options.md#transformtorequire) - [buble](options.md#buble) - [extractCSS](options.md#extractcss) From b20952157ffda2ae2f85ca70553085daada4536a Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Wed, 20 Sep 2017 15:42:12 +0300 Subject: [PATCH 15/24] =?UTF-8?q?scoped-css.md=20=D0=BD=D0=BE=D0=B2=D1=8B?= =?UTF-8?q?=D0=B5=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/features/scoped-css.md | 66 +++++++++++++++++++--------------- 1 file changed, 38 insertions(+), 28 deletions(-) diff --git a/docs/ru/features/scoped-css.md b/docs/ru/features/scoped-css.md index 4375a5607..d0ae79543 100644 --- a/docs/ru/features/scoped-css.md +++ b/docs/ru/features/scoped-css.md @@ -28,40 +28,50 @@ ``` -#### Примечания +#### Советы -1. Вы можете использовать в компоненте локальные и глобальные стили одновременно: +### Использование локальных и глобальных стилей - ``` html - +Вы можете сочетать использование в компоненте локальных и глобальных стили одновременно: - - ``` +``` html + + + +``` + +### Корневой узел дочернего компонента + +С помощью `scoped`, стили родительского компонента не будут влиять на содержимое дочерних компонентов. Тем не менее, корневой узел дочернего компонента будет зависеть как от scoped CSS из родительского элемента, так и от scoped CSS дочернего. Это предусмотрено специально, чтобы родительский элемент мог стилизовать корневой элемент дочернего компонента например для целей макета. + +### Глубокие селекторы + +Если вы хотите, чтобы селектор в `scoped` стилях был "глубоким", т.е. влиял на дочерние компоненты, вы можете использовать комбинатор `>>>`: + +``` html + +``` + +Указанное выше будет скомпилировано в: + +``` css +.a[data-v-f3f3eg9] .b { /* ... */ } +``` -2. Корневой тег компонента потомка будет попадать под область видимости родительского локального CSS и своего локального CSS. +Некоторые пре-процессоры, такие как SASS, не могут правильно обработать `>>>`. В таких случаях вы можете использовать комбинатор `/deep/` — это псевдоним для `>>>` работающий точно также. -3. Partials не затрагиваются локальными стилями. +### Динамически генерируемый контент -4. **Локальные стили не устраняют необходимость классов**. Из-за того как браузеры рендерят различные CSS-селекторы, `p { color: red }` может быть в разы медленнее при использовании в локальных стилях (например, когда комбинируется с селектором по атрибуту). Если же вы используете классы или ID, такие как `.example { color: red }`, тогда вы практически полностью исключаете ухудшение производительности. [Вот пример](http://stevesouders.com/efws/css-selectors/csscreate.php) где вы можете проверить разницу самостоятельно. +DOM-содержимое, создаваемое с помощью `v-html` не попадает под область действия scoped-стилей, но вы всё равно можете его стилизовать воспользовавшись deep-селекторами. -5. **Будьте внимательны с селекторами потомков в рекурсивных компонентах!** Для CSS-правила с селектором `.a .b`, если элемент, который соответствует `.a` содержит рекурсивный компонент потомок, тогда все `.b` в этом компоненте потомке будут также соответствовать правилу. +### О чем стоит помнить -6. Если вам нужны вложенные селекторы в `scoped` стилях, вам нужно будет использовать оператор `>>>` для CSS и `/deep/` для `scss`: +- **Локальные стили не устраняют необходимость классов**. Из-за того как браузеры рендерят различные CSS-селекторы, `p { color: red }` может быть в разы медленнее при использовании в локальных стилях (например, когда комбинируется с селектором по атрибуту). Если же вы используете классы или ID, такие как `.example { color: red }`, тогда вы практически полностью исключаете ухудшение производительности. [Вот пример](http://stevesouders.com/efws/css-selectors/csscreate.php) где вы можете проверить разницу самостоятельно. - ``` html - - - - ``` \ No newline at end of file +- **Будьте внимательны с селекторами потомков в рекурсивных компонентах!** Для CSS-правила с селектором `.a .b`, если элемент, который соответствует `.a` содержит рекурсивный компонент потомок, тогда все `.b` в этом компоненте потомке будут также соответствовать правилу. \ No newline at end of file From 4ba07992513bb1ecac8cb16b78d9b9385cdafce5 Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Wed, 20 Sep 2017 15:48:43 +0300 Subject: [PATCH 16/24] =?UTF-8?q?options.md=20=D0=BD=D0=BE=D0=B2=D1=8B?= =?UTF-8?q?=D0=B5=20=D1=81=D0=B2=D0=BE=D0=B9=D1=81=D1=82=D0=B2=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/options.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/docs/ru/options.md b/docs/ru/options.md index 7b789383c..d39930d90 100644 --- a/docs/ru/options.md +++ b/docs/ru/options.md @@ -137,6 +137,22 @@ module.exports = { При установке в `false` пробельные символы между HTML тегами в шаблонах будут проигнорированы. +### compilerModules + +- Тип: `Array` +- По умолчанию: `[]` + + Настройка опции `modules` для `vue-template-compiler`. См. подробнее в документации `vue-template-compiler` [опция `modules`](https://github.com/vuejs/vue/blob/dev/packages/vue-template-compiler/README.md#compilercompiletemplate-options). + +### compilerDirectives + +- Тип: `{ [tag: string]: Function }` +- По умолчанию: `{}` (v13.0.5+) + + > Примечание: в версиях v12.x поддержка добавлена с v12.2.3+ + + Настройка опции `directives` для `vue-template-compiler`. См. подробнее в документации `vue-template-compiler` [опция `directives`](https://github.com/vuejs/vue/blob/dev/packages/vue-template-compiler/README.md#compilercompiletemplate-options). + ### transformToRequire - Тип: `{ [tag: string]: string | Array }` From 6e6355df99945391d557ad31835d13c9aa6c06bb Mon Sep 17 00:00:00 2001 From: Alex Sokolov Date: Wed, 20 Sep 2017 16:20:23 +0300 Subject: [PATCH 17/24] =?UTF-8?q?hot-reload.md=20=D0=BE=D0=B1=D0=BD=D0=BE?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/features/hot-reload.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/docs/ru/features/hot-reload.md b/docs/ru/features/hot-reload.md index 58844d5f5..66af67734 100644 --- a/docs/ru/features/hot-reload.md +++ b/docs/ru/features/hot-reload.md @@ -4,4 +4,18 @@ ![hot-reload](http://blog.evanyou.me/images/vue-hot.gif) +## Правила сохранения текущего состояния компонента + +- При редактировании `