如何使用 NPM 将 Vue JS 与 Wordpress 一起使用？ [关闭]

Question

使用 Vue JS（通过安装 NPM）和将 vue 模块一起导入 Wordpress HTML 模板的最佳方法是什么？

有很多方法可以做到这一点，但它们都有自己的缺点和优点。

例如使用 CDN Vue js：

优点：

• 使用简单。
• 能够进行简单的交互操作和 DOM 处理。

缺点：

• 您无法在 Vue 中使用 <template> 标签。
• 无法使用scoped css/scss 样式。
• 无法使用其他 Node 模块，例如 Webpack 和其他东西。
• 代码可能更混乱。

[已编辑]：我不想使用 Wordpress 进行 SPA 页面。我只想管理组件和重复代码并将它们分成组件。

编辑： 这是我已经完成的解决方案。如果有人提出请求，我会感谢它。 https://github.com/ImAli7/vuepress

Answer 1

我创建了使用 VueJS 和构建过程的主题。我使用了一个名为sage 的入门主题，它是由roots.io 团队创建的。

Sage 被介绍为“具有现代开发工作流程的 WordPress 入门主题”，而且这样做是正确的。他们有一个设置“JavaScript DOM-Based routing”，基本上可以让您在特定页面上运行特定脚本。

这在使用 vueJS 时非常方便。您可以通过this particular post 讨论如何将 vuejs 添加为依赖项。

它有 browsersync 和 hot-module-reload，可以在不重新加载的情况下更新您的 chnages。您可以使用yarn start 进行开发，一旦您想构建主题的生产版本，您只需运行yarn build:production。

在我的主题中，我必须创建多个不直接相互连接的组件，但我添加了vuex 来管理我的状态并使用mapAction 和mapGetter 更新组件。

您将无法通过 CDN 实现这一目标。虽然它有使用 NPM 的麻烦，但它的工作流程也让您能够充分利用 VueJS。

我还写了一篇博客，解释了我如何使用 Github Actions 将更新的代码推送到生产或登台服务器。你可以在这里阅读 - https://bhanusingh.in/deploying-sagewordpress-starter-theme-to-your-host-using-github-actions