Question

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

在WordPress页面上添加此表单的正确方法是什么？我尚未使用WordPress，因此尚不清楚在何处包括脚本以及在何处放置HTML和PHP。开发插件可能太复杂了，是否可以使用几行代码将联系表单添加到WordPress页面？

Answer 1

使用webpack的解决方案：

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

通过某些钩子在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 }

包括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

在WordPress页面中使用Vue.js

1 个答案: