代码观察者

如何在 WordPress 中使用 Vue JS

Rifat WordPress Tutorials May 3, 2024

在当今的数字环境中，创建动态和交互式的 Web 体验已成为开发人员的首要任务。随着 Vue.js 等 JavaScript 框架的兴起以及 WordPress 等内容管理系统 (CMS) 的广泛使用，将这些技术结合起来已成为构建功能丰富的网站的强大解决方案。

如何在 WordPress 中使用 Vue JS

在本指南中，我们将探索如何在 WordPress 生态系统中利用 Vue.js 的强大功能。我们将介绍如何在 WordPress 中设置 Vue.js 的过程，涵盖从安装到无缝集成的高级技术等所有内容。无论您是初学者还是经验丰富的开发人员，本指南都将为您提供有效使用 Vue.js 和 WordPress 以及创建引人入胜的 Web 体验所需的知识和工具。

什么是 Vue Js？

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它以简单性和灵活性而闻名，是开发人员创建动态和交互式 Web 应用程序的热门选择。

Vue.js 采用基于组件的架构，允许开发人员将其应用程序分解为可重复使用和模块化的组件，这些组件易于管理和维护。凭借其平缓的学习曲线和丰富的文档，Vue.js 使开发人员能够轻松高效地构建现代 Web 应用程序。

创建令人惊叹的网站

使用最好的免费页面构建器 Elementor

现在开始

为什么在 WordPress 中使用 Vue？

有几个令人信服的理由将 Vue.js 与 WordPress 结合使用。

首先，Vue.js 以其简单性而闻名，使其成为希望快速学习和采用现代 JavaScript 框架的开发人员的理想选择。

此外，将 Vue.js 与 WordPress 集成还有实际好处。

例如，jQuery 等传统库的可扩展性较差，在某些情况下可能会导致冲突。通过结合使用 Vue.js 和 WordPress 作为 API，开发人员可以显著提高其网站的速度和性能。

Vue.js 还具有高度可组合性，可以更轻松地在插件、管理面板和 WordPress 网站的其他区域内实现用户界面。其组件驱动架构使其成为在 WordPress 生态系统中构建现代 Web 应用程序的多功能高效工具。

此外，WordPress 为超过 25% 的已知网络提供支持，这意味着它可能已经成为您或客户的开发堆栈的一部分。WordPress 的广泛采用使得集成 Vue.js 成为前端开发的自然选择。

如何使用 WordPress 和 Vue？

这里我们将讨论两种同时使用 Vue 和 WP 的方法。让我们看看如何让它们一起工作！

1. 创建 SPA 作为子网站/应用程序

Vue 可用于在 WordPress 管理面板内开发“子网站”。此方法有利于创建需要选项卡系统或多页系统的复杂插件或自定义管理页面。

与常规的 WordPress 方法不同，使用 Vue 可以在页面之间实现更平滑的过渡，而无需重新加载整个页面，从而增强用户体验。

此外，与标准 WordPress UI 元素相比，Vue 可以创建更优雅、更定制的 UI 元素。下面是使用 Vue 创建的自定义管理页面的示例。

这里展示的用户界面 (UI) 属于 WordPress 管理面板中的 WP Rocket 插件。此 UI 完全是自定义的，具有以选项卡形式呈现的自己的子页面。每个选项卡对应一个不同的子 URL，方便与他人共享。本质上，它类似于 WP 管理面板中的微型网站。

使用 Vue 和 Vue-router 可以轻松实现此类定制。但是，有一个方面需要特别注意：处理 URL。鉴于两个“网站”共存——WordPress 管理面板和 Vue 支持的界面——可能会出现潜在的 URL 冲突。

为了解决这个问题，只需在 Vue Router 实例中进行简单的调整即可。具体来说，您需要修改两个选项：

  1. 基本选项：这应该设置为您的自定义 WP 页面路线。
  2. 模式选项：这应该设置为“哈希”。

