Skip to content

Commit

Permalink
custom blocks translation for ja (#737)
Browse files Browse the repository at this point in the history
* pick up from #664

* translate #664

* improve title

from review comment: vuejs/vue-loader#737 (comment)
  • Loading branch information
kazupon authored Mar 24, 2017
1 parent 31506f2 commit 9ce7003
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 2 deletions.
70 changes: 68 additions & 2 deletions docs/ja/configurations/custom-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
`*.vue` ファイル内にカスタム言語ブロックを定義することが出来ます。カスタムブロックの内容は `vue-loader` のオブジェクトで指定された loader によって処理され、次にコンポーネントモジュールによって要求されます。この設定は `lang` 属性の代わりにタグ名を使用する点をのぞいて[高度な loader の設定](../configurations/advanced.md)に記載されたものと似ています。

もしカスタムブロックにマッチする loader を見つけたら、それは処理されます。でなければそのカスタムブロックは単に無視されます。
もしカスタムブロックにマッチする loader を見つけたら、それは処理されます。でなければそのカスタムブロックは単に無視されます。加えて、見つかった loader が関数を返す場合は、その関数は `*.vue` ファイルのコンポーネントをパラメータとして呼び出します。

##
## 単一ドキュメントファイルの例

全ての `<docs>` カスタムブロックを一つのドキュメントファイルに展開する例を示します:

Expand Down Expand Up @@ -65,3 +65,69 @@ module.exports = {
]
}
```

## 実行時に利用可能なドキュメント

`<docs>`カスタムブロックをコンポーネントに注入して実行時に利用できるようにする例です。

#### docs-loader.js

カスタムブロックコンテンツを注入するためには、カスタム loader が必要です:

``` js
module.exports = function (source, map) {
this.callback(null, 'module.exports = function(Component) {Component.options.__docs = ' +
JSON.stringify(source) +
'}', map)
}
```

#### webpack.config.js

次に、`<docs>` カスタムブロック用のカスタム loader を使用するように webpack を設定します。

``` js
const docsLoader = require.resolve('./custom-loaders/docs-loader.js')

module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue',
options: {
loaders: {
'docs': docsLoader
}
}
}
]
}
}
```

#### component.vue

実行時にインポートされたコンポーネントの `<docs>` ブロックの内容にアクセスできるようになりました。

``` html
<template>
<div>
<component-b />
<p>{{ docs }}</p>
</div>
</template>

<script>
import componentB from 'componentB';
export default = {
data () {
return {
docs: componentB.__docs
}
},
components: {componentB}
}
</script>
```
7 changes: 7 additions & 0 deletions docs/ja/start/spec.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,13 @@ export default {
<style src="todomvc-app-css/index.css">
```
`src` によるインポートはカスタムブロックでも動作します、例:
``` html
<unit-test src="./unit-test.js">
</unit-test>
```
### シンタックスハイライト
現在それらはシンタクスハイライトをサポートしているのは、[Sublime Text](https://github.com/vuejs/vue-syntax-highlight), [Atom](https://atom.io/packages/language-vue), [Vim](https://github.com/posva/vim-vue), [Visual Studio Code](https://marketplace.visualstudio.com/items/liuji-jim.vue), [Brackets](https://github.com/pandao/brackets-vue), [JetBrains products](https://plugins.jetbrains.com/plugin/8057) (WebStorm, PhpStorm, etc). 他のエディタ/IDEへのコントリビュートは高く評価されます!もし Vue コンポーネント内でプリプロセッサを使用していない場合は、エディタで `*.vue` ファイルを HTML として扱うことが出来ます。
Expand Down

0 comments on commit 9ce7003

Please sign in to comment.