wordpress插件集成vue

vue.js的简单让它可以很方便的集成到各应用中，相比react它更轻便灵活，所以react做大型应用是合适的。不过作为wordpress一个插件，react太重了。

其实，在wp的插件中集成vue是很简单的事情，可以看下面的代码示意，比较重要的是要先include页面进来，然后再引入vue.js，以及vue的初始化以及逻辑代码了

1. 下面这个是插件主文件，我这里是dfass.php

function df_options_page_html() {
    // check user capabilities
    if (!current_user_can('manage_options')) {
        return;
    }
    //加载页面
    include(plugin_dir_path(__FILE__) . 'view.php');
    //加载css
    wp_enqueue_style('element-css', plugin_dir_url(__FILE__) . 'element.css', [], '2.14.1');
    wp_enqueue_style('index.css', plugin_dir_url(__FILE__) . 'index.css', array(), '1.0');
    //加载js
    wp_enqueue_script('vue', plugin_dir_url(__FILE__) . 'vue.js', [], '2.6.12');
    wp_enqueue_script('element-js', plugin_dir_url(__FILE__) . 'element.js', [], '2.14.1');
    wp_enqueue_script('axios', plugin_dir_url(__FILE__) . 'axios.min.js', [], '0.21.1');
    wp_enqueue_script('index.js', plugin_dir_url(__FILE__) . 'index.js', array(), '1.0');
    init_user();
}

add_action('admin_menu', 'df_options_page');
function df_options_page() {
    add_dashboard_page('钉钉表单助手', '钉钉表单助手', 'manage_options', 'df', 'df_options_page_html');
}

2. 接下来是view页面html文件view.php

<div id="app" class="wrapper">
    <div class="centered">
        <h2>钉钉表单助手</h2>
    </div>
    <template>
        <el-row>
            <el-input
                    v-model="value"
                    style="width: 300px"
                    placeholder="请输入手机号">
            </el-input>
            <el-button type="primary" v-on:click="btnClick()">添加</el-button>
            <el-button type="primary" v-on:click="btnApply()">执行</el-button>
        </el-row>
        <el-row>
            <el-table
                    :data="tableData"
                    stripe

                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="用户名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="user_id"
                        label="钉钉id"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="created_at"
                        label="添加时间">
                </el-table-column>
                <el-table-column
                        prop="last_time"
                        label="最后执行时间">
                </el-table-column>
                <el-table-column
                        prop="last_result"
                        label="最后执行结果">
                </el-table-column>
                <el-table-column
                        prop="enable"
                        label="状态">
                    <template slot-scope="scope">
                        <div slot="reference" class="name-wrapper">
                            <el-tag v-show="scope.row.enable===true" type="success" size="medium">启用</el-tag>
                            <el-tag v-show="scope.row.enable===false" type="info" size="medium">禁用</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button v-show="scope.row.enable === false" @click="handleClick(scope.row,true)" type="primary"
                                   size="small">启用
                        </el-button>
                        <el-button v-show="scope.row.enable === true" @click="handleClick(scope.row,false)" type="danger"
                                   size="small">禁用
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    </template>

</div>

3. 最后是vue初始化及逻辑代码index.js

(function () {
    let vue = new Vue({
        el: '#app',
        data: function () {
            return {
                activeIndex: '1',
                activeSubIndex: '1',
                tableData: [],
                loading: false,
                value: undefined,
                options: [],
            }
        },
        mounted: function () {
            this.getTableData()
        },
        methods: {
            getTableData() {
                let data = new FormData();
                data.append('action', 'df_get_setting_list');
                axios.post(ajaxurl, data).then(function (res) {
                    if (res.data.code !== 200) {
                        vue.$message({
                            message: res.data.message,
                            type: 'error'
                        });
                        return;
                    }
                    vue.tableData = res.data.data.userList;
                })
            },
            handleClick(row, enable) {
                let data = new FormData();
                data.append('action', 'df_update_form_enable');
                data.append('user_id', row.user_id);
                data.append('enable', enable);
                axios.post(ajaxurl, data).then(function (res) {
                    if (res.data.code !== 200) {
                        vue.$message({
                            message: res.data.message,
                            type: 'error'
                        });
                    }
                    vue.getTableData();
                })
            },
            btnApply() {
                let data = new FormData();
                data.append('action', 'df_apply_form');
                axios.post(ajaxurl, data).then(function (res) {
                    if (res.data.code !== 200) {
                        vue.$message({
                            message: res.data.message,
                            type: 'error'
                        });
                    }
                    vue.getTableData();
                })
            },
            btnClick() {
                let data = new FormData();
                data.append('action', 'df_add_user_form');
                data.append('phone', this.value);
                this.value = undefined;
                axios.post(ajaxurl, data).then(function (res) {
                    if (res.data.code !== 200) {
                        vue.$message({
                            message: res.data.message,
                            type: 'error'
                        });
                    }
                    vue.getTableData();
                    vue.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                })
            }
        }
    })
})();

如上，其实就可以在wp插件中集成vue了，完整的逻辑代码省略。

这个插件其实实现的是，每天9点根据钉钉打卡记录检测如果有加班讲自动发起加班餐表单申请。

可能有的人觉得奇葩，加班餐都还要申请！确实，博主所在公司也是个几百人的“大公司”，所以规章很多。但加班了还要手动填单，说句实话虽然我不是多懒的人，但我觉得不符合我们做“懒人”宗旨。

具体实现的不开源了，需要了解详细的可以留言交流。