【问题标题】:How to use Vue JS with Wordpress using NPM? [closed]如何使用 NPM 将 Vue JS 与 Wordpress 一起使用? [关闭]
【发布时间】:2021-08-19 22:16:25
【问题描述】:

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

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

例如使用 CDN Vue js:

优点:

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

缺点:

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

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

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

【问题讨论】:

    标签: javascript php wordpress vue.js npm


    【解决方案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 来管理我的状态并使用mapActionmapGetter 更新组件。

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

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

    【讨论】:

    • 非常感谢您的推荐。 Sage 工作流程是一个很棒的工作流程,它在 Blade 模板引擎发挥作用时变得更加方便。但是,我更喜欢的方式是不使用这些类型的工作流和框架。我只是想要一种如何将Vue 模块导入我的HTML wordpress 主题的方法。我目前的项目是小型的,不需要庞大的框架。不过,我认为 Sage 是未来的选择。再次感谢:D
    猜你喜欢
    • 2016-11-13
    • 2017-08-13
    • 2018-04-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-09-15
    • 1970-01-01
    • 2018-08-21
    相关资源
    最近更新 更多