diff --git a/src/v2/guide/deployment.md b/src/v2/guide/deployment.md index 48572324a..d3dd86f07 100644 --- a/src/v2/guide/deployment.md +++ b/src/v2/guide/deployment.md @@ -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 は一般的なエラーや落とし穴に役立つ多くの警告を表示します。しかし、これらの警告文字列は、プロダクション環境では役に立たなくなり、アプリケーションのペイロードサイズが大きくなります。さらに、これらの警告チェックの中には、運用モードで回避できるランタイムコストが小さいものがあります。 @@ -42,6 +44,7 @@ module.exports = { ] } ``` + #### Browserify - `"production"` に設定した `NODE_ENV` 環境変数を使ってバンドリングコマンドを実行してください。これは `vueify` にホットリロードと開発関連のコードを含まないように指示します。 diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index 1cc16939d..cbb9bbc02 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -1,8 +1,8 @@ --- title: 単一ファイルコンポーネント -updated: 2018-11-7 +updated: 2018-12-22 type: guide -order: 402 +order: 401 --- ## 前書き @@ -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) を参照してください。 diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md index 4fc86c2d6..d2880e1de 100644 --- a/src/v2/guide/typescript.md +++ b/src/v2/guide/typescript.md @@ -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 サポートの大幅な改善も予定しています。 ## NPM パッケージ内の公式型宣言 diff --git a/src/v2/guide/unit-testing.md b/src/v2/guide/unit-testing.md index 42bb7fce6..79159eb15 100644 --- a/src/v2/guide/unit-testing.md +++ b/src/v2/guide/unit-testing.md @@ -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/) もあります。 ## 単純なテスト @@ -32,7 +30,7 @@ order: 403 ``` -コンポーネントをテストする際には、 Vue と合わせて options のオブジェクトをインポートし、検証を実施します。 +コンポーネントをテストする際には、 Vue と合わせて options のオブジェクトをインポートし、検証を実施します (ここでは、例として Jasmine/Jest スタイルの `expect` アサーションを使用しています): ``` js // Vue と テスト対象のコンポーネントをインポートする @@ -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) について確認してください。 diff --git a/themes/vue/layout/partials/toc.ejs b/themes/vue/layout/partials/toc.ejs index 284853f0d..fbc6fb513 100644 --- a/themes/vue/layout/partials/toc.ejs +++ b/themes/vue/layout/partials/toc.ejs @@ -14,7 +14,7 @@ <% if (fileName === 'mixins') { %>
  • 再利用と構成

  • <% } %> - <% if (fileName === 'deployment') { %> + <% if (fileName === 'single-file-components') { %>
  • ツール

  • <% } %> <% if (fileName === 'routing') { %>