采用“哈希”模式可确保使用哈希而不是修改整个 URL，从而减轻潜在的冲突。

此外，值得注意的是，您还可以使用类似的技术替换其他 WordPress 页面，例如内容编辑器页面，如Elementor编辑器所示。

传统的 WordPress 编辑器转变为结构化界面，使用井号来划分子 URL。

本质上，可以在 WordPress 管理面板的各个部分内建立子网站，例如插件页面、编辑器、仪表板或中台界面。

为此，该过程涉及使用 Vue CLI 或其他工具来生成独立的 Vue 单页应用程序 (SPA)。随后，相应地配置路由器的基础和模式选项，导出应用程序，并通过 WordPress 生态系统中的适当挂钩将其集成到 WordPress 中。

2. 在前端或管理界面创建可重复使用的组件

网站包含各种微交互，例如菜单切换、下拉菜单、折叠面板和轮播。这些元素共同构成了所谓的 UI 套件。此外，某些组件可能会异步与数据交互，例如点赞或投票按钮、表单和自定义媒体播放器。

值得注意的是，将 Vue.js 组件集成到 WordPress 或任何其他后端模板时，可能需要选择 Vue 的运行时 + 编译器版本。这可确保无缝功能和与后端环境的兼容性。

某些组件会与渲染的数据交互，而其他组件则不会。基于这种区别，需要创建不同类型的组件。一些组件会有自己的模板。

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

而其他人将会利用生成的标记。

<my-component inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>
</my-component>

Vue 还可用于创建原生 Web 组件，提供类似于 ionicons（使用 Stencil JS 制作）的跨多个项目可重用的优势。

这些组件可以集成到 WordPress PHP 模板或生成 HTML 的函数中。可以通过将数据字符串化为全局变量或直接将其分配给组件 prop，将数据从 WordPress 传递到 Vue 实例或组件。该概念涉及加载 Vue并将 Vue 实例与 HTML ID 关联以实现无缝集成。

<?php

function themeslug_enqueue_style() {
    wp_enqueue_style( 'my-theme', 'style.css', false );
}

function themeslug_enqueue_script() {
    wp_enqueue_script( 'my-js', 'filename.js', false );
}

add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style', 10 );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script', 10 );
?>

这是 WP 模板的上部和下部。

<html>
<div id="app">
  {{ message }}
</div>
</html>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

3. 创建单独的前端网站

最后，需要强调的是，这个特点可能对某些人来说很明显，但并非所有人都能意识到。

自 4.7 版以来，WordPress 已整合 REST API，使开发人员能够借助插件访问各种端点并检索帖子、页面和自定义字段等数据。此功能符合 Headless CMS 的概念。

事实上，这种功能的应用范围远远超出了人们最初想到的范围。使用 WordPress REST API 的独立前端可以采用多种形式：

  • SPA（单页应用程序）应用或网站
  • SSR（服务器端渲染）应用或网站
  • 遵循 JAMStack 架构的静态生成网站
  • 渐进式 Web 应用程序 (PWA)
  • 移动应用程序
  • 另一个使用更简单或更快的模板引擎的单片后端

本质上，任何可以使用 API 且可以完全控制前端的客户端都是可行的。WordPress 本质上充当类似于后端 API 的数据源。值得注意的是，ACF（高级自定义字段）或 Pod 等插件也可以通过 API 公开自定义字段。

此外，您可以灵活地向 WordPress API 添加自定义端点并利用身份验证系统，包括生成随机数和其他必要的组件。

包起来

总之，Vue.js 与 WordPress 的集成为开发人员提供了一个强大的解决方案，用于在 WordPress 生态系统中创建动态和交互式 Web 体验。Vue.js 以其简单性和灵活性而闻名，它使开发人员能够通过其基于组件的架构轻松高效地构建现代 Web 应用程序。

Divi WordPress Theme