Skip to content

update ja docs #870

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jul 3, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions docs/ja/configurations/pre-processors.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,40 @@ npm install sass-loader node-sass --save-dev

vue-loader を構成する方法の詳細については、[高度な loader の設定](./advanced.md)セクションを参照してください。

#### グローバル設定ファイルの読み込み

一般的な要求は、毎回明示的にインポートする必要なく、各コンポーネントに設定ファイルを読み込み可能であることです。例としてすべてのコンポーネントで scss 変数をグローバルに使用することです。これを成し遂げるためには:

``` bash
npm install sass-resources-loader --save-dev
```

のように `sass-resources-loader` をインストールし、以下の webpack のルールを追加します:

``` js
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/style/_variables.scss')
}
}
```

例として、[vuejs-templates/webpack](https://github.com/vuejs-templates/webpack) を使用している場合、 `build/util.js` を以下のように変更してください:

``` js
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/style/_variables.scss')
}
}
),
```

最終的にコンパイルされたファイルに CSS が重複しないように、変数、ミックスインなどのみをこのファイルに含めることをお勧めします。

### JavaScript

全ての Vue コンポーネントの JavaScript はデフォルトで `babel-loader` によって処理されます。しかしもちろんそれは変更することが可能です:
Expand Down
16 changes: 16 additions & 0 deletions docs/ja/features/scoped-css.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,3 +49,19 @@
4. **スコープされたスタイルは class の必要性を排除しません**。ブラウザが様々な CSS セレクタをレンダリングするため、`p { color: red }` はスコープされているとき何倍も遅くなります(すなわち属性セレクタと組み合わせた場合)。もし `.example { color: red }` のように class か id を使用するなら、パフォーマンスヒットは事実上なくなります。[この例](http://stevesouders.com/efws/css-selectors/csscreate.php)で違いをテストすることが出来ます。

5. **再帰されたコンポーネントの子孫セレクタには気をつけてください!** セレクタ `.a .b` を持つ CSS ルールの場合、`.a` にマッチする要素に再帰的な子コンポーネントが含まれている場合、その子コンポーネントのすべての `.b` はルールにマッチします。

6. `scoped` スタイルで入れ子のセレクタが必要なら、CSS に対して `>>>` オペレータを、そして `scss` に対しては `/deep/` を使用する必要があります:

``` html
<style scoped>
.a >>> .b {

}
</style>

<style lang="scss" scoped>
.a /deep/ .b {

}
</style>
```
4 changes: 2 additions & 2 deletions docs/ja/workflow/testing-with-mocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,13 @@ npm install inject-loader@^2.0.0 --save-dev

``` js
// example.spec.js
const ExampleInjector = require('!!vue?inject!./example.vue')
const ExampleInjector = require('!!vue-loader?inject!./example.vue')
```

注意。狂気じみた文字列を必要とします - ここではいくつかのインライン [webpack loader](https://webpack.github.io/docs/loaders.html) を使用しています。簡単な説明としては:

- `!!`は "グローバル設定からすべてのローダを無効にする"ことを意味します;
- `vue?inject!` は "`vue` loader を使い、`?inject` クエリを渡す"ことを意味します。 これは `vue-loader` に、依存性注入モードでコンポーネントをコンパイルするように指示します。
- `vue-loader?inject!` は `vue-loader` を使い、`?inject` クエリを渡す"ことを意味します。 これは `vue-loader` に、依存性注入モードでコンポーネントをコンパイルするように指示します。

返される `ExampleInjector` は、`example.vue` モジュールのインスタンスを生成するために呼び出すことができるファクトリ関数です:

Expand Down
2 changes: 1 addition & 1 deletion docs/ja/workflow/testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Karma はブラウザを起動してテストを実行するテストランナ
npm install\
karma karma-webpack\
karma-jasmine jasmine-core\
karma-phantomjs-launcher phantomjs\
karma-phantomjs-launcher phantomjs--prebuilt\
--save-dev
```

Expand Down