# 仪表盘小工具
<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');
}
]
```
