如何在 WordPress 网站中呈现我的 Vuejs 应用程序答案

【问题标题】：How to render my Vuejs App in a WordPress site如何在 WordPress 网站中呈现我的 Vuejs 应用程序
【发布时间】：2021-05-14 16:31:05
【问题描述】：

在我的functions.php 文件中，我有这个代码：

// Load both vue from the CDN as well as the scripts for the slideout cart and checkout
function load_vue_scripts()
{
    $scriptpath =  (get_stylesheet_directory_uri() . "/vue/slideout-cart/dist/slideout-cart.js");
    wp_register_script('vuejs_source', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
    wp_register_script('slideout-cart', "{$scriptpath}", 'vuejs_source', 1, true);
    plugin_dir_url(__FILE__) . "vue-cart/public/img"]);
//    echo $scriptpath;
    wp_enqueue_script('vuejs_source', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
    wp_enqueue_script('slideout-cart', "$scriptpath", 'vuejs_source', 1, true);
}

这会从 jsdelivr CDN 加载 Vuejs，并从我的 Vue 应用程序中的 dist 目录加载我的脚本。然后，我为我的应用程序创建一个这样的 div：

<div id="slideout-cart" class="container" role="main"></div>

然后，我告诉我的应用安装在那个 div 上：

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#slideout-cart");

我在 chrome 上的源选项卡中看到脚本，我什至看到 console.log() 来自应用程序，但没有呈现任何内容。我做错了什么？

【问题讨论】：

对我来说看起来不错，检查组件是否已加载到 DOM 中（如果 HTML 在#slideout-cart 中可用）。如果是这样，请检查是否有隐藏元素的样式。您是否在与 DOM 元素相同的页面上下文中（不在 iframe 中？）提供脚本？

标签： javascript wordpress vue.js

【解决方案1】：

事实证明，我在渲染应用程序时所做的一切都是正确的，但忘记检查我的网络选项卡，发现我没有发送正确的凭据来初始化购物车，所以我从我的api 和我的应用程序根本没有呈现

【讨论】：