From 9aba6702699e60b4e9769608c1865aa4f47d2a4e Mon Sep 17 00:00:00 2001
From: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com>
Date: Thu, 24 May 2018 11:43:01 +0300
Subject: [PATCH 01/11] [RU] Translation moved to VuePress

---
 docs/.vuepress/config.js        |  42 +++++
 docs/ru/README.md               |  41 +++++
 docs/ru/guide/README.md         |  75 +++++++++
 docs/ru/guide/asset-url.md      |  60 +++++++
 docs/ru/guide/css-modules.md    | 154 ++++++++++++++++++
 docs/ru/guide/custom-blocks.md  |  96 ++++++++++++
 docs/ru/guide/extract-css.md    |  75 +++++++++
 docs/ru/guide/functional.md     |  21 +++
 docs/ru/guide/hot-reload.md     |  45 ++++++
 docs/ru/guide/linting.md        |  45 ++++++
 docs/ru/guide/pre-processors.md | 264 +++++++++++++++++++++++++++++++
 docs/ru/guide/scoped-css.md     |  75 +++++++++
 docs/ru/guide/testing.md        |   5 +
 docs/ru/migrating.md            | 266 ++++++++++++++++++++++++++++++++
 docs/ru/options.md              |  83 ++++++++++
 docs/ru/spec.md                 | 127 +++++++++++++++
 16 files changed, 1474 insertions(+)
 create mode 100644 docs/ru/README.md
 create mode 100644 docs/ru/guide/README.md
 create mode 100644 docs/ru/guide/asset-url.md
 create mode 100644 docs/ru/guide/css-modules.md
 create mode 100644 docs/ru/guide/custom-blocks.md
 create mode 100644 docs/ru/guide/extract-css.md
 create mode 100644 docs/ru/guide/functional.md
 create mode 100644 docs/ru/guide/hot-reload.md
 create mode 100644 docs/ru/guide/linting.md
 create mode 100644 docs/ru/guide/pre-processors.md
 create mode 100644 docs/ru/guide/scoped-css.md
 create mode 100644 docs/ru/guide/testing.md
 create mode 100644 docs/ru/migrating.md
 create mode 100644 docs/ru/options.md
 create mode 100644 docs/ru/spec.md

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index ec153295c..f5b6b110f 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -9,6 +9,11 @@ module.exports = {
       lang: 'zh-CN',
       title: 'Vue Loader',
       description: '处理 Vue 单文件组件的 Webpack loader'
+    },
+    '/ru/': {
+      lang: 'ru',
+      title: 'Vue Loader',
+      description: 'Webpack loader для однофайловых компонентов Vue'
     }
   },
   serviceWorker: true,
@@ -90,6 +95,43 @@ module.exports = {
           '/zh/guide/linting',
           '/zh/guide/testing'
         ]
+      },
+      '/ru/': {
+        label: 'Русский',
+        selectText: 'Languages',
+        editLinkText: 'Изменить эту страницу на GitHub',
+        nav: [
+          {
+            text: 'Руководство',
+            link: '/ru/guide/'
+          },
+          {
+            text: 'Однофайловые компоненты',
+            link: '/ru/spec.html'
+          },
+          {
+            text: 'Настройки',
+            link: '/ru/options.html'
+          },
+          {
+            text: 'Миграция с версии v14',
+            link: '/ru/migrating.md'
+          }
+        ],
+        sidebar: [
+          '/ru/',
+          '/ru/guide/',
+          '/ru/guide/asset-url',
+          '/ru/guide/pre-processors',
+          '/ru/guide/scoped-css',
+          '/ru/guide/css-modules',
+          '/ru/guide/hot-reload',
+          '/ru/guide/functional',
+          '/ru/guide/custom-blocks',
+          '/ru/guide/extract-css',
+          '/ru/guide/linting',
+          '/ru/guide/testing'
+        ]
       }
     }
   }
