docs: Russian translation moved to VuePress (#1310)

Author: Alex-Sokolov

Diff for: 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 for: 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 for: 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 for: 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 for: 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>
+```