第一节：Vue3 开发WordPress设置选项 - PHP传数据给JS

书接上回，我们使用 Vue3 技术撰写前端，为了与后台进行交互，包括从前端加载的开始获取初始设置数据等，都需要从 PHP 中获取数据，但我们开发的项目打包后，只有 JS 文件，因此，开发的第一件事就是解决 PHP 传值给 JS 的问题。

为了方便我们的功能实现，我们开发一个简单的插件。简单介绍下软件环境，都是三平台通用的，大家能都用

• 编辑器：Visual Studio Code
• 环境：Local

目标

通过 PHP，将所需数据传给 JS 文件，并在 JS 文件中打印出来。

准备环境

VS Code 下载后安装使用即可。
Local 下载安装后，可点击左下角“+”按钮，一路默认选择，填写站点名称即可.
创建后，如下所示，

左侧列表选择自己创建的站点，

• 点击 Go to site folder 进入站点文件夹，选择 app → public 即可看到站点根目录文件
• 点击 WP Admin 即可进入站点后台

我们先在 WordPress 站点的wp-content/plugins目录下新建文件夹 vue-spa ，我们在这里撰写代码，实现我们的功能。

准备插件信息并启用

现在，我们在 vue-spa 文件夹下添加新文件“vue-spa.php”文件，写入以下内容

//vue-spa.php
<?php
/*
Plugin Name: Vue - SPA 
Plugin URI: https://www.npc.ink
Description: 将vue构建的页面嵌入WordPress 中并产生交互
Author: Muze
Author URI: https://www.npc.ink
Version: 1.0.0
*/

分别代表：

• 插件名
• 插件介绍网址
• 插件功能介绍
• 插件作者
• 插件作者介绍网站
• 插件版本

现在，我们的插件准备好了，点击 WP Admin 即可进入站点后台，进入插件页面，选择 Vue - SPA 插件启用吧

准备菜单

• Dashicons | WordPress 图标

为了验证我们准备的数据，需要一个地方来展示，方便验证，就做个菜单出来。承接上文，添加以下代码

//创建一个菜单
function vuespa_create_menu_page()
{
   
   
    add_menu_page(
        'VueSpa选项',                   // 此菜单对应页面上显示的标题
        'VueSpa',                      // 要为此实际菜单项显示的文本
        'administrator',               // 哪种类型的用户可以看到此菜单
        'vuespa_id',                   //  此菜单项的唯一ID（即段塞）
        'vuespa_menu_page_display',    // 呈现此页面的菜单时要调用的函数的名称
        'dashicons-admin-customizer',  //图标 - 默认图标
        '500.1',                       //位置
    );
} // end vuespa_create_menu_page 
add_action('admin_menu', 'vuespa_create_menu_page');
//菜单回调 - 展示的内容

function vuespa_menu_page_display()
{
   
   
?>
    <!--在默认WordPress“包装”容器中创建标题-->
    <div class="wrap">
        <!--标题-->
        <h2><?php echo esc_html(get_admin_page_title()); ?></h2>
        <!--提供Vue挂载点-->
        <div id="vuespa">此内容将在挂载Vue后被替换</div>
    </div>
<?php

} // vuespa_menu_page_display

代码的用途我放注释了，大家可以看看，主要作用是，在 WordPress 后台创建一个菜单，并展示一段话。

• 其中的 class 样式class="wrap"是 WordPress 自带的，有利于页面的一致性。
• 其中的图标，可在本节的开始提供的网址中获取，是 WordPress 的自带图标

现在，我们刷新 WordPress 后台，可以找到 VueSpa 菜单，点击打开即可。

若没有此菜单，请检查是否启用了 Vue - SPA 插件

准备JS文件接收数据

为了确定 PHP 传给 JS 的数据是成功的，我们需要在 JS 文件中进行验证。

我们在插件文件夹下新建文件夹 vite 和 dist 文件夹，并新建 index.js 和index.css 文件，结构类似这样

vue-spa/vite/dist/index.js
vue-spa/vite/dist/index.css

index.js 写入以下代码