From e60fb2f9d23381a9731e012f872c2861361fd3ec Mon Sep 17 00:00:00 2001 From: Wany Bae Date: Thu, 15 Jun 2017 00:34:02 +0900 Subject: [PATCH 1/4] Translate basic.md via GitLocalize --- ja/basic.md | 142 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 142 insertions(+) create mode 100644 ja/basic.md diff --git a/ja/basic.md b/ja/basic.md new file mode 100644 index 00000000..c96b9e72 --- /dev/null +++ b/ja/basic.md @@ -0,0 +1,142 @@ +# Basic Usage + +## インストール + +```bash +npm install vue vue-server-renderer --save +``` + +We will be using NPM throughout the guide, but feel free to use [Yarn](https://yarnpkg.com/en/) instead. + +#### Notes + +- It's recommended to use Node.js version 6+. +- `vue-server-renderer` and `vue` must have matching versions. +- `vue-server-renderer` relies on some Node.js native modules and therefore can only be used in Node.js. We may provide a simpler build that can be run in other JavaScript runtimes in the future. + +## Rendering a Vue Instance + +```js +// Step 1: Create a Vue instance +const Vue = require('vue') +const app = new Vue({ + template: `
Hello World
` +}) +// Step 2: Create a renderer +const renderer = require('vue-server-renderer').createRenderer() +// Step 3: Render the Vue instance to HTML +renderer.renderToString(app, (err, html) => { + if (err) throw err + console.log(html) + // =>
hello world
+}) +``` + +## Integrating with a Server + +It is pretty straightforward when used inside a Node.js server, for example [Express](https://expressjs.com/): + +```bash +npm install express --save +``` + +--- + +```js +const Vue = require('vue') +const server = require('express')() +const renderer = require('vue-server-renderer').createRenderer() +server.get('*', (req, res) => { + const app = new Vue({ + data: { + url: req.url + }, + template: `
The visited URL is: {{ url }}
` + }) + renderer.renderToString(app, (err, html) => { + if (err) { + res.status(500).end('Internal Server Error') + return + } + res.end(` + + + Hello + ${html} + + `) + }) +}) +server.listen(8080) +``` + +## Using a Page Template + +When you render a Vue app, the renderer only generates the markup of the app. In the example we had to wrap the output with an extra HTML page shell. + +To simplify this, you can directly provide a page template when creating the renderer. Most of the time we will put the page template in its own file, e.g. `index.template.html`: + +```html + + + Hello + + + + +``` + +Notice the `` comment -- this is where your app's markup will be injected. + +We can then read and pass the file to the Vue renderer: + +```js +const renderer = createRenderer({ + template: require('fs').readFileSync('./index.template.html', 'utf-8') +}) +renderer.renderToString(app, (err, html) => { + console.log(html) // will be the full page with app content injected. +}) +``` + +### Template Interpolation + +The template also supports simple interpolation. Given the following template: + +```html + + + {{ title }} + {{{ meta }}} + + + + + +``` + +We can provide interpolation data by passing a "render context object" as the second argument to `renderToString`: + +```js +const context = { + title: 'hello', + meta: ` + + + ` +} +renderer.renderToString(app, context, (err, html) => { + // page title will be "hello" + // with meta tags injected +}) +``` + +The `context` object can also be shared with the Vue app instance, allowing components to dynamically register data for template interpolation. + +In addition, the template supports some advanced features such as: + +- Auto injection of critical CSS when using `*.vue` components; +- Auto injection of asset links and resource hints when using `clientManifest`; +- Auto injection and XSS prevention when embedding Vuex state for client-side hydration. + +We will discuss these when we introduce the associated concepts later in the guide. From 0aea76ac9b7497399672d2ad2bcc1c2fc482ae08 Mon Sep 17 00:00:00 2001 From: Sota Yamashtia Date: Thu, 15 Jun 2017 00:34:04 +0900 Subject: [PATCH 2/4] Translate basic.md via GitLocalize --- ja/basic.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ja/basic.md b/ja/basic.md index c96b9e72..db3135e3 100644 --- a/ja/basic.md +++ b/ja/basic.md @@ -1,4 +1,4 @@ -# Basic Usage +# 基本的な使い方 ## インストール @@ -6,9 +6,9 @@ npm install vue vue-server-renderer --save ``` -We will be using NPM throughout the guide, but feel free to use [Yarn](https://yarnpkg.com/en/) instead. +このガイドでは NPM を使って説明していきますが [Yarn](https://yarnpkg.com/en/) でも大丈夫です。 -#### Notes +#### 注意 - It's recommended to use Node.js version 6+. - `vue-server-renderer` and `vue` must have matching versions. @@ -32,7 +32,7 @@ renderer.renderToString(app, (err, html) => { }) ``` -## Integrating with a Server +## サーバと連携する It is pretty straightforward when used inside a Node.js server, for example [Express](https://expressjs.com/): @@ -70,7 +70,7 @@ server.get('*', (req, res) => { server.listen(8080) ``` -## Using a Page Template +## ページテンプレートを使用する When you render a Vue app, the renderer only generates the markup of the app. In the example we had to wrap the output with an extra HTML page shell. From d8cf87ec6d17b4ccb330ace710a040cb6a8b4843 Mon Sep 17 00:00:00 2001 From: Takumi Sato Date: Thu, 15 Jun 2017 00:34:06 +0900 Subject: [PATCH 3/4] Translate basic.md via GitLocalize --- ja/basic.md | 46 +++++++++++++++++++++++----------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/ja/basic.md b/ja/basic.md index db3135e3..954fd49d 100644 --- a/ja/basic.md +++ b/ja/basic.md @@ -10,21 +10,21 @@ npm install vue vue-server-renderer --save #### 注意 -- It's recommended to use Node.js version 6+. -- `vue-server-renderer` and `vue` must have matching versions. -- `vue-server-renderer` relies on some Node.js native modules and therefore can only be used in Node.js. We may provide a simpler build that can be run in other JavaScript runtimes in the future. +- Node.jsのバージョンは6以上を使用することを推奨します +- `vue-server-renderer` と `vue` のバージョンは一致している必要があります +- `vue-server-renderer` はNode.jsのネイティブモジュールに依存しているため、Node.jsでのみ使用できます。 私たちは、将来的に他のJavaScriptランタイムで実行できるよりシンプルなビルドを提供するかもしれません。 -## Rendering a Vue Instance +## Vue インスタンスをレンダリング ```js -// Step 1: Create a Vue instance +// ステップ 1: Vue インスタンスを作成 const Vue = require('vue') const app = new Vue({ template: `
Hello World
` }) -// Step 2: Create a renderer +// ステップ 2: レンダラを作成 const renderer = require('vue-server-renderer').createRenderer() -// Step 3: Render the Vue instance to HTML +// ステップ 3: Vue インスタンスをHTMLに描画 renderer.renderToString(app, (err, html) => { if (err) throw err console.log(html) @@ -34,7 +34,7 @@ renderer.renderToString(app, (err, html) => { ## サーバと連携する -It is pretty straightforward when used inside a Node.js server, for example [Express](https://expressjs.com/): +Node.js で作られたサーバで使う場合はとても簡単です。例えば [Express](https://expressjs.com/): ```bash npm install express --save @@ -72,9 +72,9 @@ server.listen(8080) ## ページテンプレートを使用する -When you render a Vue app, the renderer only generates the markup of the app. In the example we had to wrap the output with an extra HTML page shell. +Vueアプリをレンダーする際、レンダラはアプリのマークアップのみを生成します。この例では、出力を余計なHTMLページシェルでラップする必要がありました。 -To simplify this, you can directly provide a page template when creating the renderer. Most of the time we will put the page template in its own file, e.g. `index.template.html`: +これをシンプル化するために、レンダラの作成時にページテンプレートを直接提供することができます。ほとんどの場合、ページテンプレートを単独のファイルに記述します。 例 `index.template.html`: ```html @@ -86,9 +86,9 @@ To simplify this, you can directly provide a page template when creating the ren ``` -Notice the `` comment -- this is where your app's markup will be injected. +`` コメントに注目してみてください。 -- これはあなたのアプリケーションのマークアップが注入される場所です。 -We can then read and pass the file to the Vue renderer: +ファイルを読み込みVueレンダラに渡すことができます。 ```js const renderer = createRenderer({ @@ -99,9 +99,9 @@ renderer.renderToString(app, (err, html) => { }) ``` -### Template Interpolation +### テンプレート展開 -The template also supports simple interpolation. Given the following template: +テンプレートはシンプルな展開にも対応しています。 次のようなテンプレートであれば： ```html @@ -115,7 +115,7 @@ The template also supports simple interpolation. Given the following template: ``` -We can provide interpolation data by passing a "render context object" as the second argument to `renderToString`: +`renderToString` の第2引数として "描画コンテキストオブジェクト"(render context object) を渡すことで展開データを提供することができます ```js const context = { @@ -126,17 +126,17 @@ const context = { ` } renderer.renderToString(app, context, (err, html) => { - // page title will be "hello" - // with meta tags injected + // ページタイトルは "hello" になり、 + // メタタグが注入されます。 }) ``` -The `context` object can also be shared with the Vue app instance, allowing components to dynamically register data for template interpolation. +`context` オブジェクトもVueアプリインスタンスと共有することができ、コンポーネントがテンプレート展開のためにデータを動的に追加することができます。 -In addition, the template supports some advanced features such as: +さらに、テンプレートは次のような高度な機能をサポートしています: -- Auto injection of critical CSS when using `*.vue` components; -- Auto injection of asset links and resource hints when using `clientManifest`; -- Auto injection and XSS prevention when embedding Vuex state for client-side hydration. +- `*.vue` コンポーネントを使用する際の、重要なCSSの自動注入 +- `clientManifest` を使用する際の、アセットリンクとリソースヒントの自動注入 +- クライアントサイドハイドレーションのためにVuexの状態を埋め込む際にXSS防止の自動注入 -We will discuss these when we introduce the associated concepts later in the guide. +関連する概念については、後でこのガイドで紹介します。 From b24b8b2204af3f9462141b04095aa8b13c61e9c7 Mon Sep 17 00:00:00 2001 From: Takumi Sato Date: Thu, 15 Jun 2017 11:06:51 +0900 Subject: [PATCH 4/4] Translate basic.md via GitLocalize --- ja/basic.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ja/basic.md b/ja/basic.md index 954fd49d..9c9bac87 100644 --- a/ja/basic.md +++ b/ja/basic.md @@ -72,7 +72,7 @@ server.listen(8080) ## ページテンプレートを使用する -Vueアプリをレンダーする際、レンダラはアプリのマークアップのみを生成します。この例では、出力を余計なHTMLページシェルでラップする必要がありました。 +Vueアプリを描画する際、レンダラはアプリのマークアップのみを生成します。この例では、出力を余計なHTMLページシェルでラップする必要がありました。 これをシンプル化するために、レンダラの作成時にページテンプレートを直接提供することができます。ほとんどの場合、ページテンプレートを単独のファイルに記述します。 例 `index.template.html`: