大概在五六年前，我接触vue还没多久的时候就为这样的需求在WP上进行过尝试，只是当时的方案是通过主题模板实现的。

实现步骤如下

• 选中一个主题模板，在page-templates创建一个vue的php模板
• 创建一个header并引入css
• 创建一个footer引入vue.js
• 然后在wp后台以这个模板创建文章，将vue代码贴入就可以了

模板大致如下

<?php
/**
 * Template Name: Vue Template
 *
 * The template for the Vue page.
 *
 */
get_vue_header(); ?>
<div class="row">
    <main id="main" class="class of the theme">

        <?php while ( have_posts() ) : the_post(); ?>
            <?php get_vue_content(); ?>
        <?php endwhile; // End of the loop. ?>
    </main><!-- #main -->
</div>
<?php get_sidebar(); ?>
<?php get_vue_footer(); ?>

这个方案的缺点就是一升级主题就得改一下，很麻烦，去找过几个功能类似功能的插件，代码也大致看过，但是都不太好用，后来我自己也写了一个插件，做到一半丢那就没管了，主要是没有什么需求，但是我最近想做一些简单的页面嵌入，于是又把这个插件掏出来修改一下，主要就是用WordPress的Shortcode进行扩展，顺便把两个四五年前练习vue的demo集成了进去，感觉还不错。

主要实现的功能

• vue库引入，可以通过属性配置是否加载。
• 动态加载js/css文件，支持本地及网络加载，可以通过属性及app配置进行控制。
• 目前集成了element-ui/balm-ui/vant框架，可以通过属性配置动态装载指定版本。
• 源码型页面嵌入，这种支持在线直接边开发变预览，适用于小功能需求，比较便捷。
• 发布型代码嵌入，支持项目生成环境打包之后，配置一个app.json文件，即可装载，本地开发远程发布。
• 项目型代码嵌入，这个是上面两种方式的整合，通过webpack一类管理，可以远程开发机发布。

引入方式大致如下

coco_vue app="fb_demo" //app名称
vue="true" // 启用vue
debug="true" //是否开启调试
js="manifest|https://cocozq.com/js/test.js" //本地及网络js加载
ui="element-ui|1.8.8" // 使用ui框架及版本
css="https://cocozq.com/css/test.css|style" //本地及网络css加载

如果是发布型嵌入，跟微信小程序一样，直接通过短代码指定app名称即可。

演示demo

下面两个demo都是我五六年前练习vue写的

1. 源码型demo

足彩奖金在线计算

2. 发布型嵌入demo

原本是放在安卓App里面的一个单独页面，通过webview进行加载的，现在只经过简单修改，可以直接嵌入