@@ -10,11 +10,11 @@ npm install vue vue-server-renderer --save
10
10
11
11
#### 注意
12
12
13
- - Node.jsのバージョンは6以上を使用することを推奨します
13
+ - Node.js のバージョンは6以上を使用することを推奨します
14
14
- ` vue-server-renderer ` と ` vue ` のバージョンは一致している必要があります
15
- - ` vue-server-renderer ` はNode.jsのネイティブモジュールに依存しているため 、Node.jsでのみ使用できます 。 私たちは、将来的に他のJavaScriptランタイムで実行できるよりシンプルなビルドを提供するかもしれません 。
15
+ - ` vue-server-renderer ` は Node.js のネイティブモジュールに依存しているため 、Node.js でのみ使用できます 。 私たちは、将来的に他のJavaScript ランタイムで実行できるよりシンプルなビルドを提供するかもしれません 。
16
16
17
- ## Vue インスタンスをレンダリング
17
+ ## Vue インスタンスを描画
18
18
19
19
``` js
20
20
// ステップ 1: Vue インスタンスを作成
@@ -24,7 +24,7 @@ const app = new Vue({
24
24
})
25
25
// ステップ 2: レンダラを作成
26
26
const renderer = require (' vue-server-renderer' ).createRenderer ()
27
- // ステップ 3: Vue インスタンスをHTMLに描画
27
+ // ステップ 3: Vue インスタンスを HTML に描画
28
28
renderer .renderToString (app, (err , html ) => {
29
29
if (err) throw err
30
30
console .log (html)
@@ -72,7 +72,7 @@ server.listen(8080)
72
72
73
73
## ページテンプレートを使用する
74
74
75
- Vueアプリを描画する際 、レンダラはアプリのマークアップのみを生成します。この例では、出力を余計なHTMLページシェルでラップする必要がありました 。
75
+ Vue アプリを描画する際 、レンダラはアプリのマークアップのみを生成します。この例では、出力を余計な HTML ページシェルでラップする必要がありました 。
76
76
77
77
これをシンプル化するために、レンダラの作成時にページテンプレートを直接提供することができます。ほとんどの場合、ページテンプレートを単独のファイルに記述します。 例 ` index.template.html ` :
78
78
@@ -86,22 +86,22 @@ Vueアプリを描画する際、レンダラはアプリのマークアップ
86
86
</html >
87
87
```
88
88
89
- ` <!--vue-ssr-outlet--> ` コメントに注目してみてください。 -- これはあなたのアプリケーションのマークアップが注入される場所です。
89
+ ` <!--vue-ssr-outlet--> ` コメントに注目してみてください。 これはあなたのアプリケーションのマークアップが注入される場所です。
90
90
91
- ファイルを読み込みVueレンダラに渡すことができます。
91
+ ファイルを読み込み Vue レンダラに渡すことができます:
92
92
93
93
``` js
94
94
const renderer = createRenderer ({
95
95
template: require (' fs' ).readFileSync (' ./index.template.html' , ' utf-8' )
96
96
})
97
97
renderer .renderToString (app, (err , html ) => {
98
- console .log (html) // will be the full page with app content injected.
98
+ console .log (html) // アプリのコンテンツを含む完全なページになります
99
99
})
100
100
```
101
101
102
- ### テンプレート展開
102
+ ### テンプレートの展開
103
103
104
- テンプレートはシンプルな展開にも対応しています 。 次のようなテンプレートであれば:
104
+ テンプレートはシンプルな展開 (interpolation) にも対応しています 。 次のようなテンプレートであれば:
105
105
106
106
``` html
107
107
<html >
@@ -115,7 +115,7 @@ renderer.renderToString(app, (err, html) => {
115
115
</html >
116
116
```
117
117
118
- ` renderToString ` の第2引数として "描画コンテキストオブジェクト"(render context object) を渡すことで展開データを提供することができます
118
+ ` renderToString ` の第2引数として "描画コンテキストオブジェクト"(render context object) を渡すことで展開データを提供することができます:
119
119
120
120
``` js
121
121
const context = {
@@ -127,16 +127,16 @@ const context = {
127
127
}
128
128
renderer .renderToString (app, context, (err , html ) => {
129
129
// ページタイトルは "hello" になり、
130
- // メタタグが注入されます。
130
+ // メタタグが注入されます
131
131
})
132
132
```
133
133
134
- ` context ` オブジェクトもVueアプリインスタンスと共有することができ 、コンポーネントがテンプレート展開のためにデータを動的に追加することができます。
134
+ ` context ` オブジェクトも Vue アプリインスタンスと共有することができ 、コンポーネントがテンプレート展開のためにデータを動的に追加することができます。
135
135
136
136
さらに、テンプレートは次のような高度な機能をサポートしています:
137
137
138
- - ` *.vue ` コンポーネントを使用する際の、重要なCSSの自動注入
138
+ - ` *.vue ` コンポーネントを使用する際の、重要な CSS の自動注入
139
139
- ` clientManifest ` を使用する際の、アセットリンクとリソースヒントの自動注入
140
- - クライアントサイドハイドレーションのためにVuexの状態を埋め込む際にXSS防止の自動注入
140
+ - クライアントサイドハイドレーションのために Vuex の状態を埋め込む際に XSS 防止の自動注入
141
141
142
142
関連する概念については、後でこのガイドで紹介します。
0 commit comments