Skip to content

Commit b1023cd

Browse files
Alex-Sokolovyyx990803
Alex-Sokolov
authored and
yyx990803
committed
docs: Russian translation moved to VuePress (#1310)
1 parent a004e30 commit b1023cd

File tree

16 files changed

+1472
-0
lines changed

16 files changed

+1472
-0
lines changed

‎docs/.vuepress/config.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ module.exports = {
99
lang: 'zh-CN',
1010
title: 'Vue Loader',
1111
description: '处理 Vue 单文件组件的 Webpack loader'
12+
},
13+
'/ru/': {
14+
lang: 'ru',
15+
title: 'Vue Loader',
16+
description: 'Webpack loader для однофайловых компонентов Vue'
1217
}
1318
},
1419
serviceWorker: true,
@@ -90,6 +95,43 @@ module.exports = {
9095
'/zh/guide/linting',
9196
'/zh/guide/testing'
9297
]
98+
},
99+
'/ru/': {
100+
label: 'Русский',
101+
selectText: 'Languages',
102+
editLinkText: 'Изменить эту страницу на GitHub',
103+
nav: [
104+
{
105+
text: 'Руководство',
106+
link: '/ru/guide/'
107+
},
108+
{
109+
text: 'Однофайловые компоненты',
110+
link: '/ru/spec.html'
111+
},
112+
{
113+
text: 'Настройки',
114+
link: '/ru/options.html'
115+
},
116+
{
117+
text: 'Миграция с версии v14',
118+
link: '/ru/migrating.md'
119+
}
120+
],
121+
sidebar: [
122+
'/ru/',
123+
'/ru/guide/',
124+
'/ru/guide/asset-url',
125+
'/ru/guide/pre-processors',
126+
'/ru/guide/scoped-css',
127+
'/ru/guide/css-modules',
128+
'/ru/guide/hot-reload',
129+
'/ru/guide/functional',
130+
'/ru/guide/custom-blocks',
131+
'/ru/guide/extract-css',
132+
'/ru/guide/linting',
133+
'/ru/guide/testing'
134+
]
93135
}
94136
}
95137
}

