如何在现有WordPress站点添加Vue/React？无REST API方案问询

Hey there! Let’s walk through this since you’re working with WooCommerce Storefront and want to swap out messy jQuery for clean, component-based code with Vue or React. I’ll cover your key questions—including how to avoid the REST API, whether to build on-demand, and the best way to integrate these frameworks without breaking your existing setup.

If you want to skip the WordPress REST API entirely, the best approach is to pass data directly from the server to your components at render time, then mount the framework on top. Here are two solid methods:

1. Shortcode-Injected Components #

Build a custom WordPress plugin (way better than modifying the Storefront theme directly—no lost code when you update the theme!) to register shortcodes that load your compiled Vue/React components.

For example, a Vue product filter component:

// In your custom plugin file
add_shortcode('vue_product_filter', function($atts) {
    // Fetch initial product data directly from WooCommerce via PHP
    $initial_products = wc_get_products([
        'limit' => 20,
        'status' => 'publish'
    ]);
    $products_json = json_encode(wp_list_pluck($initial_products, 'get_data'));

    // Enqueue your compiled Vue component (built as a UMD bundle)
    wp_enqueue_script('vue-product-filter', plugins_url('dist/vue-filter.js', __FILE__), [], '1.0.0', true);

    // Output the mount point with server-side data as a data attribute
    return '<div id="vue-filter" data-products="' . esc_attr($products_json) . '"></div>';
});

In your Vue component, you’d grab the initial data from the data-products attribute on mount, no API calls needed. The same logic applies to React—compile your component as a UMD bundle, enqueue it, and mount it to the DOM node.

2. Custom Page Templates #

Since you’re using Storefront, you can create custom page templates tailored to specific pages (like your shop or cart page) that embed your components directly.

For a React-powered cart summary:

// Create page-custom-cart.php in your Storefront child theme
<?php
/* Template Name: React-Powered Cart */
get_header();

// Enqueue React and your compiled component
wp_enqueue_script('react', 'https://unpkg.com/react@18/umd/react.production.min.js', [], '18.2.0', true);
wp_enqueue_script('react-dom', 'https://unpkg.com/react-dom@18/umd/react-dom.production.min.js', ['react'], '18.2.0', true);
wp_enqueue_script('react-cart-summary', get_stylesheet_directory_uri() . '/dist/cart-summary.js', ['react', 'react-dom'], '1.0.0', true);

// Fetch cart data directly via WooCommerce PHP
$cart = WC()->cart->get_cart();
$cart_json = json_encode($cart);
?>

<div id="react-cart" data-cart="<?php echo esc_attr($cart_json); ?>"></div>

<?php get_footer(); ?>

Assign this template to your cart page, and your React component will load with all the cart data it needs right from the start.

Absolutely—this is the smartest way to keep your site lightweight. There’s no reason to load Vue/React across every page if you only need a component on the shop or cart page.

Use WordPress conditional tags to load scripts only when needed:

add_action('wp_enqueue_scripts', function() {
    // Load Vue filter only on the shop page
    if (is_shop()) {
        wp_enqueue_script('vue-product-filter', plugins_url('dist/vue-filter.js', __FILE__), [], '1.0.0', true);
    }
    // Load React cart only on the cart page
    if (is_cart()) {
        wp_enqueue_script('react-cart-summary', get_stylesheet_directory_uri() . '/dist/cart-summary.js', ['react', 'react-dom'], '1.0.0', true);
    }
});

This keeps your site fast and avoids unnecessary bloat.

Custom Plugins > Theme Changes #

Always package your components in a custom plugin instead of modifying the parent Storefront theme. This way, when Storefront updates, your code won’t get overwritten. You can even add settings pages to your plugin to tweak component behavior without touching code.

Custom Post Types (CPTs) – Do You Need Them? #

CPTs aren’t required to integrate Vue/React, but they can be useful if you need to manage custom content for your components (like custom filter rules or promotional banners). For example, you could register a Filter Rule CPT, then fetch those rules via PHP in your shortcode callback and pass them to your Vue component as initial data—still no REST API needed.

Avoiding jQuery Entirely #

Vue and React handle all DOM manipulation and event handling natively, so you can replace every jQuery use case. For example:

• Replace jQuery click handlers with Vue’s @click or React’s onClick
• Replace jQuery DOM traversal with framework-specific state management
• Replace AJAX calls (if you ever need them later) with fetch or Axios, but since you’re passing server data upfront, you might not even need this.

Your best bet is to:

1. Build a custom plugin to house all your Vue/React components
2. Compile components as UMD bundles (so they work in the browser without a module bundler)
3. Inject components via shortcodes or custom page templates, passing server-side data directly via data-* attributes
4. Load scripts only on the pages where they’re needed using conditional tags

This approach is reliable, keeps your code maintainable, avoids jQuery mess, and skips the REST API entirely.

内容的提问来源于stack exchange，提问作者Sean Kelly