Skip to content

Commit 20d4cbc

Browse files
Alex-Sokolovkazupon
authored andcommitted
[RU] Translation update (vuejs#144)
* Добавлены бэктики * routing.md исправлен пример * data.md исправлен пример * data.md добавлены бэктики * data.md исправление * universal.md правка * universal.md правка * api.md опечатка * structure.md опечатка * head.md исправлен пример * README.md исправлена ссылка на HTTPS * caching.md правка * api.md новые правки к 2.5.0 * basic.md добавлен новый пример для 2.5.0 * non-node.md добавлен новый раздел * README.md добавлена ссылка на новый раздел * SUMMARY.md добавлена ссылка на новый раздел в оглавление * non-node.md допереведен комментарий * hydration.md новые правки * non-node.md мелкие правки
1 parent fef2a68 commit 20d4cbc

File tree

6 files changed

+80
-17
lines changed

6 files changed

+80
-17
lines changed

ru/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ Vue.js — это фреймворк для создания приложени
4141

4242
## Об этом руководстве
4343

44-
Это руководство ориентировано на SPA приложения с рендерингом на сервере, используя Node.js в качестве сервера. Использование серверного рендеринга Vue совместно с другими технологиями и настройками бэкэнда являются отдельной темой и не рассматриваются в этом руководстве.
44+
Это руководство ориентировано на SPA приложения с рендерингом на сервере, используя Node.js в качестве сервера. Использование серверного рендеринга Vue совместно с другими технологиями и настройками бэкэнда являются отдельной темой и кратко обсуждается в [отдельном разделе](./non-node.md).
4545

4646
Это руководство будет очень детальным и предполагает, что вы уже знакомы с самим Vue.js, имеете знания и опыт работы с Node.js и Webpack. Если вы предпочитаете более высокоуровневые решения, обеспечивающие работу из коробки — вам следует попробовать [Nuxt.js](https://nuxtjs.org/). Он построен на том же стеке Vue, но позволяет абстрагироваться от написания шаблонного кода, а также предоставляет некоторые дополнительные возможности, такие как генерация статичного сайта. Однако он может не подойти, если вам необходим полный контроль над структурой приложения. В любом случае, вам будет полезно прочитать это руководство, чтобы лучше понимать, как все составляющие работают вместе.
4747

ru/SUMMARY.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
- [Управление заголовочными тегами (head)](head.md)
1111
- [Кэширование](caching.md)
1212
- [Стриминг](streaming.md)
13+
- [Использование в не-Node.js окружениях](non-node.md)
1314
- [Справочник API](api.md)
1415
- [createRenderer](api.md#createrendereroptions)
1516
- [createBundleRenderer](api.md#createbundlerendererbundle-options)

ru/api.md

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -30,23 +30,27 @@ const renderer = createBundleRenderer(serverBundle, { ... })
3030

3131
## `Класс: Renderer`
3232

33-
- #### `renderer.renderToString(vm[, context], callback)`
33+
- #### `renderer.renderToString(vm[, context, callback]): ?Promise<string>`
3434

3535
Рендерит экземпляр Vue в строку. Объект контекста опционален. Коллбэк является обычным для Node.js коллбэком, где первый аргумент является ошибкой, а второй аргумент — отрендеренной строкой.
3636

37-
- #### `renderer.renderToStream(vm[, context])`
37+
С версии 2.5.0+ коллбэк является опциональным. Когда коллбэк не указан, метод возвращает Promise, который разрешается отрендеренным HTML.
3838

39-
Рендерит экземпляр Vue в поток (stream) Node.js. Объект контекста опционален. См. также [Стриминг](./streaming.md) для подробностей.
39+
- #### `renderer.renderToStream(vm[, context]): stream.Readable`
40+
41+
Рендерит экземпляр Vue в [Node.js readable stream](https://nodejs.org/dist/latest-v8.x/docs/api/stream.html#stream_readable_streams). Объект контекста опционален. См. также [Стриминг](./streaming.md) для подробностей.
4042

4143
## `Класс: BundleRenderer`
4244

43-
- #### `bundleRenderer.renderToString([context, ]callback)`
45+
- #### `bundleRenderer.renderToString([context, callback]): ?Promise<string>`
4446

4547
Рендерит сборку в строку. Объект контекста опционален. Коллбэк является обычным для Node.js коллбэком, где первый аргумент является ошибкой, а второй аргумент — отрендеренной строкой.
4648

47-
- #### `bundleRenderer.renderToStream([context])`
49+
С версии 2.5.0+ коллбэк является опциональным. Когда коллбэк не указан, метод возвращает Promise, который разрешается отрендеренным HTML.
50+
51+
- #### `bundleRenderer.renderToStream([context]): stream.Readable`
4852

49-
Рендерит сборку в поток (stream) Node.js. Объект контекста опционален. См. также [Стриминг](./streaming.md) для подробностей.
53+
Рендерит сборку в [Node.js readable stream](https://nodejs.org/dist/latest-v8.x/docs/api/stream.html#stream_readable_streams). Объект контекста опционален. См. также [Стриминг](./streaming.md) для подробностей.
5054

5155
## Настройки рендерера
5256

@@ -67,6 +71,8 @@ const renderer = createBundleRenderer(serverBundle, { ... })
6771

6872
- `context.state`: (Object) начальное состояние хранилища Vuex, которое должно быть внедрено в страницу как `window.__INITIAL_STATE__`. Внедряемый JSON автоматически обрабатывается с помощью [serialize-javascript](https://github.com/yahoo/serialize-javascript) для предотвращения XSS-уязвимостей.
6973

74+
С версии 2.5.0+, встраиваемый скрипт также автоматически удаляется в режиме production.
75+
7076
Кроме того, когда предоставлен `clientManifest`, шаблон автоматически внедряет следующее:
7177

7278
- JavaScript и CSS ресурсы для клиентской части, необходимые для рендеринга (с асинхронными фрагментами добавляемыми автоматически);
@@ -81,21 +87,21 @@ const renderer = createBundleRenderer(serverBundle, { ... })
8187

8288
- #### `clientManifest`
8389

84-
- 2.3.0+
90+
- Добавлено в версии 2.3.0+
8591

8692
Предоставляет объект манифеста клиентской сборки, сгенерированный `vue-server-renderer/client-plugin`. Клиентский манифест предоставляет для рендерера сборки необходимую информацию для автоматического внедрения ресурсов в шаблон HTML. Подробнее в разделе [Генерация `clientManifest`](./build-config.md#generating-clientmanifest).
8793

8894
- #### `inject`
8995

90-
- 2.3.0+
96+
- Добавлено в версии 2.3.0+
9197

9298
Контролирует, выполнять ли автоматические внедрения при использовании `template`. По умолчанию `true`.
9399

94100
См. также: [Внедрение ресурсов вручную](./build-config.md#manual-asset-injection).
95101

96102
- #### `shouldPreload`
97103

98-
- 2.3.0+
104+
- Добавлено в версии 2.3.0+
99105

100106
Функция, определяющая какие файлы должны иметь `<link rel="preload">` в генерируемых ресурсах.
101107

@@ -125,10 +131,18 @@ const renderer = createBundleRenderer(serverBundle, { ... })
125131
})
126132
```
127133

134+
- #### `shouldPrefetch`
135+
136+
- Добавлено в версии 2.5.0+
137+
138+
Функция для управления файлами, которые должны содержаться в генерируемых `<link rel="prefetch">`.
139+
140+
По умолчанию все ресурсы в асинхронных частях будут предварительно загружены, так как это директива с низким приоритетом; однако вы можете настроить что требуется предзагружать для лучшего контроля над использованием канала загрузки. Этот параметр ожидает такую же сигнатуру функции, как `shouldPreload`.
141+
128142
- #### `runInNewContext`
129143

130-
- 2.3.0+
131-
- используется только в `createBundleRenderer`
144+
- Добавлено в версии 2.3.0+
145+
- Используется только в `createBundleRenderer`
132146
- Ожидается: `boolean | 'once'` (`'once'` поддерживается только с версии 2.3.1+)
133147

134148
По умолчанию, рендерер сборки будет создавать новый контекст V8 для каждого рендеринга и повторно исполнять всю сборку. Это имеет некоторые преимущества — например, код приложения изолирован от процесса сервера и не нужно беспокоиться [о проблеме «синглтона с состоянием»](./structure.md#avoid-stateful-singletons), которая упоминалась ранее в руководстве. Однако этот режим требует значительных затрат производительности, поскольку повторное выполнение сборки обходится дорого, особенно когда приложение становится большим.
@@ -148,8 +162,8 @@ const renderer = createBundleRenderer(serverBundle, { ... })
148162

149163
- #### `basedir`
150164

151-
- 2.2.0+
152-
- используется только в `createBundleRenderer`
165+
- Добавлено в версии 2.2.0+
166+
- Используется только в `createBundleRenderer`
153167

154168
Указание пути базового каталога для серверной сборки для разрешения зависимостей из `node_modules` в нём. Это необходимо только в том случае, если сгенерированный файл сборки располагается в другом месте, в отличии от используемых NPM-зависимостей, или когда ваш `vue-server-renderer` подключен NPM-ссылкой в вашем текущем проекте.
155169

ru/basic.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,13 @@ renderer.renderToString(app, (err, html) => {
3232
console.log(html)
3333
// => <div data-server-rendered="true">hello world</div>
3434
})
35+
36+
// с версии 2.5.0+, возвращает Promise если коллбэк не указан:
37+
renderer.renderToString.then(html => {
38+
console.log(html)
39+
}).catch(err => {
40+
console.error(err)
41+
})
3542
```
3643

3744
## Интеграция с сервером
@@ -112,7 +119,7 @@ renderer.renderToString(app, (err, html) => {
112119
<head>
113120
<!-- Используйте двойные фигурные скобки для экранированного HTML-кода -->
114121
<title>{{ title }}</title>
115-
122+
116123
<!-- Используйте тройные фигурные скобки для подстановки сырого HTML -->
117124
{{{ meta }}}
118125
</head>

ru/hydration.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ app.$mount('#app')
99

1010
Поскольку сервер уже отобразил разметку, мы, очевидно, не хотели бы её выбрасывать и заново создавать все элементы DOM. Вместо этого мы хотим «гидрировать» статическую разметку и сделать её интерактивной.
1111

12-
Если вы исследовали вывод после серверного рендеринга, вы могли заметить, что у корневого элемента приложения есть специальный атрибут:
12+
Если вы исследовали вывод после серверного рендеринга, вы могли заметить, что у корневого элемента приложения должен быть добавлен специальный атрибут:
1313

1414
``` js
1515
<div id="app" data-server-rendered="true">
1616
```
1717

18-
Специальный атрибут `data-server-rendered` позволяет клиентской части Vue знать, что разметка отображается сервером, и он должен монтироваться в режиме гидратации.
18+
Специальный атрибут `data-server-rendered` позволяет клиентской части Vue знать, что разметка отображается сервером, и он должен монтироваться в режиме гидратации. Обратите внимание, что он не добавляет `id="app"`, а только атрибут `data-server-rendered`: вам необходимо добавить ID или какой-либо другой селектор в корневой элемент самостоятельно или приложение не будет гидратироваться правильно.
1919

2020
В режиме разработки Vue будет проверять, что виртуальное дерево DOM, сгенерированное на стороне клиента, совпадает с структурой DOM созданной на сервере. При нахождении несоответствия, он будет считать гидратацию неудачной, отказываться от существующего DOM и рендерить всё с нуля. **В режиме production, эта проверка отключена для достижения максимальной производительности.**
2121

ru/non-node.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Использование в не-Node.js окружениях
2+
3+
По умолчанию сборка `vue-server-renderer` предполагает использование Node.js окружения, что делает её непригодной для использования в альтернативных JavaScript окружениях, таких как [PHP V8Js](https://github.com/phpv8/v8js) или [Oracle Nashorn](https://docs.oracle.com/javase/8/docs/technotes/guides/scripting/nashorn/). С версии 2.5+ мы предоставляем сборку в `vue-server-renderer/basic.js`, которая в значительной степени менее зависима от окружения, что делает её пригодной для использования в окружениях, упомянутых выше.
4+
5+
Для обоих вариантов необходимо сначала подготовить окружение создав моки для объектов `global` и `process`, с переменной `process.env.VUE_ENV` установленной в значение `"server"`, и переменной `process.env.NODE_ENV` установленной в значение `"development"` или `"production"`.
6+
7+
При использовании Nashorn также может потребоваться предоставить полифилл для `Promise` или `setTimeout` с использованием нативных таймеров Java.
8+
9+
Пример использования в php-v8js:
10+
11+
``` php
12+
<?php
13+
$vue_source = file_get_contents('/path/to/vue.js');
14+
$renderer_source = file_get_contents('/path/to/vue-server-renderer/basic.js');
15+
$app_source = file_get_contents('/path/to/app.js');
16+
17+
$v8 = new V8Js();
18+
19+
$v8->executeString('var process = { env: { VUE_ENV: "server", NODE_ENV: "production" }}; this.global = { process: process };');
20+
$v8->executeString($vue_source);
21+
$v8->executeString($renderer_source);
22+
$v8->executeString($app_source);
23+
?>
24+
```
25+
26+
---
27+
28+
``` js
29+
// app.js
30+
var vm = new Vue({
31+
template: `<div>{{ msg }}</div>`,
32+
data: {
33+
msg: 'hello'
34+
}
35+
})
36+
37+
// предоставляется `vue-server-renderer/basic.js`
38+
renderVueComponentToString(vm, (err, res) => {
39+
print(res)
40+
})
41+
```

0 commit comments

Comments
 (0)