有时就像花生酱和果酱，两种好东西放在一起会更好。
在本教程中，我将向您展示如何在您的 WordPress 网站中使用 Vue。本教程适用于已经使用 WordPress 和 Vue 编写代码或对两者都感兴趣的人。 PHP、WordPress、Javascript、Vue 方面的知识会有所帮助。
Vue程序员：为什么选择WordPress？
据统计，WordPress 运行着全球约三分之一的网站。如果您在 Vue 中创建了想要共享的内容，WordPress 是一个很好的平台来提供它。
您可以自定义您自己的站点，或在 WordPress 的插件存储库中共享代码。
WordPress 程序员：为什么选择 Vue？
简短的回答是，Vue 以其简单性和健壮性着称，使其成为开发的可靠选择。如果您要向网站添加功能，这是启动和运行的绝佳工具。它使用 JavaScript，因此大多数开发人员都熟悉它。
WordPress 使用 React，我什至可以使用 Vue？
当然可以！虽然 WordPress 中的某些功能可能在 React 中，但您并不仅限于此。
WordPress 是开源的，做让你开心的事。
教程概述
我们将做一个简短的代码来展示在 Vue 中生成的内容。我们将使用一个简单的示例，因为这更多地是关于 Vue 和 WordPress 如何结合在一起，而不是它们的作用。
方法如下：
- 在 WordPress 中创建插件以使用 Code
- 在插件中创建一个简码
- 创建你的 Vue 代码
- 加载Vue，然后加载 strong> 你的代码文件。
- 确保绘制完成后加载.js文件dom。
基本上就是这样。让我们进入细节。
WordPress：插件。
插件简单而强大，它们允许您向您的网站添加功能。该插件将是一个简单的“hello world”类型。我们称之为“wp-vue-tutorial”，让我们开始吧：
1) 在您的 WordPress 插件目录中创建一个新文件夹。
这是保存文件的地方，应该是插件的名字。对于本教程，我们使用：
/wp-content/plugins/wp-vue-tutorial
我们需要一个“主文件”，让我们开始吧。
2) 在目录中，创建一个主文件，名称为插件名称。
文件名为“wp-vue-tutorial.php”，所以应该看起来像：
/wp-content/plugins/wp-vue-tutorial/wp-vue-tutorial.php
是的，插件名、文件夹名和主文件名都是一样的，所以 WordPress 知道在哪里可以找到它.
WordPress 在打开后需要更多关于这个东西的信息。包含在标题中。我们保持简单，所以在 wp-vue-tutorial.php 中，添加以下代码：
更多信息：https: //developer.wordpress.org/plugins/
如果你去你的 WordPress 仪表板，你会看到你的插件。
仪表板->插件
它应该出现在列表中。
3) 激活您的插件。
在插件上点击激活。
现在已加载，但由于没有要运行的代码，所以几乎没有发生任何事情。因此，让我们创建一个简码。
短代码告诉 WordPress 将您的 PHP 代码生成的内容插入到页面或帖子的内容中。
例如，如果用户输入类似 [myshortcode] 的内容，当页面显示时，它将显示“这是我的短代码中的内容。 '
注意：WordPress 当前的文本编辑器 (Gutenberg) 允许您放入内容块。简码仍然有效，实际上有一个专用于简码的块。我们在本教程中使用短代码，因为它是一个有效的标准。
更多信息：https：//codex.wordpress.org/Shortcode_API
4) 在你的插件中创建一个简码。
将以下代码添加到您的插件文件 (wp-vue-tutorial.php):
//添加短代码函数 func_wp_vue(){ return "Hello Shortcode";}add_shortcode( 'wpvue', 'func_wp_vue' );< p >分解：
函数func_wp_vue()返回文本Hello Shortcode。
| add_shortcode( | 使此简码可用。 |
| 'wpvue', | < span>用户在内容中使用的代码 ['wpvue']. |
| 'func_wp_vue' | 该函数返回要显示的字符串。 |
| ); | 简码结束。 |
