在 WordPress 页面中使用 Vue.js答案

【问题标题】：Using Vue.js in a WordPress page在 WordPress 页面中使用 Vue.js
【发布时间】：2019-02-24 01:36:52
【问题描述】：

我在 Vue.js 中使用 Recaptcha 实现了一个简单的联系表单，请参阅 live demo 和 source code。

在 WordPress 页面上添加此表单的正确方法是什么？我没有使用过 WordPress，所以不清楚在哪里包含脚本以及在哪里放置 HTML 和 PHP。开发一个插件可能太复杂了，有没有可能用几行代码就可以将联系表添加到WordPress页面？

【问题讨论】：

标签： wordpress vue.js

【解决方案1】：

使用 webpack 的解决方案：

创建要包含的 vue 组件
创建一些可以包含在 webpack 条目中的 index.js 或 index.ts 文件

通过一些钩子在 wordpress 中添加组件。例如 add_menu_page


    add_action( 'admin_menu',array($this, 'register_form_menu_page'));
    function register_form_menu_page(){
        add_menu_page(  
            __( 'captcha form', 'theme' ),
            __( 'captcha form', 'theme' ),
            'edit_posts',
            'captchaform',
            array($this, 'init_menu_form'),
            'dashicons-schedule',
            6
        ); 
    }

function init_menu_form() { ?> <div> <captcha-form class="app-vue"></captcha-form> </div> <?php }

在javascript索引文件中包含vue、vue组件，并创建vue实例

import Vue from 'vue';
import CaptchaForm from "./components/CaptchaForm.vue";
Vue.component('CaptchaForm', CaptchaForm);

var apps = document.getElementsByClassName('app-vue');
for (let i = 0; i < apps.length; i++) {
    let element = apps[i];
    let id = 'app-vue-' + i;
    element.setAttribute('id', id);
    new Vue({
        el: '#' + id,
    });
}
export default apps;

运行 webpack

【讨论】：