Skip to content
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

Translate Vue CLI related doc updates #1363

Merged
merged 4 commits into from
Dec 27, 2018
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
7 changes: 5 additions & 2 deletions src/v2/guide/deployment.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
---
title: プロダクション環境への配信
updated: 2018-05-07
updated: 2018-12-22
type: guide
order: 401
order: 404
---

> 以降のヒントのほとんどは、[Vue CLI](https://cli.vuejs.org) を使っていればデフォルトで有効になります。このセクションは、あなたが独自のビルドセットアップを使っている場合のみ関係があります。

## プロダクションモードを有効にする

開発中、Vue は一般的なエラーや落とし穴に役立つ多くの警告を表示します。しかし、これらの警告文字列は、プロダクション環境では役に立たなくなり、アプリケーションのペイロードサイズが大きくなります。さらに、これらの警告チェックの中には、運用モードで回避できるランタイムコストが小さいものがあります。
Expand Down Expand Up @@ -42,6 +44,7 @@ module.exports = {
]
}
```

#### Browserify

- `"production"` に設定した `NODE_ENV` 環境変数を使ってバンドリングコマンドを実行してください。これは `vueify` にホットリロードと開発関連のコードを含まないように指示します。
Expand Down
12 changes: 6 additions & 6 deletions src/v2/guide/single-file-components.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: 単一ファイルコンポーネント
updated: 2018-11-7
updated: 2018-12-22
type: guide
order: 402
order: 401
---

## 前書き
Expand Down Expand Up @@ -63,10 +63,10 @@ order: 402

- **Modern JavaScript with ES2015/16**: Babel の [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/) を読んでください。現状では全ての機能を暗記する必要はないですが、参考として戻れるようにしておいてください。

これらのリソースに没頭した後は、 [webpack](https://github.com/vuejs-templates/webpack) テンプレートを確認することをお勧めします。手順に沿って学習することで、あっという間に ES2015 とホットリローディングで動作した `.vue` コンポーネントの Vue プロジェクトを持っているはずです!

Webpack 自体の詳細については、[公式ドキュメント](https://webpack.js.org/configuration/)や [Webpack Academy](https://webpack.academy/p/the-core-concepts) を参照してください。Webpack では、各ファイルはバンドルに含まれる前に"ローダ (loader)" によって変換され、Vue は単一ファイル(`.vue`)コンポーネントを変換するための [vue-loader](https://vue-loader.vuejs.org) プラグインを提供します。
これらのリソースに没頭した後は、 [Vue CLI 3](https://cli.vuejs.org/) を確認することをお勧めします。手順に沿って学習することで、あっという間に `.vue` コンポーネントと ES2015、Webpack、ホットリローディングをそなえた Vue プロジェクトを手に入れられるはずです!

### 上級者ユーザー向け

あなたが Webpack か Browserify のどちらが好みでも、私達はシンプルなものと、複雑なプロジェクトのテンプレート両方を用意しました。[github.com/vuejs-templates](https://github.com/vuejs-templates) を閲覧し、あなたに合ったテンプレートを選んでください。そうしたら、[vue-cli](https://github.com/vuejs/vue-cli) で新しいプロジェクトを生成するために README 内の手順に沿ってください。
CLI はツール設定の大部分の面倒を見てくれますが、 [設定オプション](https://cli.vuejs.org/config/) を通してきめ細かなカスタマイズをすることもできます。

あなたが独自のビルドセットアップをゼロから作ることを好む場合、webpack と [vue-loader](https://vue-loader.vuejs.org) を手動で設定する必要があるでしょう。webpack 自体についてさらに学ぶには、[公式ドキュメント](https://webpack.js.org/configuration/)や [Webpack Academy](https://webpack.academy/p/the-core-concepts) を参照してください。
6 changes: 3 additions & 3 deletions src/v2/guide/typescript.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
title: TypeScript のサポート
updated: 2018-03-11
updated: 2018-12-22
type: guide
order: 404
order: 403
---

> Vue 2.5.0 以降で、デフォルトのオブジェクトベースの API を使用するため型宣言が大幅に改善されました。同時に、アップグレード操作を必須とするいくつかの変更が導入されています。より詳細は[このブログ記事](https://medium.com/the-vue-point/upcoming-typescript-changes-in-vue-2-5-e9bd7e2ecf08)を読んで下さい
> [Vue CLI](https://cli.vuejs.org) は、TypeScript ツールのサポートを組み込みで提供します。次期メジャーバージョンの Vue (3.x) では、クラスベースのコンポーネント API をもつ TypeScript サポートと TSX サポートの大幅な改善も予定しています
kazupon marked this conversation as resolved.
Show resolved Hide resolved

## NPM パッケージ内の公式型宣言

Expand Down
12 changes: 4 additions & 8 deletions src/v2/guide/unit-testing.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
---
title: 単体テスト
updated: 2018-10-18
updated: 2018-12-26
type: guide
order: 403
order: 402
---

## テストツールとセットアップ

テストツールは、モジュールベースのビルドシステムで動作するものならどのようなものでも問題ありませんが、テストツールを探している場合、[Karma](http://karma-runner.github.io)を試してみましょう。 Karma には多くのコミュニティ製プラグインが存在し、[Webpack](https://github.com/webpack/karma-webpack)や[Browserify](https://github.com/Nikku/karma-browserify)へのサポートも充実しています。 Karma の設定例として、[Webpack](https://github.com/vuejs-templates/webpack/blob/master/template/test/unit/karma.conf.js) と [Browserify](https://github.com/vuejs-templates/browserify/blob/master/template/karma.conf.js) のサンプル設定が最初のスタートに役立ちますが、詳しいセットアップについては、各テストツールのドキュメントを確認して下さい。
> [Vue CLI](https://cli.vuejs.org/) には、[Jest](https://github.com/facebook/jest) または [Mocha](https://mochajs.org/) を使って難しい設定なしにユニットテストするための組み込みのオプションがあります。カスタムセットアップのためのより詳細なガイダンスとなる公式の [Vue Test Utils](https://vue-test-utils.vuejs.org/ja/) もあります。

## 単純なテスト

Expand All @@ -32,7 +30,7 @@ order: 403
</script>
```

コンポーネントをテストする際には、 Vue と合わせて options のオブジェクトをインポートし、検証を実施します
コンポーネントをテストする際には、 Vue と合わせて options のオブジェクトをインポートし、検証を実施します (ここでは、例として Jasmine/Jest スタイルの `expect` アサーションを使用しています):

``` js
// Vue と テスト対象のコンポーネントをインポートする
Expand Down Expand Up @@ -130,6 +128,4 @@ it('updates the rendered message when vm.message updates', done => {
})
```

コンポーネントを特別な状態で描画し検証する(例えば、子コンポーネントを無視した浅い描画など)ような、テストをより簡単にするためのヘルパーセットの開発も検討しています。

Vue の単体テストに関する詳細情報については、[Vue Test Utils](https://vue-test-utils.vuejs.org/ja/) とクックブックエントリの [Vue コンポーネントの単体テスト](../cookbook/unit-testing-vue-components.html) について確認してください。
2 changes: 1 addition & 1 deletion themes/vue/layout/partials/toc.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<% if (fileName === 'mixins') { %>
<li><h3>再利用と構成</h3></li>
<% } %>
<% if (fileName === 'deployment') { %>
<% if (fileName === 'single-file-components') { %>
<li><h3>ツール</h3></li>
<% } %>
<% if (fileName === 'routing') { %>
Expand Down