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,
});

我建议看看Sage如何在你的Github回购中做到这一点，它很直接，并保证组织良好，结构良好的前端：https://github.com/roots/sage/blob/master/resources/assets/scripts/main.js

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

1 个答案: