-
Notifications
You must be signed in to change notification settings - Fork 87
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Debugging in VS Code Cookbook Recipe vuejs/docs@572b3cc#diff-b0e55b2e7066b952316301f7d1ca92884bcf4587ecb8899b43161ec6754e3fb3 * fix: change the language on some code blocks to match the code vuejs/docs@0391e2e#diff-b0e55b2e7066b952316301f7d1ca92884bcf4587ecb8899b43161ec6754e3fb3 * docs: use local copies of images rather than external URLs vuejs/docs@4b0baab#diff-b0e55b2e7066b952316301f7d1ca92884bcf4587ecb8899b43161ec6754e3fb3 * docs: add automatic global registration to cookbook vuejs/docs@6de305a#diff-b0e55b2e7066b952316301f7d1ca92884bcf4587ecb8899b43161ec6754e3fb3 * fix: markdown syntax * docs: translate cookbook > editable svg icon systems * docs: translate cookbook > debugging in vscode * docs: translate cookbook > automatic global registration of base components
- Loading branch information
Showing
11 changed files
with
236 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
76 changes: 76 additions & 0 deletions
76
src/cookbook/automatic-global-registration-of-base-components.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
# ベースコンポーネントの自動グローバル登録 | ||
|
||
## 基本的な例 | ||
|
||
多くのコンポーネントは割と一般的なもので、あるいは入力やボタンをラップするだけのものかもしれません。わたしたちは、このようなコンポーネントを [ベースコンポーネント](../style-guide/#base-component-names-strongly-recommended) と呼ぶことがあって、コンポーネント全体に渡ってとても頻繁に使われる傾向があります。 | ||
|
||
|
||
その結果、多くのコンポーネントはベースコンポーネントの長いリストに含まれていることがあります: | ||
|
||
```js | ||
import BaseButton from './BaseButton.vue' | ||
import BaseIcon from './BaseIcon.vue' | ||
import BaseInput from './BaseInput.vue' | ||
export default { | ||
components: { | ||
BaseButton, | ||
BaseIcon, | ||
BaseInput | ||
} | ||
} | ||
``` | ||
|
||
テンプレート内の比較的小さなマークアップをサポートするためだけのものです: | ||
|
||
```html | ||
<BaseInput v-model="searchText" @keydown.enter="search" /> | ||
<BaseButton @click="search"> | ||
<BaseIcon name="search" /> | ||
</BaseButton> | ||
``` | ||
|
||
幸いなことに、webpack(または [Vue CLI](https://github.com/vuejs/vue-cli)、これは内部的に webpack を使っています)を使う場合、これらのとても汎用的なベースコンポーネントだけをグローバルに登録するのに `require.context` を使うことができます。このコード例は、アプリケーションのエントリファイル(例えば `src/main.js`)でベースコンポーネントをグローバルにインポートするのに使えるでしょう: | ||
|
||
```js | ||
import { createApp } from 'vue' | ||
import upperFirst from 'lodash/upperFirst' | ||
import camelCase from 'lodash/camelCase' | ||
import App from './App.vue' | ||
|
||
const app = createApp(App) | ||
|
||
const requireComponent = require.context( | ||
// コンポーネントフォルダの相対パス | ||
'./components', | ||
// サブフォルダ内を探すかどうか | ||
false, | ||
// ベースコンポーネントのファイル名とマッチさせるための正規表現 | ||
/Base[A-Z]\w+\.(vue|js)$/ | ||
) | ||
|
||
requireComponent.keys().forEach(fileName => { | ||
// コンポーネント設定の取得 | ||
const componentConfig = requireComponent(fileName) | ||
|
||
// コンポーネントのパスカルケースでの名前を取得 | ||
const componentName = upperFirst( | ||
camelCase( | ||
// フォルダの深さに関わらずファイル名を取得 | ||
fileName | ||
.split('/') | ||
.pop() | ||
.replace(/\.\w+$/, '') | ||
) | ||
) | ||
|
||
app.component( | ||
componentName, | ||
// `.default` にあるコンポーネントのオプションを探す。 | ||
// コンポーネントが `export default` でエクスポートされていれば存在して、 | ||
// そうでなければモジュールのルートのフォールバックする。 | ||
componentConfig.default || componentConfig | ||
) | ||
}) | ||
|
||
app.mount('#app') | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,124 @@ | ||
# VS Code でのデバッグ | ||
|
||
あらゆるアプリケーションは、小さなものから大きなものまでエラーを理解する必要がある段階に到達します。このレシピでは、 VS Code ユーザがブラウザでアプリケーションをデバッグするためのワークフローをいくつか紹介します。 | ||
|
||
このレシピでは、 [Vue CLI](https://github.com/vuejs/vue-cli) アプリケーションをブラウザで実行しながら、 VS Code でデバッグする方法を紹介します。 | ||
|
||
## 必要なもの | ||
|
||
VS Code と好みのブラウザがインストールされていて、対応するデバッガー拡張機能の最新バージョンがインストールされ、有効化されていることを確認してください: | ||
|
||
- [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) | ||
- [Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug) | ||
|
||
[Vue CLI ガイド](https://cli.vuejs.org/) の説明にしたがって、 [vue-cli](https://github.com/vuejs/vue-cli) をインストールしてプロジェクトを作成します。新しく作成したアプリケーションのディレクトリに移動して、 VS Code を開きます。 | ||
|
||
### ブラウザにソースコードを表示 | ||
|
||
VS Code で Vue コンポーネントをデバッグできるようにする前に、生成された Webpack の設定を更新してソースマップをビルドする必要があります。これはデバッガが圧縮ファイルの中のコードを、元のファイルの位置に一致させる方法を持つためです。これにより、アセットが Webpack で最適化された後でも、アプリケーションのデバッグが可能になります。 | ||
|
||
Vue CLI 2 を使っているならば、`config/index.js` 内の `devtool` プロパティを設定、または更新してください: | ||
|
||
```json | ||
devtool: 'source-map', | ||
``` | ||
|
||
使っているのが Vue CLI 3 ならば、`vue.config.js` 内の `devtool` プロパティを設定、または更新してください: | ||
|
||
```js | ||
module.exports = { | ||
configureWebpack: { | ||
devtool: 'source-map', | ||
}, | ||
} | ||
``` | ||
|
||
### VS Code からアプリケーションを起動 | ||
|
||
::: info | ||
ここではポートを `8080` と仮定します。そうでない場合(例えば `8080` が使われていて、Vue CLI が自動的に別のポートを選択したとき)は、適宜設定を変更してください。 | ||
::: | ||
|
||
アクティビティバーのデバッグアイコンをクリックして、デバッグ表示に切り替え、歯車アイコンをクリックして launch.json ファイルを設定したら、環境として **Chrome/Firefox: Launch** を選択します。生成された launch.json の内容を対応する設定に置き換えます: | ||
|
||
![Add Chrome Configuration](/images/config_add.png) | ||
|
||
```json | ||
{ | ||
"version": "0.2.0", | ||
"configurations": [ | ||
{ | ||
"type": "chrome", | ||
"request": "launch", | ||
"name": "vuejs: chrome", | ||
"url": "http://localhost:8080", | ||
"webRoot": "${workspaceFolder}/src", | ||
"breakOnLoad": true, | ||
"sourceMapPathOverrides": { | ||
"webpack:///src/*": "${webRoot}/*" | ||
} | ||
}, | ||
{ | ||
"type": "firefox", | ||
"request": "launch", | ||
"name": "vuejs: firefox", | ||
"url": "http://localhost:8080", | ||
"webRoot": "${workspaceFolder}/src", | ||
"pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }] | ||
} | ||
] | ||
} | ||
``` | ||
|
||
## ブレークポイントの設定 | ||
|
||
1. **src/components/HelloWorld.vue** の `line 90` にある `data` 関数が文字列を返す部分にブレークポイントを設定します。. | ||
|
||
![Breakpoint Renderer](/images/breakpoint_set.png) | ||
|
||
2. ルートフォルダでお気に入りのターミナルを開き、Vue CLI を使ってアプリケーションを配信します: | ||
|
||
``` | ||
npm run serve | ||
``` | ||
|
||
3. デバッグ表示に移動して、**'vuejs: chrome/firefox'** の設定を選択したら、F5 キーを押すか、緑色の再生ボタンをクリックします。 | ||
|
||
4. ブレークポイントに到達すると、新しいブラウザのインスタンスが `http://localhost:8080` を開きます。 | ||
|
||
![Breakpoint Hit](/images/breakpoint_hit.png) | ||
|
||
## 代替パターン | ||
|
||
### Vue Devtools | ||
|
||
もっと複雑なデバッグの方法もあります。最も一般的で単純な方法は、優れた Vue.js devtools [Chrome 向け](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) と [Firefox 向け](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/) を使うことです。Devtools を使うことのいくつかの利点は、データのプロパティを Live Edit(ライブエディット)して、その変更がすぐに反映されることです。その他の主な利点は、Vuex のタイムトラベルデバッグが可能になることです。 | ||
|
||
![Devtools Timetravel Debugger](/images/devtools-timetravel.gif) | ||
|
||
Vue.js の本番向け・縮小化ビルド(CDN からの標準的なリンクなど)を使っているページでは、Devtools の検知がデフォルトで無効になっているため、Vue ペインが表示されないことに注意してください。縮小されていないバージョンに切り替えた場合は、それを表示するためにページのハード再読み込みが必要になるかもしれません。 | ||
|
||
### 単純な Debugger の記述 | ||
|
||
上記の例はすばらしいワークフローを持っています。しかし、[ネイティブの debugger 文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/debugger) をコードの中で直接使うという別の方法もあります。この方法を選択した場合には、作業が終わったらこの debugger 文を削除することを忘れないようにするのが重要です。 | ||
|
||
```vue | ||
<script> | ||
export default { | ||
data() { | ||
return { | ||
message: '' | ||
} | ||
}, | ||
mounted() { | ||
const hello = 'Hello World!' | ||
debugger | ||
this.message = hello | ||
} | ||
}; | ||
</script> | ||
``` | ||
|
||
## 謝辞 | ||
|
||
このレシピは、[Kenneth Auchenberg](https://twitter.com/auchenberg) 氏からの寄稿を元にしています。[元の記事](https://github.com/Microsoft/VSCode-recipes/tree/master/vuejs-cli)。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.