javascript - 如何将 Vue 或 React 添加到现有的 Wordpress 站点？

Question

我想知道在不使用 Rest API 的情况下向 Wordpress 站点添加前端组件化框架的最佳方法是什么。

我正在接管两个使用 Woocommerce Storefront 主题构建的网站，并且我想添加一个可靠的前端库。最好是根据我的需要构建自己的？我想避免使用 jQuery，因为我发现它很快就会变得困惑。

最好的做法是构建一个插件，生成一个添加了框架的 Post 类型，或者有没有办法将我的框架添加到整个网站并逐步实现它。

Answer 1

如果您从头开始一个新项目，我建议使用 Sage:https://roots.io/sage/ 。

在任何类型的项目中使用 React/Vue.js 时，一个大问题是您需要设置构建(例如使用 Webpack)、编译它们并充分利用这些框架。 Sage 会为您处理这些任务并拥有 webpack和browserify集成，以便您可以进行开发热加载和生产正确构建。这确实是一个优势。

就您的情况而言，由于您的网站是使用 Storefront 构建的，因此与 Sage 完全集成似乎不是一个选择，但是您仍然可以借鉴 Sage 的一些想法。

Sage 将其脚本设置为可以将脚本分为 routes ，尽管这些 routes与单页应用程序不完全相同。基本上，他们有一个名为 Router 的 util 函数。 ，它将根据插入到body中的类执行JS函数。元素。我发现它与 Vue.js 和 React 配合得非常好。例如:在您的主页中，您想将几个 Vue 组件放置在 <div id="homepage"> 中。元素，您可以按如下方式定义它:

export default {
  init() {
    new Vue({
      el: '#homepage',
      name: 'HomePageApp',
      components: {
        ...
      },
    });
  },
  finalize() {
    // JavaScript to be fired on the home page, after the init JS
  },
};

然后导入并将其添加到您的 Router 中:

const routes = new Router({
  ...
  // Home page
  homepage,
});

我建议在你的 Github 存储库中看看 Sage 如何做到这一点，它非常简单，并且保证了一个组织良好、结构良好的前端:https://github.com/roots/sage/blob/master/resources/assets/scripts/main.js