diff --git a/docs/ru/README.md b/docs/ru/README.md
new file mode 100644
index 000000000..548a12ef4
--- /dev/null
+++ b/docs/ru/README.md
@@ -0,0 +1,41 @@
+# Введение
+
+:::tip ПРИМЕЧАНИЕ К ВЕРСИИ
+Это документация для Vue Loader v15 и выше. Если вы обновляетесь с v14 или более ранних версий, обратитесь к [руководству по миграции](./migrating.md). Если вы используете старую версию, то документация к ней [здесь](https://vue-loader-v14.vuejs.org).
+:::
+
+## Что такое Vue Loader?
+
+`vue-loader` — это загрузчик для [webpack](https://webpack.js.org/), который позволяет вам использовать компоненты Vue в формате, именуемым [однофайловыми компонентами](./spec.md):
+
+``` vue
+<template>
+  <div class="example">{{ msg }}</div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'Hello world!'
+    }
+  }
+}
+</script>
+
+<style>
+.example {
+  color: red;
+}
+</style>
+```
+
+Использование `vue-loader` предоставляет множество интересных возможностей:
+
+- Позволяет использовать разнообразные загрузчики webpack для разных секций компонента Vue, например Sass для `<style>` и Pug для `<template>`;
+- Позволяет использовать пользовательские секции в файлах `.vue`, обрабатывая их указанными цепочками загрузчиков;
+- Обращается со статическими ресурсами, указанными в `<style>` и `<template>` как с зависимостями модуля и обрабатывает их с помощью загрузчиков webpack;
+- Может эмулировать локальный (scoped) CSS для каждого компонента;
+- Горячая перезагрузка модулей с сохранением состояния на этапе разработки.
+
+В двух словах, сочетание webpack и `vue-loader` предоставляет вам современный, гибкий и невероятно эффективный подход к написанию клиентских приложений на Vue.js.
diff --git a/docs/ru/guide/README.md b/docs/ru/guide/README.md
new file mode 100644
index 000000000..5fc73ba27
--- /dev/null
+++ b/docs/ru/guide/README.md
@@ -0,0 +1,75 @@
+# Начало работы
+
+## Vue CLI
+
+Если вы не заинтересованы настраивать вручную webpack, тогда мы рекомендуем вам разворачивать проекты с помощью [Vue CLI](https://github.com/vuejs/vue-cli). Проекты создаваемые с помощью Vue CLI предварительно сконфигурированы с учётом большинства общих потребностей при разработке из коробки.
+
+Следуйте этому руководству, если встроенная конфигурация Vue CLI не подходит для ваших нужд, или вы предпочитаете создавать собственную конфигурацию webpack с нуля.
+
+## Конфигурация вручную
+
+Конфигурация Vue Loader немного отличается от настройки других загрузчиков. В дополнении к правилу, которое будет применять `vue-loader` ко всем файлам с расширением `.vue`, убедитесь что добавили плагин Vue Loader в вашу конфигурацию webpack:
+
+``` js
+// webpack.config.js
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+
+module.exports = {
+  module: {
+    rules: [
+      // ... другие правила
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      }
+    ]
+  },
+  plugins: [
+    // убедитесь что подключили плагин!
+    new VueLoaderPlugin()
+  ]
+}
+```
+
+**Плагин необходим!** Он отвечает за клонирование любых других правил, которые вы определили, чтобы применить их к соответствующим языковым блокам в файлах `.vue`. Например, если у вас есть правило, соответствующее файлам `/\.js$/`, оно будет применяться к секциям `<script>` в файлах `.vue`.
+
+Более полная версия конфигурации webpack будет выглядеть так:
+
+``` js
+// webpack.config.js
+const path = require('path')
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+
+module.exports = {
+  mode: 'development',
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      },
+      // это будет применяться к файлам `.js`
+      // А ТАКЖЕ к секциям `<script>` внутри файлов `.vue`
+      {
+        test: /\.js$/,
+        loader: 'babel-loader'
+      },
+      // это будет применяться к файлам `.css`
+      // А ТАКЖЕ к секциям `<style>` внутри файлов `.vue`
+      {
+        test: /\.css$/,
+        use: [
+          'vue-style-loader',
+          'css-loader'
+        ]
+      }
+    ]
+  },
+  plugins: [
+    // убедитесь что подключили плагин!
+    new VueLoaderPlugin()
+  ]
+}
+```
+
+Также смотрите [перечень настроек](../options.md), где перечислены все доступные опции загрузчика.
diff --git a/docs/ru/guide/asset-url.md b/docs/ru/guide/asset-url.md
new file mode 100644
index 000000000..4f404a256
--- /dev/null
+++ b/docs/ru/guide/asset-url.md
@@ -0,0 +1,60 @@
+# Обработка вложенных URL
+
+Когда Vue Loader компилирует секции `<template>` в однофайловых компонентах, то он будет трактовать все использованные URL как **зависимости модуля**.
+
+Например, следующий примера шаблона:
+
+``` vue
+<img src="../image.png">
+```
+
+будет скомпилирован в:
+
+``` js
+createElement('img', {
+  attrs: {
+    src: require('../image.png') // теперь это запрос к модулю
+  }
+})
+```
+
+По умолчанию следующие комбинации тегов/атрибутов преобразуются и могут быть настроены с помощью опции [transformAssetUrls](../options.md#transformasseturls).
+
+``` js
+{
+  video: ['src', 'poster'],
+  source: 'src',
+  img: 'src',
+  image: 'xlink:href'
+}
+```
+
+Кроме того, если вы настроили использование [css-loader](https://github.com/webpack-contrib/css-loader) для секций `<style>`, используемые URL-адреса в вашем CSS будут обрабатываться аналогичным образом.
+
+## Правила преобразования
+
+Преобразования URL ресурсов подчиняются следующим правилам:
+
+- Если в URL абсолютный путь (например, `/images/foo.png`), он будет оставлен как есть.
+
+- Если URL начинается с `.`, он будет истолковываться как запрос модуля относительно текущего каталога и разрешаться на основе структуры каталогов вашей файловой системы.
+
+- Если URL начинается с `~`, то всё что после него будет истолковываться как запрос модуля. Это означает, что вы можете ссылаться на ресурсы даже внутри node_modules:
+
+  ``` html
+  <img src="~some-npm-package/foo.png">
+  ```
+
+- Если URL начинается с `@`, то также будет истолковываться как запрос модуля. Это полезно если в вашей конфигурации webpack есть псевдоним для `@`, который по умолчанию указывает на `/src` в любом проекте, созданном через `vue-cli`.
+
+## Связанные загрузчики
+
+Так как файлы с расширениями, таким как `.png`, не являются JavaScript- модулями, вам необходимо настроить webpack для использования [file-loader](https://github.com/webpack/file-loader) или [url-loader](https://github.com/webpack/url-loader) чтобы корректно их обрабатывать. Проекты создаваемые с помощью Vue CLI уже предварительно настраивают это для вас.
+
+## Почему так
+
+Преимущества подобных преобразований URL:
+
+1. `file-loader` позволяет определить куда нужно скопировать и поместить файл, а также как именовать его, добавляя в имя хэш для лучшего кеширования. Кроме того, это означает что **вы можете просто поместить изображения рядом с вашим `*.vue` файлами и использовать относительные пути, основанные на структуре каталогов, не беспокоясь об адресах при публикации**. При правильной конфигурации, webpack будет автоматически заменять пути к файлам на корректные URL в итоговой сборке.
+
+2. `url-loader` позволяет вставлять файлы как base-64 ссылки, если они меньше указанного размера. Это позволит уменьшить количество HTTP-запросов при использовании маленьких файлов. Если же файл больше указанного порога, то он автоматически подключится с помощью `file-loader`.
diff --git a/docs/ru/guide/css-modules.md b/docs/ru/guide/css-modules.md
new file mode 100644
index 000000000..8d02e342a
--- /dev/null
+++ b/docs/ru/guide/css-modules.md
@@ -0,0 +1,154 @@
+# CSS модули
+
+[CSS модули](https://github.com/css-modules/css-modules) — это популярная система для модульности и компоновки CSS. `vue-loader` предоставляет первоклассную интеграцию с CSS модулями как возможную альтернативу эмулируемого локального (scoped) CSS.
+
+## Использование
+
+Во-первых, CSS модули нужно явно включить, передав опцию `modules: true` в `css-loader`:
+
+``` js
+// webpack.config.js
+{
+  module: {
+    rules: [
+      // ... другие правила опущены
+      {
+        test: /\.css$/,
+        use: [
+          'vue-style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              // включаем CSS модули
+              modules: true,
+              // настраиваем генерируемое имя класса
+              localIdentName: '[local]_[hash:base64:8]'
+            }
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+Затем, добавляем атрибут `module` к тегу секции `<style>`:
+
+``` vue
+<style module>
+.red {
+  color: red;
+}
+.bold {
+  font-weight: bold;
+}
+</style>
+```
+
+Атрибут `module` подскажет Vue Loader о необходимости внедрить CSS модуль в компонент в качестве вычисляемого свойства с именем `$style`. Вы можете использовать его в шаблонах для динамического добавления классов:
+
+``` vue
+<template>
+  <p :class="$style.red">
+    Текст должен быть красным
+  </p>
+</template>
+```
+
+Поскольку это вычисляемое свойство, оно будет работать с объектом/массивом в `:class`:
+
+``` vue
+<template>
+  <div>
+    <p :class="{ [$style.red]: isRed }">
+      Буду ли я красным?
+    </p>
+    <p :class="[$style.red, $style.bold]">
+      Красный и жирный
+    </p>
+  </div>
+</template>
+```
+
+Вы также можете получить доступ в JavaScript:
+
+``` vue
+<script>
+export default {
+  created () {
+    console.log(this.$style.red)
+    // -> "red_1VyoJ-uZ"
+    // идентификатор генерируется на основе имени файла и className.
+  }
+}
+</script>
+```
+
+Обратитесь к [спецификации CSS-модулей](https://github.com/css-modules/css-modules) для получения информации о [глобальных исключениях](https://github.com/css-modules/css-modules#exceptions) и [композиции](https://github.com/css-modules/css-modules#composition).
+
+## Опциональное использование
+
+Если вы хотите использовать CSS модули только в некоторых компонентах Vue, вы можете использовать правило `oneOf` и проверять наличие строки `module` внутри `resourceQuery`:
+
+``` js
+// webpack.config.js -> module.rules
+{
+  test: /\.css$/,
+  oneOf: [
+    // это соответствует `<style module>`
+    {
+      resourceQuery: /module/,
+      use: [
+        'vue-style-loader',
+        {
+          loader: 'css-loader',
+          options: {
+            modules: true,
+            localIdentName: '[local]_[hash:base64:5]'
+          }
+        }
+      ]
+    },
+    // это соответствует простому `<style>` или `<style scoped>`
+    {
+      use: [
+        'vue-style-loader',
+        'css-loader'
+      ]
+    }
+  ]
+}
+```
+
+## Использование с пре-процессорами
+
+CSS модули могут быть использованы вместе с другими пре-процессорами:
+
+``` js
+// webpack.config.js -> module.rules
+{
+  test: /\.scss$/,
+  use: [
+    'vue-style-loader',
+    {
+      loader: 'css-loader',
+      options: { modules: true }
+    },
+    'sass-loader'
+  ]
+}
+```
+
+## Указание имени внедряемого модуля
+
+У вас может быть несколько тегов `<style>` в одном компоненте `*.vue`. Во избежание перезаписи внедряемых стилей вы можете указать имя внедряемого вычисляемого свойства в значении атрибута `module`:
+
+``` html
+<style module="a">
+  /* идентификатор будет внедрён как a */
+</style>
+
+<style module="b">
+  /* идентификатор будет внедрён как b */
+</style>
+```
diff --git a/docs/ru/guide/custom-blocks.md b/docs/ru/guide/custom-blocks.md
new file mode 100644
index 000000000..d2a5479f5
--- /dev/null
+++ b/docs/ru/guide/custom-blocks.md
@@ -0,0 +1,96 @@
+# Пользовательские блоки
+
+Вы можете определять пользовательские блоки внутри файлов `*.vue`. Загрузчики, применяемые к такому блоку, будут определяться сопоставлением по атрибуту `lang` блока, имени тега блока, и правил в вашей конфигурации webpack.
+
+Если указан атрибут `lang`, пользовательский блок будет обработан как файл с расширением, указанном в `lang`.
+
+Вы также можете использовать `resourceQuery` для определения правила для блока без атрибута `lang`. Например, для сопоставления пользовательского блока `<foo>`:
+
+``` js
+{
+  module: {
+    rules: [
+      {
+        resourceQuery: /blockType=foo/,
+        loader: 'loader-to-use'
+      }
+    ]
+  }
+}
+```
+
+Если для пользовательского блока будет найдено правило — он будет им обработан; в противном случае пользовательский блок будет тихо проигнорирован.
+
+Кроме того, если пользовательский блок экспортирует функцию в качестве конечного результата после обработки всеми соответствующими загрузчиками, то эта функция будет вызываться с компонентом файла `*.vue` в качестве параметра.
+
+## Пример
+
+Небольшой пример внедрения пользовательского блока `<docs>` в компонент таким образом, что он будет доступен во время выполнения.
+
+Для внедрения содержимого пользовательского блока мы напишем собственный загрузчик:
+
+``` js
+module.exports = function (source, map) {
+  this.callback(
+    null,
+    `export default function (Component) {
+      Component.options.__docs = ${
+        JSON.stringify(source)
+      }
+    }`,
+    map
+  )
+}
+```
+
+Настроим webpack использовать наш загрузчик для пользовательских блоков `<docs>`.
+
+``` js
+// wepback.config.js
+module.exports = {
+  module: {
+    rules: [
+      {
+        resourceQuery: /blockType=docs/,
+        loader: require.resolve('./docs-loader.js')
+      }
+    ]
+  }
+}
+```
+
+Теперь мы можем получить доступ к содержимому блока `<docs>` импортированного компонента на этапе выполнения.
+
+``` vue
+<!-- ComponentB.vue -->
+<template>
+  <div>Hello</div>
+</template>
+
+<docs>
+This is the documentation for component B.
+</docs>
+```
+
+``` vue
+<!-- ComponentA.vue -->
+<template>
+  <div>
+    <ComponentB/>
+    <p>{{ docs }}</p>
+  </div>
+</template>
+
+<script>
+import ComponentB from './ComponentB.vue';
+
+export default = {
+  components: { ComponentB },
+  data () {
+    return {
+      docs: ComponentB.__docs
+    }
+  }
+}
+</script>
+```
diff --git a/docs/ru/guide/extract-css.md b/docs/ru/guide/extract-css.md
new file mode 100644
index 000000000..94f61d36d
--- /dev/null
+++ b/docs/ru/guide/extract-css.md
@@ -0,0 +1,75 @@
+# Извлечение CSS в отдельный файл
+
+::: tip СОВЕТ
+Применяйте извлечение CSS в отдельный файл только в production, чтобы использовать горячую перезагрузку CSS на этапе разработки.
+:::
+
+## webpack 4
+
+``` bash
+npm install -D mini-css-extract-plugin
+```
+
+``` js
+// webpack.config.js
+var MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+module.exports = {
+  // другие настройки...
+  module: {
+    rules: [
+      // ... другие правила опущены
+      {
+        test: /\.css$/,
+        use: [
+          process.env.NODE_ENV !== 'production'
+            ? 'vue-style-loader'
+            : MiniCssExtractPlugin.loader,
+          'css-loader'
+        ]
+      }
+    ]
+  },
+  plugins: [
+    // ... плагин Vue Loader опущен
+    new MiniCssExtractPlugin({
+      filename: 'style.css'
+    })
+  ]
+}
+```
+
+Также смотрите [документацию mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).
+
+## webpack 3
+
+``` bash
+npm install -D extract-text-webpack-plugin
+```
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+  // другие настройки...
+  module: {
+    rules: [
+      // ... другие правила опущены
+      {
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract({
+          use: 'css-loader',
+          fallback: 'vue-style-loader'
+        })
+      }
+    ]
+  },
+  plugins: [
+    // ... плагин Vue Loader опущен
+    new ExtractTextPlugin("style.css")
+  ]
+}
+```
+
+Также смотрите [документацию extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin).
diff --git a/docs/ru/guide/functional.md b/docs/ru/guide/functional.md
new file mode 100644
index 000000000..421979506
--- /dev/null
+++ b/docs/ru/guide/functional.md
@@ -0,0 +1,21 @@
+# Функциональные компоненты
+
+Функциональные компоненты, объявленные как однофайловые компоненты в файле `*.vue`, также получают правильную поддержку компиляции шаблона, локальный CSS и поддержку горячей перезагрузки.
+
+Чтобы обозначить шаблон, который должен быть скомпилирован как функциональный компонент, добавьте атрибут `functional` в тег шаблона. Это также позволяет опустить опцию `functional` в теге `<script>`.
+
+Выражения в шаблоне исполняются в [контексте функционального рендеринга](https://ru.vuejs.org/v2/guide/render-function.html#Функциональные-компоненты). Это означает, что обращаться к входным параметрам в шаблоне следует через `props.xxx`:
+
+``` vue
+<template functional>
+  <div>{{ props.foo }}</div>
+</template>
+```
+
+Если вам необходимо получить доступ к свойствам, определённым глобально в `Vue.prototype`, вы можете получить к ним доступ через `parent`:
+
+``` vue
+<template functional>
+  <div>{{ parent.$someProperty }}</div>
+</template>
+```
diff --git a/docs/ru/guide/hot-reload.md b/docs/ru/guide/hot-reload.md
new file mode 100644
index 000000000..8fd59749a
--- /dev/null
+++ b/docs/ru/guide/hot-reload.md
@@ -0,0 +1,45 @@
+# Горячая перезагрузка
+
+"Горячая перезагрузка" это не просто обновление страницы, когда вы отредактируете файл. При использовании горячей перезагрузки, когда вы отредактируете `*.vue` файл, все экземпляры этого компонента будут заменены **без перезагрузки страницы**. При этом даже будет сохранено текущее состояние вашего приложения и заменяемых компонентов! Это значительно улучшает процесс разработки, особенно когда вы занимаетесь тонкой настройкой шаблонов или стилей ваших компонентов.
+
+![hot-reload](http://blog.evanyou.me/images/vue-hot.gif)
+
+## Правила сохранения состояния
+
+- При редактировании `<template>` компонента, экземпляры изменённого компонента будут повторно отрендерены, сохраняя всё текущее собственное состояние. Это возможно, потому что шаблоны компилируются в новые render-функции, которые не создают побочных эффектов.
+
+- При редактировании `<script>` компонента, экземпляры редактируемого компонента будут уничтожены и созданы заново (состояние других компонентов в приложении сохраняется). Это связано с тем, что `<script>` может включать в себя хуки жизненного цикла, которые могут создавать побочные эффекты, поэтому для обеспечения согласованности поведения требуется "перезагрузка", а не просто повторный рендеринг. Это также означает, что вам нужно быть осторожным в отношении глобальных побочных эффектов, например использования таймеров внутри хуков жизненного цикла компонентов. Иногда вам может потребоваться полная перезагрузка страницы, если ваш компонент создаёт глобальные побочные эффекты.
+
+- Горячая перезагрузка `<style>` работает самостоятельно через `vue-style-loader`, поэтому никак не затрагивает состояние приложения.
+
+## Использование
+
+При создании проекта с помощью `vue-cli`, горячая перезагрузка включена по умолчанию.
+
+При настройке проекта вручную горячая перезагрузка включится автоматически, когда вы запускаете ваш проект с помощью `webpack-dev-server --hot`.
+
+Продвинутые пользователи могут изучить [vue-hot-reload-api](https://github.com/vuejs/vue-hot-reload-api), который используется внутри `vue-loader`.
+
+## Отключение горячей перезагрузки
+
+Горячая перезагрузка всегда включена, за исключением следующих ситуаций:
+
+ * опция webpack `target` в значении `node` (SSR)
+ * webpack минифицирует код
+ * `process.env.NODE_ENV === 'production'`
+
+Вы можете использовать опцию `hotReload: false` для принудительного выключения горячей перезагрузки:
+
+``` js
+module: {
+  rules: [
+    {
+      test: /\.vue$/,
+      loader: 'vue-loader',
+      options: {
+        hotReload: false // отключает горячую перезагрузку
+      }
+    }
+  ]
+}
+```
diff --git a/docs/ru/guide/linting.md b/docs/ru/guide/linting.md
new file mode 100644
index 000000000..888ed8dde
--- /dev/null
+++ b/docs/ru/guide/linting.md
@@ -0,0 +1,45 @@
+# Статический анализ кода
+
+Официальный плагин [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) поддерживает проверку секций шаблона и кода в однофайловых компонентах Vue.
+
+Убедитесь, что используете поставляемую с плагином конфигурацию в вашей конфигурации ESLint:
+
+``` js
+// .eslintrc.js
+module.exports = {
+  extends: [
+    "plugin:vue/essential"
+  ]
+}
+```
+
+Затем в командной строке:
+
+``` bash
+eslint --ext js,vue MyComponent.vue
+```
+
+Другим вариантом использования будет [eslint-loader](https://github.com/MoOx/eslint-loader), что позволит проверять ваши `*.vue` файлы автоматически при сохранении на этапе разработки:
+
+``` bash
+npm install -D eslint eslint-loader
+```
+
+Убедитесь, что он применяется как предварительный загрузчик:
+
+``` js
+// webpack.config.js
+module.exports = {
+  // ... другие настройки
+  module: {
+    rules: [
+      {
+        enforce: 'pre',
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        exclude: /node_modules/
+      }
+    ]
+  }
+}
+```
diff --git a/docs/ru/guide/pre-processors.md b/docs/ru/guide/pre-processors.md
new file mode 100644
index 000000000..04c49ec96
--- /dev/null
+++ b/docs/ru/guide/pre-processors.md
@@ -0,0 +1,264 @@
+---
+sidebarDepth: 2
+---
+
+# Использование пре-процессоров
+
+В webpack все пре-процессоры должны обрабатываться соответствующими загрузчиками. `vue-loader` позволяет вам использовать другие загрузчики webpack для обработки секций в однофайловых компонентах Vue. Они будут автоматически вызваны на основе указанного атрибута `lang` у секции файла.
+
+## SASS
+
+Например, для компиляции нашего тега `<style>` с помощью SASS/SCSS:
+
+``` bash
+npm install -D sass-loader node-sass
+```
+
+В вашей конфигурации webpack:
+
+``` js
+module.exports = {
+  module: {
+    rules: [
+      // ... другие правила опущены
+
+      // это правило будет применяться к обычным файлам `.scss`
+      // А ТАКЖЕ к секциям `<style lang="scss">` в файлах `.vue`
+      {
+        test: /\.scss$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
+      }
+    ]
+  },
+  // плагин опущен
+}
+```
+
+Теперь, в дополнение к возможности писать `import 'style.scss'`, мы можем использовать SCSS также и в компонентах Vue:
+
+``` html
+<style lang="scss">
+/* используем SCSS здесь */
+</style>
+```
+
+Любое содержимое внутри блока будет обработано webpack, как если бы оно находилось внутри файла `*.scss`.
+
+### SASS vs SCSS
+
+Обратите внимание, что `sass-loader` обрабатывает синтаксис `scss` по умолчанию. Если вам требуется синтаксис `sass` с отступами, то необходимо передать опцию в загрузчик:
+
+``` js
+// webpack.config.js -> module.rules
+{
+  test: /\.sass$/,
+  use: [
+    'vue-style-loader',
+    'css-loader',
+    {
+      loader: 'sass-loader',
+      options: {
+        indentedSyntax: true
+      }
+    }
+  ]
+}
+```
+
+### Передача глобальных переменных
+
+`sass-loader` также поддерживает опцию `data`, которая позволяет вам передавать общие переменные во все обрабатываемые файлы без необходимости везде их явно импортировать:
+
+``` js
+// webpack.config.js -> module.rules
+{
+  test: /\.scss$/,
+  use: [
+    'vue-style-loader',
+    'css-loader',
+    {
+      loader: 'sass-loader',
+      options: {
+        // вы можете также указать файл, например `variables.scss`
+        data: `$color: red;`
+      }
+    }
+  ]
+}
+```
+
+## LESS
+
+``` bash
+npm install -D less less-loader
+```
+
+``` js
+// webpack.config.js -> module.rules
+{
+  test: /\.less$/,
+  use: [
+    'vue-style-loader',
+    'css-loader',
+    'less-loader'
+  ]
+}
+```
+
+## Stylus
+
+``` bash
+npm install -D stylus stylus-loader
+```
+
+``` js
+// webpack.config.js -> module.rules
+{
+  test: /\.styl(us)?$/,
+  use: [
+    'vue-style-loader',
+    'css-loader',
+    'stylus-loader'
+  ]
+}
+```
+
+## PostCSS
+
+::: tip СОВЕТ
+Vue Loader v15 больше не применяет трансформацию PostCSS по умолчанию. Вам необходимо использовать PostCSS через `postcss-loader`.
+:::
+
+``` bash
+npm install -D postcss-loader
+```
+
+``` js
+// webpack.config.js -> module.rules
+{
+  test: /\.css$/,
+  use: [
+    'vue-style-loader',
+    {
+      loader: 'css-loader',
+      options: { importLoaders: 1 }
+    },
+    'postcss-loader'
+  ]
+}
+```
+
+Конфигурация PostCSS может быть выполнена через `postcss.config.js` или опции `postcss-loader`. Подробнее можно прочитать в [документации postcss-loader](https://github.com/postcss/postcss-loader).
+
+`postcss-loader` может также применяться в комбинации с другими пре-процессорами, указанными выше.
+
+## Babel
+
+``` bash
+npm install -D babel-core babel-loader
+```
+
+``` js
+// webpack.config.js -> module.rules
+{
+  test: /\.js?$/,
+  loader: 'babel-loader'
+}
+```
+
+Конфигурация Babel может быть выполнена через `.babelrc` или опции `babel-loader`.
+
+### Исключение node_modules
+
+Обычная практика, указывать `exclude: /node_modules/` для правил транспиляции JS (например, `babel-loader`) которые применяются к файлам `.js`. Из-за изменений версии v15, если вы импортируете однофайловые компоненты SFC внутри `node_modules`, его секция `<script>` также будет исключена из транспиляции.
+
+Чтобы обеспечить транспиляцию JS для однофайловых компонентов Vue в `node_modules`, вам необходимо добавить для них исключение с помощью функции в опции exclude:
+
+``` js
+{
+  test: /\.js$/,
+  loader: 'babel-loader',
+  exclude: file => (
+    /node_modules/.test(file) &&
+    !/\.vue\.js/.test(file)
+  )
+}
+```
+
+## TypeScript
+
+``` bash
+npm install -D typescript ts-loader
+```
+
+``` js
+// webpack.config.js
+module.exports = {
+  resolve: {
+    // Добавляем `.ts` как обрабатываемое расширение.
+    extensions: ['.ts', '.js']
+  },
+  module: {
+    rules: [
+      // ... другие правила опущены
+      {
+        test: /\.ts$/,
+        loader: 'ts-loader',
+        options: { appendTsSuffixTo: [/\.vue$/] }
+      }
+    ]
+  },
+  // ... плагин опущен
+}
+```
+
+Конфигурация TypeScipt может быть выполнена через `tsconfig.json`. Также смотрите документацию для [ts-loader](https://github.com/TypeStrong/ts-loader).
+
+## Pug
+
+Обработка шаблонов несколько отличается, потому что большинство загрузчиков webpack для шаблонов, такие как `pug-loader`, возвращают функцию шаблона вместо скомпилированной строки HTML. Вместо использования `pug-loader` мы должны использовать загрузчик, который вернёт сырую строку HTML, например `pug-plain-loader`:
+
+``` bash
+npm install -D pug pug-plain-loader
+```
+
+``` js
+// webpack.config.js -> module.rules
+{
+  test: /\.pug$/,
+  loader: 'pug-plain-loader'
+}
+```
+
+Теперь вы можете писать:
+
+``` html
+<template lang="pug">
+div
+  h1 Hello world!
+</template>
+```
+
+Если вы также собираетесь импортировать файлы `.pug` как HTML-строки в JavaScript, вам нужно добавить в цепочку `raw-loader` после загрузчика пре-процессора. Обратите внимание, что добавление `raw-loader` сломает использование в компонентах Vue, поэтому потребуется два правила: одно для файлов Vue с использованием `resourceQuery`, другое (fallback) для импортов из JavaScript:
+
+``` js
+// webpack.config.js -> module.rules
+{
+  test: /\.pug$/,
+  oneOf: [
+    // это применяется к `<template lang="pug">` в компонентах Vue
+    {
+      resourceQuery: /^\?vue/,
+      use: ['pug-plain-loader']
+    },
+    // это применяется к импортам pug внутри JavaScript
+    {
+      use: ['raw-loader', 'pug-plain-loader']
+    }
+  ]
+}
+```
diff --git a/docs/ru/guide/scoped-css.md b/docs/ru/guide/scoped-css.md
new file mode 100644
index 000000000..ed361b17a
--- /dev/null
+++ b/docs/ru/guide/scoped-css.md
@@ -0,0 +1,75 @@
+# Локальный (scoped) CSS
+
+Когда у тега `<style>` есть атрибут `scoped`, то его CSS будет применяться только к элементам текущего компонента. Это похоже на инкапсуляцию стилей в Shadow DOM. Пользоваться ими можно с некоторыми оговорками, но зато не требуется никаких полифиллов. Это достигается за счёт использования PostCSS для преобразования следующего:
+
+``` html
+<style scoped>
+.example {
+  color: red;
+}
+</style>
+
+<template>
+  <div class="example">hi</div>
+</template>
+```
+
+В что-то подобное:
+
+``` html
+<style>
+.example[data-v-f3f3eg9] {
+  color: red;
+}
+</style>
+
+<template>
+  <div class="example" data-v-f3f3eg9>hi</div>
+</template>
+```
+
+## Использование локальных и глобальных стилей
+
+Вы можете использовать в компоненте локальные и глобальные стилей одновременно:
+
+``` html
+<style>
+/* глобальные стили */
+</style>
+
+<style scoped>
+/* локальные стили */
+</style>
+```
+
+## Корневой элемент дочернего компонента
+
+С помощью `scoped`, стили родительского компонента не будут влиять на содержимое дочерних компонентов. Тем не менее, корневой элемент дочернего компонента будет зависеть как от локального CSS из родительского элемента, так и от локального CSS дочернего. Это предусмотрено специально, чтобы родительский элемент мог стилизовать корневой элемент дочернего компонента например для целей стилизации.
+
+## Глубокие селекторы
+
+Если вы хотите, чтобы селектор в `scoped` стилях был "глубоким", т.е. влиял на дочерние компоненты, вы можете использовать комбинатор `>>>`:
+
+``` html
+<style scoped>
+.a >>> .b { /* ... */ }
+</style>
+```
+
+Указанное выше будет скомпилируется в подобный селектор:
+
+``` css
+.a[data-v-f3f3eg9] .b { /* ... */ }
+```
+
+Некоторые пре-процессоры, такие как SASS, не могут правильно обработать `>>>`. В таких случаях используйте комбинатор `/deep/` — это псевдоним для `>>>` работающий аналогично.
+
+## Динамически генерируемый контент
+
+DOM-содержимое, создаваемое с помощью `v-html` не попадает под область действия локальных стилей, но вы всё равно можете его стилизовать с помощью глубоких селекторов.
+
+## О чём следует помнить
+
+- **Локальные стили не устраняют необходимость классов.** Из-за того как браузеры рендерят различные CSS-селекторы, `p { color: red }` может быть в разы медленнее при использовании в локальных стилях (например, когда комбинируется с селектором по атрибуту). Если же вы используете классы или ID, такие как `.example { color: red }`, тогда вы практически полностью исключаете ухудшение производительности. [Вот пример](https://stevesouders.com/efws/css-selectors/csscreate.php) где можете проверить разницу самостоятельно.
+
+- **Будьте внимательны с селекторами потомков в рекурсивных компонентах!** Для CSS-правила с селектором `.a .b`, если элемент, который соответствует `.a` содержит рекурсивный компонент потомок, тогда все `.b` в этом компоненте потомке будут также соответствовать правилу.
diff --git a/docs/ru/guide/testing.md b/docs/ru/guide/testing.md
new file mode 100644
index 000000000..298bd94a5
--- /dev/null
+++ b/docs/ru/guide/testing.md
@@ -0,0 +1,5 @@
+# Тестирование
+
+- [Vue CLI](https://github.com/vuejs/vue-cli) предлагает вам готовые решения для модульного и e2e-тестирования.
+
+- Если вы заинтересованы в ручной настройке модульного тестирования для `*.vue` файлов, ознакомьтесь с [документацией для `@vue/test-utils`](https://vue-test-utils.vuejs.org/en/), которая описывает настройку тестов с помощью [mocha-webpack](https://vue-test-utils.vuejs.org/en/guides/testing-SFCs-with-mocha-webpack.html) или [Jest](https://vue-test-utils.vuejs.org/en/guides/testing-SFCs-with-jest.html).
diff --git a/docs/ru/migrating.md b/docs/ru/migrating.md
new file mode 100644
index 000000000..1eb0e5445
--- /dev/null
+++ b/docs/ru/migrating.md
@@ -0,0 +1,266 @@
+---
+sidebar: auto
+sidebarDepth: 2
+---
+
+# Миграция с версии v14
+
+::: tip Будьте внимательны
+Мы в процессе обновления Vue CLI 3 beta для использования webpack 4 + Vue Loader v15, поэтому вы можете захотеть подождать, если планируете переход на Vue CLI 3.
+:::
+
+## Важные изменения
+
+### Необходимо установить плагин
+
+Vue Loader v15 теперь для правильной работы требуется прилагаемый плагин webpack:
+
+``` js
+// webpack.config.js
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+
+module.exports = {
+  // ...
+  plugins: [
+    new VueLoaderPlugin()
+  ]
+}
+```
+
+### Определение загрузчиков webpack
+
+Vue Loader v15 теперь использует другую стратегию для определения загрузчиков, которые должны использоваться для языкового блока.
+
+Рассмотрим `<style lang="less">` для примера: в версии v14 и ниже, он попытается загрузить блок с помощью `less-loader`, и неявно добавляет в цепочку загрузчиков `css-loader` и `vue-style-loader` после него, используя инлайновые-строки с указанием загрузчиков.
+
+С версии v15, `<style lang="less">` будет вести себя так, как если бы это был загруженный файл `*.less` . Поэтому, чтобы обработать его, вам нужно предоставить явное правило в вашей основной конфигурации webpack:
+
+``` js
+{
+  module: {
+    rules: [
+      // ... другие правила
+      {
+        test: /\.less$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'less-loader'
+        ]
+      }
+    ]
+  }
+}
+```
+
+Преимущество состоит в том, что это же правило также применяется и к обычным импортам `*.less` из JavaScript, и вы можете конфигурировать опции для этих загрузчиков так как захотите. В версии v14 и ниже, если вы хотите предоставить пользовательские опции для предполагаемого загрузчика, то вам необходимо дублировать их в собственной опции `loaders` у Vue Loader. С версии v15 это больше не требуется.
+
+Версия v15 также позволяет использовать не-сериализуемые опции для загрузчиков, что было невозможно в предыдущих версиях.
+
+### Импорт однофайловых компонентов из зависимостей
+
+Обычная практика, указывать `exclude: /node_modules/` для правил транспиляции JS (например, `babel-loader`) которые применяются к файлам `.js`. Из-за изменения версии v15, если вы импортируете однофайловые компоненты SFC внутри `node_modules`, его секция `<script>` также будет исключена из транспиляции.
+
+Чтобы обеспечить транспиляцию JS для однофайловых компонентов Vue в `node_modules`, вам необходимо делать для них исключение с помощью функции в опции exclude:
+
+``` js
+{
+  test: /\.js$/,
+  loader: 'babel-loader',
+  exclude: file => (
+    /node_modules/.test(file) &&
+    !/\.vue\.js/.test(file)
+  )
+}
+```
+
+### Обработка секций шаблонов
+
+v14 и ниже использует [consolidate](https://github.com/tj/consolidate.js/) для компиляции `<template lang="xxx">`. v15 теперь обрабатывает их с помощью загрузчиков webpack.
+
+Обратите внимание, что некоторые загрузчики шаблонов, такие как `pug-loader` возвращают функцию шаблона вместо скомпилированной строки HTML. Для того чтобы передать корректное содержимое в компилятор шаблонов Vue, вам необходимо использовать загрузчики, которые вместо этого возвращают простой HTML. Например, для поддержки `<template lang="pug">`, вы можете использовать [pug-plain-loader](https://github.com/yyx990803/pug-plain-loader):
+
+``` js
+{
+  module: {
+    rules: [
+      {
+        test: /\.pug$/,
+        loader: 'pug-plain-loader'
+      }
+    ]
+  }
+}
+```
+
+Если вы также собираетесь импортировать файлы `.pug` как HTML-строки в JavaScript, вам нужно будет добавить в цепочку `raw-loader` после загрузчика пре-процессора. Обратите внимание, что добавление `raw-loader` сломает использование в компонентах Vue, поэтому вам потребуется два правила, одно направленное на файлы Vue с использованием `resourceQuery`, другое (fallback) нацеленное на импорты JavaScript:
+
+``` js
+{
+  module: {
+    rules: [
+      {
+        test: /\.pug$/,
+        oneOf: [
+          // это применяется к `<template lang="pug">` в компонентах Vue
+          {
+            resourceQuery: /^\?vue/,
+            use: ['pug-plain-loader']
+          },
+          // это применяется к импортам pug внутри JavaScript
+          {
+            use: ['raw-loader', 'pug-plain-loader']
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+### Внедрение стилей
+
+Внедрение стилей на стороне клиента теперь внедряет все стили заранее, чтобы обеспечить консистентное поведение между режимом разработки и режимом, когда CSS извлекается в отдельный файл.
+
+Обратите внимание, что порядок внедрения всё ещё не гарантируется, поэтому вам следует избегать написания CSS, который зависит от порядка внедрения.
+
+### PostCSS
+
+Vue Loader больше не применяет трансформацию PostCSS по умолчанию. Для использования PostCSS сконфигурирйте `postcss-loader` таким образом, как и для обычных CSS файлов.
+
+### CSS модули
+
+CSS модули теперь должны явно настраиваться через опцию `css-loader`. Атрибут `module` на тегах `<style>` по-прежнему необходим для локального внедрения в компонент.
+
+Хорошая новость в том, что теперь вы можете настраивать `localIdentName` в одном месте:
+
+``` js
+{
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'vue-style-loader'
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              localIdentName: '[local]_[hash:base64:8]'
+            }
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+Если вы хотите использовать CSS модули только в некоторых компонентах Vue, вы можете использовать правило `oneOf` и проверять наличие строки `module` внутри `resourceQuery`:
+
+``` js
+{
+  test: /\.css$/,
+  oneOf: [
+    // это соответствует `<style module>`
+    {
+      resourceQuery: /module/,
+      use: [
+        'vue-style-loader',
+        {
+          loader: 'css-loader',
+          options: {
+            modules: true,
+            localIdentName: '[local]_[hash:base64:5]'
+          }
+        }
+      ]
+    },
+    // это соответствует простому `<style>` или `<style scoped>`
+    {
+      use: [
+        'vue-style-loader',
+        'css-loader'
+      ]
+    }
+  ]
+}
+```
+
+## Извлечение CSS в отдельный файл
+
+Работает аналогично тому, как вы бы настроили его для обычного CSS. Пример использования с помощью [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin):
+
+``` js
+{
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: 'vue-loader'
+      },
+      {
+        test: /\.css$/,
+        // или `ExtractTextWebpackPlugin.extract(...)`
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader'
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'output.css'
+    })
+  ]
+}
+```
+
+## SSR externals
+
+В SSR, мы обычно используем `webpack-node-externals` для исключения npm-зависимостей из серверной сборки. Если вам необходимо импортировать CSS из npm-зависимости, то предыдущим решением было указать белый список, например так:
+
+``` js
+// конфигурация webpack
+externals: nodeExternals({
+  whitelist: /\.css$/
+})
+```
+
+С версии v15, импорты для `<style src="dep/foo.css">` получают строку `resourceQuery`, добавленную в конце запроса, поэтому вам потребуется обновить белый список так:
+
+``` js
+externals: nodeExternals({
+  whitelist: [/\.css$/, /\?vue&type=style/]
+})
+```
+
+## Устаревшие опции
+
+Следующие опции объявлены устаревшими и должны настраиваться с использованием обычных правил модулей webpack:
+
+- `loader`
+- `preLoaders`
+- `postLoaders`
+- `postcss`
+- `cssSourceMap`
+- `buble`
+- `extractCSS`
+- `template`
+
+Следующие опции объявлены устаревшими и должны настраиваться с помощью новой опции `compilerOptions`:
+
+- `preserveWhitespace` (используйте `compilerOptions.preserveWhitespace`)
+- `compilerModules` (используйте `compilerOptions.modules`)
+- `compilerDirectives` (используйте `compilerOptions.directives`)
+
+Следующие опции были переименованы:
+
+- `transformToRequire` (переименована в `transformAssetUrls`)
+
+:::tip СОВЕТ
+Полный список новых опций можно посмотреть [на странице настроек](./options.md).
+:::
diff --git a/docs/ru/options.md b/docs/ru/options.md
new file mode 100644
index 000000000..827e0c5a7
--- /dev/null
+++ b/docs/ru/options.md
@@ -0,0 +1,83 @@
+---
+sidebar: auto
+---
+
+# Настройки
+
+## transformAssetUrls
+
+- Тип: `{ [tag: string]: string | Array<string> }`
+- По умолчанию:
+
+  ``` js
+  {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+  ```
+
+  Во время компиляции шаблона, компилятор может преобразовывать определённые атрибуты, такие как URL-адреса в `src`, в вызовы `require`, чтобы указанный ресурс обрабатывался с помощью webpack. Например, `<img src="./foo.png">` будет пытаться найти файл `./foo.png` в вашей файловой системе и добавит его как зависимость сборки.
+
+## compiler
+
+- Тип: `VueTemplateCompiler`
+- По умолчанию: `require('vue-template-compiler')`
+
+  Переопределение компилятора по умолчанию, используемого для компиляции секций `<template>` в однофайловых компонентах.
+
+## compilerOptions
+
+- Тип: `Object`
+- По умолчанию: `{}`
+
+  Настройки для компилятора шаблонов. При использовании по умолчанию `vue-template-compiler` вы можете использовать эту опцию чтобы добавить пользовательские директивы компилятора, модули, или с помощью `{ preserveWhitespace: false }` игнорировать пробелы между тегами.
+
+  Подробнее в [перечне опций `vue-template-compiler`](https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#options).
+
+## transpileOptions
+
+- Тип: `Object`
+- По умолчанию: `{}`
+
+  Опции транспиляции ES2015+ в ES5 для генерируемого кода render-функций. [Транспилятор](https://github.com/vuejs/vue-template-es2015-compiler) — форк [Buble](https://github.com/Rich-Harris/buble), поэтому полный список опций вы можете посмотреть [здесь](https://buble.surge.sh/guide/#using-the-javascript-api).
+
+  Компиляция render-функций шаблонов поддерживает специальную трансформацию `stripWith` (включена по умолчанию), которая удаляет использование `with` в сгенерированных render-функциях, чтобы сделать их совместимыми со strict-режимом.
+
+## optimizeSSR
+
+- Тип: `boolean`
+- По умолчанию: `true` когда конфигурация webpack имеет свойство `target: 'node'` и версия `vue-template-compiler` 2.4.0 или выше.
+
+  Включает оптимизацию для серверного рендеринга в Vue 2.4, которая компилирует в простые строки часть деревьев vdom, возвращаемых render-функциями, что улучшает производительность серверного рендеринга. В некоторых случаях вам может потребоваться явно отключить оптимизацию, поскольку результирующие render-функции могут быть использованы только для серверного рендеринга и не могут использоваться для рендеринга на стороне клиента или тестирования.
+
+## hotReload
+
+- Тип: `boolean`
+- По умолчанию: `true` в режиме разработки, `false` в режиме production или при установленной опции `target: 'node'` в конфигурации webpack.
+- Разрешённые значения: `false` (`true` не заставит работать горячую перезагрузку ни в режиме production, ни когда `target: 'node'`)
+
+  Возможность webpack по [горячей перезагрузке модулей](https://webpack.js.org/concepts/hot-module-replacement/) позволяет применять изменения в браузере **без необходимости обновления страницы**.
+  Используйте эту опцию (со значением `false`) чтобы отключить горячую перезагрузку в режиме разработки.
+
+## productionMode
+
+- Тип: `boolean`
+- По умолчанию: `process.env.NODE_ENV === 'production'`
+
+Позволяет принудительно включить режим production, который исключит из сборки код, необходимый только на этапе разработки (например, горячую перезагрузку модулей).
+
+## shadowMode
+
+- Тип: `boolean`
+- По умолчанию: `false`
+
+Компилирует компонент для использования внутри Shadow DOM. В этом режиме стили компонента внедряются в `this.$root.$options.shadowRoot` вместо head-тега документа.
+
+## cacheDirectory / cacheIdentifier
+
+- Тип: `string`
+- По умолчанию: `undefined`
+
+Когда указаны оба параметра, включает кэширование в файловой системе скомпилированных шаблонов (требуется, чтобы `cache-loader` был установлен в том же проекте).
diff --git a/docs/ru/spec.md b/docs/ru/spec.md
new file mode 100644
index 000000000..25ff17172
--- /dev/null
+++ b/docs/ru/spec.md
@@ -0,0 +1,127 @@
+---
+title: Однофайловые компоненты Vue
+sidebar: auto
+---
+
+# Однофайловые компоненты Vue
+
+## Введение
+
+Файл `*.vue` это собственный формат Vue, использующий HTML-подобный синтаксис для описания компонента. Каждый `*.vue` файл состоит из трёх главных секций: `<template>`, `<script>` и `<style>`, а также опциональных пользовательских блоков:
+
+``` vue
+<template>
+  <div class="example">{{ msg }}</div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'Hello world!'
+    }
+  }
+}
+</script>
+
+<style>
+.example {
+  color: red;
+}
+</style>
+
+<custom1>
+  Это может быть, например, документация для компонента
+</custom1>
+```
+
+`vue-loader` парсит файл, извлекает каждую из секций, обрабатывает их при необходимости другими загрузчиками webpack, и в итоге собирает всё обратно в ES-модуль где экспорт по умолчанию будет объектом настроек компонента Vue.js.
+
+`vue-loader` предоставляет возможность использовать нестандартные языки, например пре-процессоры CSS и языки шаблонов компилируемые в HTML, указывая атрибут `lang` для секции файла. Например, вы можете использовать SASS для стилей вашего компонента:
+
+``` vue
+<style lang="sass">
+  /* используем SASS! */
+</style>
+```
+
+Подробнее на странице [использования пре-процессоров](./guide/pre-processors.md).
+
+## Секции файла
+
+### Шаблон (template)
+
+- Каждый `*.vue` файл может содержать максимум один блок `<template>`.
+
+- Содержимое извлекается, передаётся в `vue-template-compiler`, где предварительно будет скомпилировано в JavaScript render-функции, и наконец внедряется в описываемый компонент в секции `<script>`.
+
+### Логика (script)
+
+- Каждый `*.vue` файл может содержать максимум один блок `<script>`.
+
+- Секция исполняется как ES-модуль.
+
+- **Экспорт по умолчанию** должен быть [объектом опций компонента](https://ru.vuejs.org/v2/api/index.html#%D0%9E%D0%BF%D1%86%D0%B8%D0%B8-%E2%80%94-%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5) Vue.js. Экспортирование расширенного конструктора, созданного с помощью `Vue.extend()` также поддерживается, но обычный объект предпочтителен.
+
+- Любые правила webpack, которые совпадут с форматом `.js` файлов (или расширения, указанного в атрибуте `lang`) также будут применены к содержимому блока `<script>`.
+
+### Стили (style)
+
+- По умолчанию считается: `/\.css$/`.
+
+- Может быть несколько тегов `<style>` в одном `*.vue` файле.
+
+- Тег `<style>` может иметь атрибуты `scoped` или `module` (подробнее — [Локальный (scoped) CSS](./guide/scoped-css.md) и [CSS модули](./guide/css-modules.md)) для возможности инкапсулировать стили в текущий компонент. Несколько тегов `<style>` с разными режимами инкапсуляции могут быть использованы в одном компоненте.
+
+- Любые правила webpack, которые совпадут с форматом `.css` файлов (или расширения, указанного в атрибуте `lang`) также будут применены к содержимому блока `<style>`.
+
+### Пользовательские блоки
+
+Дополнительные пользовательские блоки могут быть добавлены в `*.vue` файл для любых потребностей проекта, например блок `<docs>`. `vue-loader` будет использовать имя тега для определения какими загрузчиками webpack требуется обрабатывать содержимое этой секции. Загрузчики webpack должны быть указаны в секции `loaders` настроек `vue-loader`.
+
+Подробнее в разделе [пользовательских блоков](./guide/custom-blocks.md).
+
+### Импорты из других файлов
+
+Если вы предпочитаете разделять `*.vue` компоненты на несколько файлов, вы можете использовать атрибут `src` для импорта содержимого другого файла в секцию, например:
+
+``` vue
+<template src="./template.html"></template>
+<style src="./style.css"></style>
+<script src="./script.js"></script>
+```
+
+Обратите внимание, что импорты через `src` следуют тем же правилам webpack по разрешению путей к модулям, что означает:
+
+- Относительные пути должны начинаться с `./`
+- Вы можете импортировать ресурсы из npm-зависимостей:
+
+``` vue
+<!-- импорт файла из установленного npm-пакета "todomvc-app-css" -->
+<style src="todomvc-app-css/index.css">
+```
+
+`src` импорты также работают с пользовательскими блоками, например:
+
+``` vue
+<unit-test src="./unit-test.js">
+</unit-test>
+```
+
+## Подсветка синтаксиса / поддержка IDE
+
+На данный момент есть поддержка подсветки синтаксиса для следующих IDE/редакторов:
+
+- [Sublime Text](https://github.com/vuejs/vue-syntax-highlight)
+- [VS Code](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
+- [Atom](https://atom.io/packages/language-vue)
+- [Vim](https://github.com/posva/vim-vue)
+- [Emacs](https://github.com/AdamNiederer/vue-mode)
+- [Brackets](https://github.com/pandao/brackets-vue)
+- [JetBrains IDE](https://plugins.jetbrains.com/plugin/8057) (WebStorm, PhpStorm, и т.п.)
+
+Будем рады видеть разработки и для других редакторов и IDE! Если вы не используете никаких пре-процессоров в компонентах Vue, вы также можете использовать синтаксис HTML в вашем редакторе для `*.vue` файлов.
+
+## Комментарии
+
+Внутри каждой секции вы можете использовать синтаксис комментариев, который соответствует используемому языку (HTML, CSS, JavaScript, Pug, и т.д.). Для комментариев на уровне секций, используйте синтаксис комментариев HTML: `<!-- ваш комментарий -->`

From cf57551fb7d8d8caad1079097c5aeed208bf2019 Mon Sep 17 00:00:00 2001
From: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com>
Date: Fri, 25 May 2018 09:43:09 +0300
Subject: [PATCH 02/11] custom-block.md example fix

---
 docs/ru/guide/custom-blocks.md | 38 ++++++++++++++++------------------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/docs/ru/guide/custom-blocks.md b/docs/ru/guide/custom-blocks.md
index d2a5479f5..3c3bb5758 100644
--- a/docs/ru/guide/custom-blocks.md
+++ b/docs/ru/guide/custom-blocks.md
@@ -6,15 +6,15 @@
 
 Вы также можете использовать `resourceQuery` для определения правила для блока без атрибута `lang`. Например, для сопоставления пользовательского блока `<foo>`:
 
-``` js
+```js
 {
   module: {
     rules: [
       {
         resourceQuery: /blockType=foo/,
-        loader: 'loader-to-use'
+        loader: "loader-to-use"
       }
-    ]
+    ];
   }
 }
 ```
@@ -29,39 +29,37 @@
 
 Для внедрения содержимого пользовательского блока мы напишем собственный загрузчик:
 
-``` js
-module.exports = function (source, map) {
+```js
+module.exports = function(source, map) {
   this.callback(
     null,
     `export default function (Component) {
-      Component.options.__docs = ${
-        JSON.stringify(source)
-      }
+      Component.options.__docs = ${JSON.stringify(source)}
     }`,
     map
-  )
-}
+  );
+};
 ```
 
 Настроим webpack использовать наш загрузчик для пользовательских блоков `<docs>`.
 
-``` js
+```js
 // wepback.config.js
 module.exports = {
   module: {
     rules: [
       {
         resourceQuery: /blockType=docs/,
-        loader: require.resolve('./docs-loader.js')
+        loader: require.resolve("./docs-loader.js")
       }
     ]
   }
-}
+};
 ```
 
 Теперь мы можем получить доступ к содержимому блока `<docs>` импортированного компонента на этапе выполнения.
 
-``` vue
+```vue
 <!-- ComponentB.vue -->
 <template>
   <div>Hello</div>
@@ -72,7 +70,7 @@ This is the documentation for component B.
 </docs>
 ```
 
-``` vue
+```vue
 <!-- ComponentA.vue -->
 <template>
   <div>
@@ -82,15 +80,15 @@ This is the documentation for component B.
 </template>
 
 <script>
-import ComponentB from './ComponentB.vue';
+import ComponentB from "./ComponentB.vue";
 
-export default = {
+export default {
   components: { ComponentB },
-  data () {
+  data() {
     return {
       docs: ComponentB.__docs
-    }
+    };
   }
-}
+};
 </script>
 ```

From f2e38525fca2af20ded1bf3e6addb7aa85acae05 Mon Sep 17 00:00:00 2001
From: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com>
Date: Fri, 25 May 2018 18:33:23 +0300
Subject: [PATCH 03/11] fix link

---
 docs/ru/spec.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ru/spec.md b/docs/ru/spec.md
index 25ff17172..0bb890b77 100644
--- a/docs/ru/spec.md
+++ b/docs/ru/spec.md
@@ -61,7 +61,7 @@ export default {
 
 - Секция исполняется как ES-модуль.
 
-- **Экспорт по умолчанию** должен быть [объектом опций компонента](https://ru.vuejs.org/v2/api/index.html#%D0%9E%D0%BF%D1%86%D0%B8%D0%B8-%E2%80%94-%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5) Vue.js. Экспортирование расширенного конструктора, созданного с помощью `Vue.extend()` также поддерживается, но обычный объект предпочтителен.
+- **Экспорт по умолчанию** должен быть [объектом опций компонента](https://ru.vuejs.org/v2/api/index.html#Опции-—-данные) Vue.js. Экспортирование расширенного конструктора, созданного с помощью `Vue.extend()` также поддерживается, но обычный объект предпочтителен.
 
 - Любые правила webpack, которые совпадут с форматом `.js` файлов (или расширения, указанного в атрибуте `lang`) также будут применены к содержимому блока `<script>`.
 

From a2e38885a49f9aecd49922292061abd89213287a Mon Sep 17 00:00:00 2001
From: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com>
Date: Sat, 2 Jun 2018 00:08:48 +0300
Subject: [PATCH 04/11] =?UTF-8?q?options.md=20=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/ru/options.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/ru/options.md b/docs/ru/options.md
index 827e0c5a7..edbcf80dc 100644
--- a/docs/ru/options.md
+++ b/docs/ru/options.md
@@ -81,3 +81,7 @@ sidebar: auto
 - По умолчанию: `undefined`
 
 Когда указаны оба параметра, включает кэширование в файловой системе скомпилированных шаблонов (требуется, чтобы `cache-loader` был установлен в том же проекте).
+
+::: tip СОВЕТ
+  Взаимодействие между `vue-loader` и `cache-loader` использует [инлайновый синтаксис импорта загрузчиков](https://webpack.js.org/concepts/loaders/#inline) внутри, где символ `!` будет рассматриваться как разделитель между различными загрузчиками. Поэтому убедитесь, что `cacheDirectory` не содержит символов `!`.
+:::

From b34394db0c621047639c46357070bf9f9ec91a54 Mon Sep 17 00:00:00 2001
From: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com>
Date: Sat, 9 Jun 2018 00:25:04 +0300
Subject: [PATCH 05/11] testing.md fix links

---
 docs/ru/guide/testing.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ru/guide/testing.md b/docs/ru/guide/testing.md
index 298bd94a5..059c5d9b0 100644
--- a/docs/ru/guide/testing.md
+++ b/docs/ru/guide/testing.md
@@ -2,4 +2,4 @@
 
 - [Vue CLI](https://github.com/vuejs/vue-cli) предлагает вам готовые решения для модульного и e2e-тестирования.
 
-- Если вы заинтересованы в ручной настройке модульного тестирования для `*.vue` файлов, ознакомьтесь с [документацией для `@vue/test-utils`](https://vue-test-utils.vuejs.org/en/), которая описывает настройку тестов с помощью [mocha-webpack](https://vue-test-utils.vuejs.org/en/guides/testing-SFCs-with-mocha-webpack.html) или [Jest](https://vue-test-utils.vuejs.org/en/guides/testing-SFCs-with-jest.html).
+- Если вы заинтересованы в ручной настройке модульного тестирования для `*.vue` файлов, ознакомьтесь с [документацией для `@vue/test-utils`](https://vue-test-utils.vuejs.org/), которая описывает настройку тестов с помощью [mocha-webpack](https://vue-test-utils.vuejs.org/guides/testing-SFCs-with-mocha-webpack.html) или [Jest](https://vue-test-utils.vuejs.org/guides/testing-SFCs-with-jest.html).

From d56e268341e5e6a6833f54419e8b4290dd0dfffa Mon Sep 17 00:00:00 2001
From: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com>
Date: Fri, 7 Dec 2018 12:59:33 +0300
Subject: [PATCH 06/11] linting.md fix link

---
 docs/ru/guide/linting.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ru/guide/linting.md b/docs/ru/guide/linting.md
index c8c044333..4825522d9 100644
--- a/docs/ru/guide/linting.md
+++ b/docs/ru/guide/linting.md
@@ -2,7 +2,7 @@
 
 ## ESLint
 
-Официальный плагин [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) поддерживает проверку секций шаблона и кода в однофайловых компонентах Vue.
+Официальный плагин [eslint-plugin-vue](https://vuejs.github.io/eslint-plugin-vue/) поддерживает проверку секций шаблона и кода в однофайловых компонентах Vue.
 
 Убедитесь, что используете поставляемую с плагином конфигурацию в вашей конфигурации ESLint:
 

From dca2e5aa3e1b4443c5b7d3351c29ee1d9550439a Mon Sep 17 00:00:00 2001
From: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com>
Date: Wed, 9 Jan 2019 23:46:45 +0300
Subject: [PATCH 07/11] options.md added new section

---
 docs/ru/options.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/docs/ru/options.md b/docs/ru/options.md
index edbcf80dc..35d9f2b32 100644
--- a/docs/ru/options.md
+++ b/docs/ru/options.md
@@ -85,3 +85,10 @@ sidebar: auto
 ::: tip СОВЕТ
   Взаимодействие между `vue-loader` и `cache-loader` использует [инлайновый синтаксис импорта загрузчиков](https://webpack.js.org/concepts/loaders/#inline) внутри, где символ `!` будет рассматриваться как разделитель между различными загрузчиками. Поэтому убедитесь, что `cacheDirectory` не содержит символов `!`.
 :::
+
+## prettify
+
+- Тип: `boolean`
+- По умолчанию: `true`
+
+В режиме разработки по умолчанию используется [prettier](https://prettier.io/) для форматирования скомпилированной render-функции для удобства отладки. Однако, если вы столкнётесь с какой-либо непонятной ошибкой самого prettier, такой как [экспоненциальное время компиляции для глубоко вложенных функций](https://github.com/prettier/prettier/issues/4672), можно отключить эту опцию.

From 5683ef65af6fe3ee53389b72c89d652f9728ef61 Mon Sep 17 00:00:00 2001
From: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com>
Date: Sun, 27 Jan 2019 11:50:37 +0300
Subject: [PATCH 08/11] options.md add exposeFilename

---
 docs/ru/options.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/docs/ru/options.md b/docs/ru/options.md
index 35d9f2b32..5c5fc7e7d 100644
--- a/docs/ru/options.md
+++ b/docs/ru/options.md
@@ -92,3 +92,12 @@ sidebar: auto
 - По умолчанию: `true`
 
 В режиме разработки по умолчанию используется [prettier](https://prettier.io/) для форматирования скомпилированной render-функции для удобства отладки. Однако, если вы столкнётесь с какой-либо непонятной ошибкой самого prettier, такой как [экспоненциальное время компиляции для глубоко вложенных функций](https://github.com/prettier/prettier/issues/4672), можно отключить эту опцию.
+
+## exposeFilename
+
+- Тип: `boolean`
+- По умолчанию: `false`
+
+В не-production окружениях vue-loader внедряет свойство `__file` в компоненты для улучшения отладки. Если свойство `name` отсутствует в компоненте, Vue будет использовать значение из `__file` для отображения предупреждений в консоли.
+
+Это свойство удаляется из сборки для production по умолчанию. Но вы можете сохранить его, если вы разрабатываете библиотеку компонентов и не хотите указывать `name` в каждом компоненте. В таком случае вы можете включить эту опцию.

From 75cb51cc8146f4159192cb88d55ac3beb2052df7 Mon Sep 17 00:00:00 2001
From: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com>
Date: Sun, 27 Jan 2019 11:57:37 +0300
Subject: [PATCH 09/11] guide/README.md update

---
 docs/ru/guide/README.md | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/docs/ru/guide/README.md b/docs/ru/guide/README.md
index 48e9eea3d..82dade609 100644
--- a/docs/ru/guide/README.md
+++ b/docs/ru/guide/README.md
@@ -6,7 +6,21 @@
 
 Следуйте этому руководству, если встроенная конфигурация Vue CLI не подходит для ваших нужд, или вы предпочитаете создавать собственную конфигурацию webpack с нуля.
 
-## Конфигурация вручную
+## Настройка вручную
+
+### Установка
+
+Если вы не продвинутый пользователь, использующий собственную форкнутую версию компилятора шаблонов Vue, то должны установить `vue-loader` и `vue-template-compiler` вместе:
+
+``` bash
+npm install -D vue-loader vue-template-compiler
+```
+
+Причина, по которой `vue-template-compiler` требуется устанавливать отдельно в том, что можно отдельно указать его версию.
+
+Каждый раз, когда выходит новая версия `vue`, выпускается и соответствующая версия `vue-template-compiler`. Версия компилятора должна быть аналогичной версии базового пакета `vue`, чтобы `vue-loader` генерировал код совместимый с runtime. Поэтому **каждый раз, когда вы обновляете `vue` в проекте, вы должны также обновить и `vue-template-compiler` до такой же версии.**
+
+ ### Конфигурация webpack
 
 Конфигурация Vue Loader немного отличается от настройки других загрузчиков. В дополнении к правилу, которое будет применять `vue-loader` ко всем файлам с расширением `.vue`, убедитесь что добавили плагин Vue Loader в вашу конфигурацию webpack:
 

From c2d0c5d2a30d3311f27d468a95ab7cf9d9218d2c Mon Sep 17 00:00:00 2001
From: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com>
Date: Thu, 31 Jan 2019 17:00:41 +0300
Subject: [PATCH 10/11] =?UTF-8?q?README.md=20=D0=BE=D0=B1=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=BB=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/guide/README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/ru/guide/README.md b/docs/ru/guide/README.md
index 82dade609..07d33314f 100644
--- a/docs/ru/guide/README.md
+++ b/docs/ru/guide/README.md
@@ -86,3 +86,7 @@ module.exports = {
 ```
 
 Также смотрите [перечень настроек](../options.md), где перечислены все доступные опции загрузчика.
+
+::: warning ВНИМАНИЕ
+При разработке библиотеки или работе в монорепозитории, имейте ввиду, что импорты CSS **являются сайд-эффектами**. Убедитесь, что **удалили** `"sideEffects": false` в `package.json`, в противном случае фрагменты CSS будут удалены webpack в сборках для production.
+:::

From 58fb1aaebd30ab9a1a3ff3983f8a4bcfc1a63f50 Mon Sep 17 00:00:00 2001
From: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com>
Date: Mon, 25 Mar 2019 12:07:52 +0300
Subject: [PATCH 11/11] docs: [RU] update

---
 docs/ru/guide/scoped-css.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/ru/guide/scoped-css.md b/docs/ru/guide/scoped-css.md
index ed361b17a..43ffee686 100644
--- a/docs/ru/guide/scoped-css.md
+++ b/docs/ru/guide/scoped-css.md
@@ -62,7 +62,7 @@
 .a[data-v-f3f3eg9] .b { /* ... */ }
 ```
 
-Некоторые пре-процессоры, такие как SASS, не могут правильно обработать `>>>`. В таких случаях используйте комбинатор `/deep/` — это псевдоним для `>>>` работающий аналогично.
+Некоторые пре-процессоры, такие как SASS, не могут правильно обработать `>>>`. В таких случаях используйте комбинатор `/deep/` или `::v-deep` — оба псевдонимы для `>>>` и работают аналогично.
 
 ## Динамически генерируемый контент