我们需要到自己的主题文件里面找到functions.php，在最后一行添加短代码注册以及引入稍后构建好的Vue产物

这一段是向WordPress注入短代码功能 如 【wp-vue type=”code”】, type的值可以更具你稍后要在vue实现的功能更改，这里我是注册了表示类型为code的短代码，为了实现代码高亮，如果没有其他需求，上面这段代码可以照搬

接下来我们需要在当前主题路径里面创建一个assets的文件夹，用来存放vue的构建产物，然后继续在functions.php里面引入vue的构建产物，我的资源路径是在assets/dist目录下，你们也可以更改其他路径

首先要确保当前系统已经安装了node，接下来要在当前目录创建一个vue3项目，我这里使用的是vite来管理的,你们也可以用webpack，接着修改vite.config.js 设置构建为IIFE格式的，且要定义process.env为{},

然后再到man.js实现挂载方法，因为他默认的是挂载到#app这个元素，我们在php里面定义的是 class为vue-widget，所以需要修改

上面代码里面的components类容就是你定义的type类型,你们可以自行添加不同类型需要的组件，导入使用就好了，然后设置打包目录，执行build打包完成，就可以在WordPress文章里面使用短代码，列如：

【wp-vue type=”code” lang=”javascript”】
console.log();
【/wp-vue】

【wp-vue type=”video”】【wp-vue type=”default”】等

这是我代码高亮的vue实现，你们也可以自己更换主题，样式等