Skip to content

Commit 3414e3a

Browse files
gbezyukkazupon
authored andcommitted
[DONE][Just Merge Me][Community Translation] Russian Docs Translation (#587)
* - Initial commit * - Добавлен русский в LANGS.md * - extract-css переведён * - postcss.md переведён * - setup.md переведён * - scoped-css.md частично переведён * - options.md переведён не до конца * - es2015.md частичный перевод * - README.md переведены заголовки * - advanced.md частичный перевод * - hot-reload.md переведён * - pre-processors.md частичный перевод * - css-modules.md частичный перевод * - SUMMARY.md * - options.md * spec.md * - es2015.md переведен * - css-modules.md переведен * - scoped-css.md переведен * - advanced.md переведен * - pre-processor.md частично переведен * - Мелкая правка в spec.md * - asset-url частично переведен * - pre-processors допереведен * - asset-url переведен * Translated README.md, testing.md and testing-with-mocks.md (first approach) * Readme reading fixes * Fixed 'powerful' translation in README.md and some punctuation in testing-with-mocks.md * Fixed ndashes in definitions * Review fixes * Minor fix for README.md * Added a paragraph about mocks and replaced "mock" with "mock-object" * Punctuation fixes for testing-with-mocks.md * Added translation to production.md * Translated linting.md * Removed archaic expression * - README.md добавлена новая строка (пока не переведено) * - advanced.md добавленения для конфига Webpack 2 * - spec.md добавлены пользовательские секции vue-файлов * - extract-css правка версии вебпака * advanced.md правка версии вебпака + примеров * - spec.md сокращен раздел о пользовательских блоках * - Добавлены пользовательские блоки в оглавление * - custom-blocks.md добавлен и переведен новый раздел * - custom-block.md обновление к новой версии vue-loader * - css-modules.md переведён заголовок * - summary.md приведены ссылок в соответствие с заголовками в файлах * - extract-css.md Webpack 2 перенесен выше * - options.md Webpack 2 вынесен в начало. Добавлены упоминания preLoader & postLoaders * - advanced.md Webpack 2 поставлен раньше. Добавлены упоминания preLoaders & postLoaders * - extract-css исправления для extract-text-webpack-plugin второй версии * - PostCSS.md добавлена секция про поддержку файлов конфигов * - Доработки по postcss * - options.md допереведено
1 parent f99c329 commit 3414e3a

20 files changed

+1310
-2
lines changed

docs/LANGS.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
* [English](en/)
2-
* [Português](pt/)
3-
* [한국어](kr/)
2+
* [한국어](kr/)
3+
* [Русский](ru/)
4+
* [Português](pt/)

docs/ru/README.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Введение
2+
3+
### Что такое `vue-loader`?
4+
5+
`vue-loader` – это загрузчик для Webpack, который преобразует Vue компоненты, написанные в следующем формате в обычные JavaScript модули:
6+
7+
![screenshot](http://blog.evanyou.me/images/vue-component.png)
8+
9+
`vue-loader` предлагает множество полезных возможностей:
10+
11+
- Поддержка ES2015 по умолчанию;
12+
- Позволяет использовать разные загрузчики Webpack для разных частей Vue компонента, например, SASS для `<style>` и Jade для `<template>`;
13+
- Позволяет использовать пользовательские секции во .vue-файлах, применяя к ним пользовательские цепочки загрузчиков
14+
- Обращается со статическими ресурсами, указанными в `<style>` и `<template>`, как с зависимостями модуля, и обрабатывает их Webpack загрузчиками;
15+
- Может эмулировать scoped CSS для компонентов;
16+
- Поддерживает горячую замену модулей.
17+
18+
В двух словах, сочетание Webpack и `vue-loader` предоставляет вам современный, гибкий и невероятно эффективный подход к написанию клиентских приложений на Vue.js.
19+
20+
### Что такое Webpack?
21+
22+
Если вы уже знакомы с Webpack, можете пропустить дальнейшее объяснение. Для тех же, кому Webpack в новинку, вот краткая вводная:
23+
24+
[Webpack](http://webpack.github.io/) – это сборщик модулей. Он берёт кучу файлов, рассматривая каждый как модуль, разрешает зависимости между ними и собирает их в статические ресурсы, готовые к развёртыванию.
25+
26+
![webpack](http://webpack.github.io/assets/what-is-webpack.png)
27+
28+
В качестве простого примера, представим, что у нас есть набор модулей CommonJS. Они не могут запускаться прямо в браузере, так что нам нужно "собрать" их в единый файл, который можно будет вставить на страницу через тег `<script>`. Webpack может сделать это за нас, следуя инструкциям `require()`.
29+
30+
Но Webpack может делать и больше. С "загрузчиками", мы можем научить Webpack преобразовывать любые типы файлов любым нужным нам образом, прежде чем выдать финальную сборку. Например:
31+
32+
- Скомпилировать ES2015, CoffeeScript или TypeScript модули в обычные ES5 CommonJS модули;
33+
- Пропустить код через статический анализатор, прежде чем приступать к компиляции;
34+
- Скомпилировать Jade шаблоны в обычный HTML и добавить его на страницу в виде строки JavaScript;
35+
- Скомпилировать SASS файлы в обычный CSS, затем конвертировать его в JS скрипт, который будет добавлять полученный CSS как тег `<style>`;
36+
- Обработать файлы изображений, указанные в HTML или CSS, переместить их в нужное место, согласно файлу конфигурации, и переименовать, используя их md5 хеш.
37+
38+
Webpack настолько крут, что когда вы поймете, как он работает, он значительно улучшит ваш процесс разработки клиентской части. Его основным недостатком является многословная и сложная конфигурация; но с этим руководством вы сможете найти решения для большинства задач, возникающих при работе с Webpack в сочетании с Vue.js и `vue-loader`.

docs/ru/SUMMARY.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
- Начало работы
2+
- [Из чего состоит компонент Vue](start/spec.md)
3+
- [Создание проекта](start/setup.md)
4+
- Возможности
5+
- [ES2015](features/es2015.md)
6+
- [Локальный CSS](features/scoped-css.md)
7+
- [CSS модули](features/css-modules.md)
8+
- [PostCSS](features/postcss.md)
9+
- [Горячая замена](features/hot-reload.md)
10+
- Настройка
11+
- [Пре-процессоры](configurations/pre-processors.md)
12+
- [Обработка вложенных URL](configurations/asset-url.md)
13+
- [Продвинутая конфигурация](configurations/advanced.md)
14+
- [Извлечение CSS в файл](configurations/extract-css.md)
15+
- [Пользовательские блоки](configurations/custom-blocks.md)
16+
- Workflow
17+
- [Production Build](workflow/production.md)
18+
- [Линтинг](workflow/linting.md)
19+
- [Тестирование](workflow/testing.md)
20+
- [Тестирование с моками](workflow/testing-with-mocks.md)
21+
- [Перечень настроек](options.md)

docs/ru/configurations/advanced.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# Продвинутая конфигурация vue-loader
2+
3+
Иногда может потребоваться сделать:
4+
5+
1. Применить пользовательский загрузчик (loader) к языку, вместо обработки его с помощью `vue-loader`;
6+
7+
2. Переопределить встроенные настройки загрузчиков для языков по умолчанию.
8+
9+
3. Добавить предварительную обработку или пост-обработку специфичной секции другим загрузчиком.
10+
11+
Чтобы сделать это укажите опцию `loaders` для `vue-loader`:
12+
13+
> Опции `preLoaders` и `postLoaders` доступны только в версиях >=10.3.0
14+
15+
### Webpack 2.x
16+
17+
``` js
18+
module.exports = {
19+
// другие настройки...
20+
module: {
21+
// module.rules тоже самое, что и module.loaders в 1.x
22+
rules: [
23+
{
24+
test: /\.vue$/,
25+
loader: 'vue-loader',
26+
options: {
27+
// указанные `loaders` переопределят загрузчики используемые по умолчанию
28+
// Конфигурация ниже будет обрабатывать все теги <script> без атрибута "lang"
29+
// с помощью coffee-loader
30+
loaders: {
31+
js: 'coffee-loader'
32+
},
33+
34+
// `preLoaders` будут применены перед стандартными загрузчиками.
35+
// Вы можете использовать это для предварительной обработки секций
36+
// часто используемая потребность для локализации на этапе сборки.
37+
preLoaders: {
38+
js: '/path/to/custom/loader'
39+
},
40+
41+
// `postLoaders` будут применены после стандартных загрузчиков.
42+
//
43+
// - Для `html`, результат возвращаемый стандартным загрузчиком
44+
// будет скомпилированный в JavaScript код render-функции.
45+
//
46+
// - Для `css`, результат возвращаемый из vue-style-loader
47+
// что не является особенно полезным в большинстве случаев.
48+
// Использование postcss-плагина будет лучшим вариантом.
49+
postLoaders: {
50+
html: 'babel-loader'
51+
}
52+
}
53+
}
54+
]
55+
}
56+
}
57+
```
58+
59+
### Webpack 1.x
60+
61+
``` js
62+
// webpack.config.js
63+
module.exports = {
64+
// другие настройки...
65+
module: {
66+
loaders: [
67+
{
68+
test: /\.vue$/,
69+
loader: 'vue'
70+
}
71+
]
72+
},
73+
// настройки vue-loader
74+
vue: {
75+
loaders: {
76+
// такая же конфигурация правил как и выше
77+
}
78+
}
79+
}
80+
```
81+
82+
Примером использования продвинутой конфигурации может быть например [извлечение CSS из компонентов в отдельный файл](./extract-css.md).

docs/ru/configurations/asset-url.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Обработка вложенных URL
2+
3+
По умолчанию `vue-loader` автоматически обрабатывает стили и файлы шаблонов с помощью [css-loader](https://github.com/webpack/css-loader) и компилятора шаблонов Vue. В процессе компиляции, все использованные URL, такие как `<img src="...">`, `background: url(...)` и CSS `@import` будут **обрабатаны как зависимости модуля**.
4+
5+
Например, `url(./image.png)` будет преобразовано в `require('./image.png')`, а затем
6+
7+
``` html
8+
<img src="../image.png">
9+
```
10+
11+
будет скомпилировано в:
12+
13+
``` js
14+
createElement('img', { attrs: { src: require('../image.png') }})
15+
```
16+
17+
Так как `.png` это не JavaScript-файл, вам необходимо настроить Webpack использовать [file-loader](https://github.com/webpack/file-loader) или [url-loader](https://github.com/webpack/url-loader) для их обработки. Проект создаваемый с помощью `vue-cli` уже сделает это за вас.
18+
19+
Преимущества подобного подхода:
20+
21+
1. `file-loader` позволяет определить куда нужно скопировать и поместить файл, а также как именовать его с добавлением в имя хэша для лучшего кеширования. Кроме того, это означает что **вы можете просто поместить изображения рядом с вашим `*.vue` файлами и использовать относительные пути, основанные на структуре каталогов, не беспокоясь об адресах при развёртывании**. При правильной конфигурации, Webpack будет автоматически заменять пути к файлам в корректные URL в итоговой сборке.
22+
23+
2. `url-loader` позволяет вставлять файлы как base-64 ссылки если они меньше указанного размера. Это позволит уменьшить количество HTTP-запросов при использовании маленьких файлов. Если же файл больше указанного порога, то он автоматически подключится с помощью `file-loader`.
Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# Пользовательские блоки
2+
3+
> Доступно в версиях 10.2.0+
4+
5+
Вы можете определять пользовательски блоки внутри `*.vue` файлов. Содержимое пользовательских блоков будет обрабатываться загрузчиками, указанными с объекте `loaders` настроек `vue-loader` и затем подключено модулем к компоненту. Конфигурация аналогична тому, что описано в разделе [продвинутой конфигурации загрузчиков](../configurations/advanced.md), за исключением совпадений по имени тега, вместо атрибута `lang`.
6+
7+
Если подходящий загрузчик будет найден для пользовательского блока, он будет обработан; в противном случае пользовательский блок будет просто проигнорирован.
8+
9+
## Пример
10+
11+
Пример извлечения всех пользовательских блоков `<docs>` в отдельный файл документации:
12+
13+
#### component.vue
14+
15+
``` html
16+
<docs>
17+
## Это пример компонента.
18+
</docs>
19+
20+
<template>
21+
<h2 class="red">{{msg}}</h2>
22+
</template>
23+
24+
<script>
25+
export default {
26+
data () {
27+
return {
28+
msg: 'Hello from Component A!'
29+
}
30+
}
31+
}
32+
</script>
33+
34+
<style>
35+
comp-a h2 {
36+
color: #f00;
37+
}
38+
</style>
39+
```
40+
41+
#### webpack.config.js
42+
43+
``` js
44+
// Webpack 2.x
45+
var ExtractTextPlugin = require("extract-text-webpack-plugin")
46+
47+
module.exports = {
48+
module: {
49+
rules: [
50+
{
51+
test: /\.vue$/,
52+
loader: 'vue',
53+
options: {
54+
loaders: {
55+
// извлечь всё содержимое тегов <docs> как обычный текст
56+
'docs': ExtractTextPlugin.extract('raw-loader'),
57+
}
58+
}
59+
}
60+
],
61+
plugins: [
62+
// вывести всю документацию в отдельный файл
63+
new ExtractTextPlugin('docs.md')
64+
]
65+
}
66+
}
67+
```

docs/ru/configurations/extract-css.md

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# Извлечение CSS в отдельный файл
2+
3+
Пример конфигурации для извлечения CSS из всех компонентов Vue в отдельный CSS-файл:
4+
5+
### Webpack 2.x
6+
7+
``` bash
8+
npm install extract-text-webpack-plugin@2.x --save-dev
9+
```
10+
11+
``` js
12+
// webpack.config.js
13+
var ExtractTextPlugin = require("extract-text-webpack-plugin")
14+
15+
module.exports = {
16+
// другие настройки...
17+
module: {
18+
rules: [
19+
{
20+
test: /\.vue$/,
21+
loader: 'vue-loader',
22+
options: {
23+
loaders: {
24+
css: ExtractTextPlugin.extract({
25+
use: 'css-loader',
26+
fallback: 'vue-style-loader' // <- это внутренняя часть vue-loader, поэтому нет необходимости его устанавливать через NPM
27+
})
28+
}
29+
}
30+
},
31+
]
32+
},
33+
plugins: [
34+
new ExtractTextPlugin("style.css")
35+
]
36+
}
37+
```
38+
39+
### Webpack 1.x
40+
41+
``` bash
42+
npm install extract-text-webpack-plugin --save-dev
43+
```
44+
45+
``` js
46+
// webpack.config.js
47+
var ExtractTextPlugin = require("extract-text-webpack-plugin")
48+
49+
module.exports = {
50+
// другие настройки...
51+
module: {
52+
loaders: [
53+
{
54+
test: /\.vue$/,
55+
loader: 'vue'
56+
}
57+
]
58+
},
59+
vue: {
60+
loaders: {
61+
css: ExtractTextPlugin.extract("css"),
62+
// вы также можете добавить <style lang="less"> или другие языки
63+
less: ExtractTextPlugin.extract("css!less")
64+
}
65+
},
66+
plugins: [
67+
new ExtractTextPlugin("style.css")
68+
]
69+
}
70+
```
Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
# Использование пре-процессоров
2+
3+
В Webpack все пре-процессоры должны быть применены с соответствующим загрузчиком. `vue-loader` позволяет вам использовать другие загрузчики Webpack для обработки секций компонентов Vue. Они будут автоматически вызваны для обработки секций на основе указанного атрибута `lang` у секции файла.
4+
5+
### CSS
6+
7+
Например, пусть в теге `<style>` будет использоваться SASS:
8+
9+
``` bash
10+
npm install sass-loader node-sass --save-dev
11+
```
12+
13+
``` html
14+
<style lang="sass">
15+
/* используем SASS здесь */
16+
</style>
17+
```
18+
19+
В недрах, текстовое содержимое тега `<style>` будет сперва скомпилировано с помощью `sass-loader` перед передачей для дальнейшей обработки.
20+
21+
#### Особенность sass-loader
22+
23+
Вопреки тому, что он называется [*sass*-loader](https://github.com/jtangelder/sass-loader), по умолчанию парсится синтаксис *SCSS*. Если вы на самом деле хотите использовать синтаксис *SASS* с отступами, вам требуется настроить vue-loader для sass-loader соответственно.
24+
25+
```javascript
26+
{
27+
test: /\.vue$/,
28+
loader: 'vue-loader',
29+
options: {
30+
loaders: {
31+
scss: 'vue-style-loader!css-loader!sass-loader' // <style lang="scss">
32+
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
33+
}
34+
}
35+
}
36+
```
37+
38+
Обратитесь к разделу [продвинутой конфигурации загрузчиков](./advanced.md) для получения дополнительной информации о том, как настраивать vue-loader.
39+
40+
### JavaScript
41+
42+
Весь JavaScript внутри Vue компонентов обрабатывается `babel-loader` по умолчанию. При необходимости это можно изменить:
43+
44+
``` bash
45+
npm install coffee-loader --save-dev
46+
```
47+
48+
``` html
49+
<script lang="coffee">
50+
# Пишем на coffeescript!
51+
</script>
52+
```
53+
54+
### Шаблоны
55+
56+
Обработка шаблонов выполняется несколько иначе, потому что большинство loader'ов шаблонов Webpack, например `pug-loader`, возвращают функцию шаблона вместо скомпилированного в строку HTML. Поэтому вместо использования `pug-loader`, можно просто установить оригинальный `pug`:
57+
58+
``` bash
59+
npm install pug --save-dev
60+
```
61+
62+
``` html
63+
<template lang="pug">
64+
div
65+
h1 Hello world!
66+
</template>
67+
```
68+
69+
> **Внимание:** При использовании `vue-loader@<8.2.0`, вам также необходимо установить `template-html-loader`.
70+
71+
### Непосредственное указание loader'ов
72+
73+
Вы можете указывать [опции для loader'ов Webpack](https://webpack.github.io/docs/loaders.html#introduction) в атрибуте `lang`:
74+
75+
``` html
76+
<style lang="sass?outputStyle=expanded">
77+
/* используем SASS с расширенным выводом */
78+
</style>
79+
```
80+
81+
Обратите внимание, это сделает ваш компонент Vue зависимым от Webpack и несовместимым с Browserify и [vueify](https://github.com/vuejs/vueify). **Если вы планируете распространять ваш компонент Vue, избегайте использования этого синтаксиса.**

0 commit comments

Comments
 (0)