仪表盘小工具

仪表盘是登录管理面板后显示的第一个界面。它提供网站概览，包含多个仪表盘小部件。你可以创建自己的仪表盘小部件，显示有用信息或提供扩展其他区域的快捷方式。

仪表盘小部件作为Vue.js组件创建。以下示例解释了如何使用扩展中的webpack配置创建小部件。如果你不清楚Vue.js和Webpack是什么，或者它们如何协同工作，建议先阅读Vue.js和Webpack的相关文章。

创建 Vue 组件

开始时，为你的小部件创建一个Vue组件，并保存在扩展扩展的子文件夹里：<extension>/app/components/widget-hello.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",
    // ...
},

运行一次，这样新组件就能在你的捆绑包中获得。开发时最好让运行在后台。webpackwebpack --watch

确保仪表盘小部件已加载

在你的扩展名 .index.php

确保文件在仪表盘初始化代码加载前，使用波浪号： 。~dashboard

'events' => [

    'view.scripts' => function ($event, $scripts) use($app) {
        $scripts->register('widget-hello', 'hello:app/bundle/dashboard.js', '~dashboard');
    }

]