# 儀表盤小工具
<p class="uk-article-lead">儀表盤是登錄管理面板后看到的第一個畫面。它提供了網站的概覽以及多個儀表盤小工具。你可以創建自己的儀表盤小工具來顯示各種有用的信息或者作為擴展程序的快捷方式。</p>
儀表盤小工具是以[Vue.js](http://vuejs.org)組件形式進行創建的。下面的例子解釋了如何在擴展中使用 webpack 配置來創建小工具。如果你不熟悉 Vue.js 和webpack 以及它們如果搭配工作，你需要先閱讀一下[Vue.js 和 Webpack](224138)。
## 創建 Vue 組件
起步，為小工具創建 Vue 組件并將它保存在擴展程序的子目錄中： `<extension>/app/components/widget-hello.vue`
```vue
<template>
<form class="pk-panel-teaser uk-form uk-form-stacked" v-if="editing">
<div class="uk-form-row">
<label for="form-hello-title" class="uk-form-label">{{ 'Title' | trans }}</label>
<div class="uk-form-controls">
<input id="form-hello-title" class="uk-width-1-1" type="text" name="widget[title]" v-model="widget.title">
</div>
</div>
</form>
<div v-else>
<h3 v-if="widget.title">{{ widget.title }}</h3>
</div>
</template>
<script>
module.exports = {
type: {
id: 'hello',
label: 'Hello Dashboard',
defaults: {
title: ''
}
},
replace: false,
props: ['widget', 'editing']
}
window.Dashboard.components['hello'] = module.exports;
</script>
```
## 添加到 webpack 配置中
現在，將 Vue 組件添加到擴展的 `webpack.config.js`:
```
entry: {
"dashboard": "./app/components/dashboard.vue",
// ...
},
```
運行一次 `webpack` 讓新建的組件在你的包中可用。在開發時，讓 `webpack --watch` 在后臺保持運行是一個不錯的主意。
## 確保儀表盤小工具已被加載
在擴展的 `index.php` 中注冊已打包的 javascript 文件。
使用波浪線，確保此文件已在儀表盤初始化代碼 _之前_ 已被加載"`~dashboard`。
```php
'events' => [
'view.scripts' => function ($event, $scripts) use($app) {
$scripts->register('widget-hello', 'hello:app/bundle/dashboard.js', '~dashboard');
}
]
```
