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 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` по умолчанию. При необходимости это можно изменить: 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 diff --git a/docs/ru/options.md b/docs/ru/options.md index 0e2d361b8..7b789383c 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` @@ -124,10 +124,12 @@ module.exports = { ### esModule - Тип: `boolean` -- По умолчанию: `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` 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`: 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 ```