‎docs/ru/README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Введение
2+
3+
:::tip ПРИМЕЧАНИЕ К ВЕРСИИ
4+
Это документация для Vue Loader v15 и выше. Если вы обновляетесь с v14 или более ранних версий, обратитесь к [руководству по миграции](./migrating.md). Если вы используете старую версию, то документация к ней [здесь](https://vue-loader-v14.vuejs.org).
5+
:::
6+
7+
## Что такое Vue Loader?
8+
9+
`vue-loader` — это загрузчик для [webpack](https://webpack.js.org/), который позволяет вам использовать компоненты Vue в формате, именуемым [однофайловыми компонентами](./spec.md):
10+
11+
``` vue
12+
<template>
13+
<div class="example">{{ msg }}</div>
14+
</template>
15+
16+
<script>
17+
export default {
18+
data () {
19+
return {
20+
msg: 'Hello world!'
21+
}
22+
}
23+
}
24+
</script>
25+
26+
<style>
27+
.example {
28+
color: red;
29+
}
30+
</style>
31+
```
32+
33+
Использование `vue-loader` предоставляет множество интересных возможностей:
34+
35+
- Позволяет использовать разнообразные загрузчики webpack для разных секций компонента Vue, например Sass для `<style>` и Pug для `<template>`;
36+
- Позволяет использовать пользовательские секции в файлах `.vue`, обрабатывая их указанными цепочками загрузчиков;
37+
- Обращается со статическими ресурсами, указанными в `<style>` и `<template>` как с зависимостями модуля и обрабатывает их с помощью загрузчиков webpack;
38+
- Может эмулировать локальный (scoped) CSS для каждого компонента;
39+
- Горячая перезагрузка модулей с сохранением состояния на этапе разработки.
40+
41+
В двух словах, сочетание webpack и `vue-loader` предоставляет вам современный, гибкий и невероятно эффективный подход к написанию клиентских приложений на Vue.js.

‎docs/ru/guide/README.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Начало работы
2+
3+
## Vue CLI
4+
5+
Если вы не заинтересованы настраивать вручную webpack, тогда мы рекомендуем вам разворачивать проекты с помощью [Vue CLI](https://github.com/vuejs/vue-cli). Проекты создаваемые с помощью Vue CLI предварительно сконфигурированы с учётом большинства общих потребностей при разработке из коробки.
6+
7+
Следуйте этому руководству, если встроенная конфигурация Vue CLI не подходит для ваших нужд, или вы предпочитаете создавать собственную конфигурацию webpack с нуля.
8+
9+
## Конфигурация вручную
10+
11+
Конфигурация Vue Loader немного отличается от настройки других загрузчиков. В дополнении к правилу, которое будет применять `vue-loader` ко всем файлам с расширением `.vue`, убедитесь что добавили плагин Vue Loader в вашу конфигурацию webpack:
12+
13+
``` js
14+
// webpack.config.js
15+
const VueLoaderPlugin = require('vue-loader/lib/plugin')
16+
17+
module.exports = {
18+
module: {
19+
rules: [
20+
// ... другие правила
21+
{
22+
test: /\.vue$/,
23+
loader: 'vue-loader'
24+
}
25+
]
26+
},
27+
plugins: [
28+
// убедитесь что подключили плагин!
29+
new VueLoaderPlugin()
30+
]
31+
}
32+
```
33+
34+
**Плагин необходим!** Он отвечает за клонирование любых других правил, которые вы определили, чтобы применить их к соответствующим языковым блокам в файлах `.vue`. Например, если у вас есть правило, соответствующее файлам `/\.js$/`, оно будет применяться к секциям `<script>` в файлах `.vue`.
35+
36+
Более полная версия конфигурации webpack будет выглядеть так:
37+
38+
``` js
39+
// webpack.config.js
40+
const path = require('path')
41+
const VueLoaderPlugin = require('vue-loader/lib/plugin')
42+
43+
module.exports = {
44+
mode: 'development',
45+
module: {
46+
rules: [
47+
{
48+
test: /\.vue$/,
49+
loader: 'vue-loader'
50+
},
51+
// это будет применяться к файлам `.js`
52+
// А ТАКЖЕ к секциям `<script>` внутри файлов `.vue`
53+
{
54+
test: /\.js$/,
55+
loader: 'babel-loader'
56+
},
57+
// это будет применяться к файлам `.css`
58+
// А ТАКЖЕ к секциям `<style>` внутри файлов `.vue`
59+
{
60+
test: /\.css$/,
61+
use: [
62+
'vue-style-loader',
63+
'css-loader'
64+
]
65+
}
66+
]
67+
},
68+
plugins: [
69+
// убедитесь что подключили плагин!
70+
new VueLoaderPlugin()
71+
]
72+
}
73+
```
74+
75+
Также смотрите [перечень настроек](../options.md), где перечислены все доступные опции загрузчика.

‎docs/ru/guide/asset-url.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# Обработка вложенных URL
2+
3+
Когда Vue Loader компилирует секции `<template>` в однофайловых компонентах, то он будет трактовать все использованные URL как **зависимости модуля**.
4+
5+
Например, следующий примера шаблона:
6+
7+
``` vue
8+
<img src="../image.png">
9+
```
10+
11+
будет скомпилирован в:
12+
13+
``` js
14+
createElement('img', {
15+
attrs: {
16+
src: require('../image.png') // теперь это запрос к модулю
17+
}
18+
})
19+
```
20+
21+
По умолчанию следующие комбинации тегов/атрибутов преобразуются и могут быть настроены с помощью опции [transformAssetUrls](../options.md#transformasseturls).
22+
23+
``` js
24+
{
25+
video: ['src', 'poster'],
26+
source: 'src',
27+
img: 'src',
28+
image: 'xlink:href'
29+
}
30+
```
31+
32+
Кроме того, если вы настроили использование [css-loader](https://github.com/webpack-contrib/css-loader) для секций `<style>`, используемые URL-адреса в вашем CSS будут обрабатываться аналогичным образом.
33+
34+
## Правила преобразования
35+
36+
Преобразования URL ресурсов подчиняются следующим правилам:
37+
38+
- Если в URL абсолютный путь (например, `/images/foo.png`), он будет оставлен как есть.
39+
40+
- Если URL начинается с `.`, он будет истолковываться как запрос модуля относительно текущего каталога и разрешаться на основе структуры каталогов вашей файловой системы.
41+
42+
- Если URL начинается с `~`, то всё что после него будет истолковываться как запрос модуля. Это означает, что вы можете ссылаться на ресурсы даже внутри node_modules:
43+
44+
``` html
45+
<img src="~some-npm-package/foo.png">
46+
```
47+
48+
- Если URL начинается с `@`, то также будет истолковываться как запрос модуля. Это полезно если в вашей конфигурации webpack есть псевдоним для `@`, который по умолчанию указывает на `/src` в любом проекте, созданном через `vue-cli`.
49+
50+
## Связанные загрузчики
51+
52+
Так как файлы с расширениями, таким как `.png`, не являются JavaScript- модулями, вам необходимо настроить webpack для использования [file-loader](https://github.com/webpack/file-loader) или [url-loader](https://github.com/webpack/url-loader) чтобы корректно их обрабатывать. Проекты создаваемые с помощью Vue CLI уже предварительно настраивают это для вас.
53+
54+
## Почему так
55+
56+
Преимущества подобных преобразований URL:
57+
58+
1. `file-loader` позволяет определить куда нужно скопировать и поместить файл, а также как именовать его, добавляя в имя хэш для лучшего кеширования. Кроме того, это означает что **вы можете просто поместить изображения рядом с вашим `*.vue` файлами и использовать относительные пути, основанные на структуре каталогов, не беспокоясь об адресах при публикации**. При правильной конфигурации, webpack будет автоматически заменять пути к файлам на корректные URL в итоговой сборке.
59+
60+
2. `url-loader` позволяет вставлять файлы как base-64 ссылки, если они меньше указанного размера. Это позволит уменьшить количество HTTP-запросов при использовании маленьких файлов. Если же файл больше указанного порога, то он автоматически подключится с помощью `file-loader`.

‎docs/ru/guide/css-modules.md‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
# CSS модули
2+
3+
[CSS модули](https://github.com/css-modules/css-modules) — это популярная система для модульности и компоновки CSS. `vue-loader` предоставляет первоклассную интеграцию с CSS модулями как возможную альтернативу эмулируемого локального (scoped) CSS.
4+
5+
## Использование
6+
7+
Во-первых, CSS модули нужно явно включить, передав опцию `modules: true` в `css-loader`:
8+
9+
``` js
10+
// webpack.config.js
11+
{
12+
module: {
13+
rules: [
14+
// ... другие правила опущены
15+
{
16+
test: /\.css$/,
17+
use: [
18+
'vue-style-loader',
19+
{
20+
loader: 'css-loader',
21+
options: {
22+
// включаем CSS модули
23+
modules: true,
24+
// настраиваем генерируемое имя класса
25+
localIdentName: '[local]_[hash:base64:8]'
26+
}
27+
}
28+
]
29+
}
30+
]
31+
}
32+
}
33+
```
34+
35+
Затем, добавляем атрибут `module` к тегу секции `<style>`:
36+
37+
``` vue
38+
<style module>
39+
.red {
40+
color: red;
41+
}
42+
.bold {
43+
font-weight: bold;
44+
}
45+
</style>
46+
```
47+
48+
Атрибут `module` подскажет Vue Loader о необходимости внедрить CSS модуль в компонент в качестве вычисляемого свойства с именем `$style`. Вы можете использовать его в шаблонах для динамического добавления классов:
49+
50+
``` vue
51+
<template>
52+
<p :class="$style.red">
53+
Текст должен быть красным
54+
</p>
55+
</template>
56+
```
57+
58+
Поскольку это вычисляемое свойство, оно будет работать с объектом/массивом в `:class`:
59+
60+
``` vue
61+
<template>
62+
<div>
63+
<p :class="{ [$style.red]: isRed }">
64+
Буду ли я красным?
65+
</p>
66+
<p :class="[$style.red, $style.bold]">
67+
Красный и жирный
68+
</p>
69+
</div>
70+
</template>
71+
```
72+
73+
Вы также можете получить доступ в JavaScript:
74+
75+
``` vue
76+
<script>
77+
export default {
78+
created () {
79+
console.log(this.$style.red)
80+
// -> "red_1VyoJ-uZ"
81+
// идентификатор генерируется на основе имени файла и className.
82+
}
83+
}
84+
</script>
85+
```
86+
87+
Обратитесь к [спецификации CSS-модулей](https://github.com/css-modules/css-modules) для получения информации о [глобальных исключениях](https://github.com/css-modules/css-modules#exceptions) и [композиции](https://github.com/css-modules/css-modules#composition).
88+
89+
## Опциональное использование
90+
91+
Если вы хотите использовать CSS модули только в некоторых компонентах Vue, вы можете использовать правило `oneOf` и проверять наличие строки `module` внутри `resourceQuery`:
92+
93+
``` js
94+
// webpack.config.js -> module.rules
95+
{
96+
test: /\.css$/,
97+
oneOf: [
98+
// это соответствует `<style module>`
99+
{
100+
resourceQuery: /module/,
101+
use: [
102+
'vue-style-loader',
103+
{
104+
loader: 'css-loader',
105+
options: {
106+
modules: true,
107+
localIdentName: '[local]_[hash:base64:5]'
108+
}
109+
}
110+
]
111+
},
112+
// это соответствует простому `<style>` или `<style scoped>`
113+
{
114+
use: [
115+
'vue-style-loader',
116+
'css-loader'
117+
]
118+
}
119+
]
120+
}
121+
```
122+
123+
## Использование с пре-процессорами
124+
125+
CSS модули могут быть использованы вместе с другими пре-процессорами:
126+
127+
``` js
128+
// webpack.config.js -> module.rules
129+
{
130+
test: /\.scss$/,
131+
use: [
132+
'vue-style-loader',
133+
{
134+
loader: 'css-loader',
135+
options: { modules: true }
136+
},
137+
'sass-loader'
138+
]
139+
}
140+
```
141+
142+
## Указание имени внедряемого модуля
143+
144+
У вас может быть несколько тегов `<style>` в одном компоненте `*.vue`. Во избежание перезаписи внедряемых стилей вы можете указать имя внедряемого вычисляемого свойства в значении атрибута `module`:
145+
146+
``` html
147+
<style module="a">
148+
/* идентификатор будет внедрён как a */
149+
</style>
150+
151+
<style module="b">
152+
/* идентификатор будет внедрён как b */
153+
</style>
154+
```

0 commit comments

Comments
 (0)