docs: Russian translation moved to VuePress (#1310)

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'
+        ]
       }
     }
   }

docs/ru/README.md

+# Введение
+
+:::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.

docs/ru/guide/README.md

+# Начало работы
+
+## 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), где перечислены все доступные опции загрузчика.

docs/ru/guide/asset-url.md

+# Обработка вложенных 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`.

docs/ru/guide/css-modules.md

+# 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>
+```

docs/ru/guide/custom-blocks.md

+# Пользовательские блоки
+
+Вы можете определять пользовательские блоки внутри файлов `*.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>
+```

docs/ru/guide/extract-css.md

+# Извлечение 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).

docs/ru/guide/functional.md

+# Функциональные компоненты
+
+Функциональные компоненты, объявленные как однофайловые компоненты в файле `*.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>
+```

docs/ru/guide/hot-reload.md

+# Горячая перезагрузка
+
+"Горячая перезагрузка" это не просто обновление страницы, когда вы отредактируете файл. При использовании горячей перезагрузки, когда вы отредактируете `*.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 // отключает горячую перезагрузку
+      }
+    }
+  ]
+}
+```

docs/ru/guide/linting.md

+# Статический анализ кода
+
+Официальный плагин [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/
+      }
+    ]
+  }
+}
+```

docs/ru/guide/pre-processors.md

+---
+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']
+    }
+  ]
+}
+```

docs/ru/guide/scoped-css.md

+# Локальный (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` в этом компоненте потомке будут также соответствовать правилу.

docs/ru/guide/testing.md

+# Тестирование
+
+- [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).

docs/ru/options.md

+---
+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` был установлен в том же проекте).

docs/ru/spec.md

+---
+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#Опции-—-данные) 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: `<!-- ваш комментарий -->`