在 WordPress 中使用 Vue

就像花生酱和果酱一样，有时两种好东西放在一起会更好吃。

在本教程中，我将向您展示如何在 WordPress 网站中使用 Vue。本教程面向已使用 WordPress 和 Vue 编写代码，或对其中任何一种感兴趣的用户。具备 PHP、WordPress、JavaScript 和 Vue 知识将有所帮助。

Vue 程序员：为什么选择 WordPress？

据统计，全球约三分之一的网站运行在 WordPress 上。如果您用 Vue 创建了内容并想分享，WordPress 是一个不错的平台。

您可以自定义自己的网站，或在 WordPress 的插件库上分享您的代码。

WordPress 程序员：为什么选择 Vue？

简而言之，Vue 以其简洁性和稳健性而闻名，使其成为开发的可靠选择。如果您要为网站添加功能，它是一个很好的启动和运行工具。它使用 JavaScript 编写，因此大多数开发人员都很熟悉。

WordPress 使用了 React，那我还能用 Vue 吗？
当然！虽然 WordPress 的一些功能可能在 React 中也有，但你并不受 React 的限制。

WordPress 是开源的，做让你开心的事。

教程概述

我们将编写一段简短的代码，用于显示 Vue 中生成的一些内容。我们将使用一个简单的示例，因为这更多的是关于如何将 Vue 和 WordPress 结合使用，而不是它们的作用。

方法是：

1. 在 WordPress 中创建一个插件来使用代码
2. 在插件中创建短代码
3. 创建你的 Vue代码
4. 加载 Vue，然后加载您的代码文件。
5. 确保在绘制dom 后加载 .js 文件。

基本上就是这样。让我们来看看细节。

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 打开后，需要一些关于它的更多信息。这些信息包含在 Header 中。为了保持简洁，我们在wp-vue-tutorial.php中添加了以下代码：

<?php
/**
 * Plugin Name: WordPress Vue Tutorial
 * Description: A demo on how to use Vue in WordPress.
 */
?>

更多信息：https://developer.wordpress.org/plugins/

如果您转到WordPress仪表板，您将看到您的插件。
仪表板->插件
它应该出现在列表中。

3）激活您的插件。

单击插件上的“激活”。

现在它已加载，但由于没有代码可运行，所以没有什么反应。所以，让我们创建一个短代码。

短代码会告诉 WordPress 将你的 PHP 代码生成的内容插入到页面或帖子的内容中。
例如，用户输入类似[myshortcode]的内容，页面显示时会显示“这是我的短代码生成的内容” 。

注意：WordPress 当前的文本编辑器（Gutenberg）允许您插入内容块。短代码仍然可以使用，事实上，有一个专门用于短代码的块。我们在本教程中使用短代码，因为它是一个有效的标准。

更多信息：https://codex.wordpress.org/Shortcode_API

4）在您的插件中创建一个短代码。

将以下代码添加到您的插件文件（wp-vue-tutorial.php）：

 //Add shortscode
 function func_wp_vue(){
   return "Hello Shortcode";
}
add_shortcode( 'wpvue', 'func_wp_vue' );

分解：
函数 func_wp_vue() 返回文本 Hello Shortcode。

您的文件应如下所示：

<?php
/**
 * Plugin Name: WordPress Vue Tutorial
 * Description: A demo on how to use Vue in WordPress.
 */

//Add shortscode
 function func_wp_vue(){
 return "Hello Shortcode";
}
add_shortcode( 'wpvue', 'func_wp_vue' );
?>

测试一下。
编辑或添加一个新的WordPress页面。在内容区域，输入[wpvue]。
发布页面并查看。你应该会看到Hello Shortcode。

短代码可以返回多个单词，我们也可以在其中放入一个元素。

我们将代码改为：

//Add shortscode
function func_wp_vue(){
  $str= "<div id='divWpVue'>"
    ."Message from Vue: "
    ."</div>";
  return $str;
} // end function

再次测试。

设置 Vue

要使用 Vue，你需要三样东西：

1. 需要在页面上加载Vue js 文件，这样才能使用该框架。
2. 您需要页面上有一个 Vue 可以工作的元素。通常是一个 div。
3. 您需要将Vue 代码放在 .js文件中才能在元素中完成其工作。

加载 Vue.js

让我们从添加 Vue 开始。您可以通过 CDN 链接添加 Vue。Vue 有两个版本：一个用于开发环境，带有调试选项；另一个用于生产环境，速度更快、更精简。
我们将使用开发环境：https://cdn.jsdelivr.net/npm/vue/dist/vue.js

我们需要将其加载到 WordPress 中，这可以通过“ wp enqueue scripts ”和“ wp_register_script ”这两个钩子来实现。
这个钩子会在需要时自动将脚本加载到 WordPress 的 Header 中。

它看起来像：

function func_load_vuescripts() {
 wp_register_script( 'wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
}
add_action('wp_enqueue_scripts', 'func_load_vuescripts');

分解：

更多信息：

• 注册脚本：https://developer.wordpress.org/reference/functions/wp_register_script/
• 排队脚本：https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts

我们将代码添加到您的插件文件中，位于短代码上方。
它应该如下所示：

<?php
/**
 * Plugin Name: WordPress Vue Tutorial
 * Description: A demo on how to use Vue in WordPress.
 */

//Register Scripts to use 
function func_load_vuescripts() {
 wp_register_script( 'wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
}
add_action('wp_enqueue_scripts', 'func_load_vuescripts');

//Add shortscode
function func_wp_vue(){
  //Build String
  $str= "<div id='divWpVue'>"
  ."Vue code here: "
  ."</div>";

  //Return
  return $str;
} // end function

//Add shortcode to WordPress
add_shortcode( 'wpvue', 'func_wp_vue' );
?>

目前，我们已经告诉 WordPress 关于 Vue.js 的信息，但还没有加载它。您可以在短代码函数中加载它，这样当短代码运行时，它就会触发。明白了吗？

在您的短代码函数中包含以下内容：

//Add Vue.js
  wp_enqueue_script('wpvue_vuejs');

分解：

它看起来应该是这样的：

function func_wp_vue(){
  //Add Vue.js
  wp_enqueue_script('wpvue_vuejs');
  
  //Build String
  $str= "<div id='divWpVue'>"
  ."Vue code here: "
  ."</div>";

  //Return
  return $str;
} // end function

现在，如果您运行它，并没有太大的变化，但是如果您查看页面的源代码，您会发现：

<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js?ver=5.1.1'></script>

Vue 现在已经加载，我们可以使用短代码中生成的 div（' divWpVue '），我们需要的只是一些在该 div 中运行的 Vue 代码。

为 Vue 创建代码文件

创建一个新文件：vuecode.js您的插件目录：
wp-content/plugins/wp-vue-tutorial

您应该有 2 个文件：

• wp-vue-tutorial.php
• vuecode.js

更多信息：
https://vuejs.org/v2/guide/

这是一个非常简单的演示，因此包含以下代码：

var app = new Vue({
  el: '#divWpVue',
  data: {
    message: 'Hello Vue!'
  }
})

分解：

有关 Vue 的更多信息：

• https://vuejs.org/v2/guide/index.html
• https://vuejs.org/v2/guide/#Declarative-Rendering

为了显示该消息，您需要在 div 中包含数据消息。将短代码函数 ( func_wp_vue ) 更改为包含{{message}}。

双花括号是将 Vue 内容添加到 HTML 文件中的一种方式。如果你在分配给 Vue 实例的元素中添加{{message}} ，它就会神奇地出现。当然，这只是一个简短的非技术性答案。

重要！如果您检查文件，发现一切正常，您会在 {{message}} 的位置看到“ Hello Vue!”。如果您看到{{message}}，则表示存在问题。

让我们将{{message}}添加到短代码中。

function func_wp_vue(){
  //Add Vue.js
  wp_enqueue_script('wpvue_vuejs');
  
  //Build String
  $str= "<div id='divWpVue'>"
  ."Message from Vue: {{ message }}"
  ."</div>";

  //Return
  return $str;
} // end function

如果您现在测试它，它将不起作用，将显示{{message}} ，而不是“Hello Vue！”

为什么？因为我们还没有加载你的vuecode.js 文件。我们可以像加载 Vue CDN 文件一样加载它，对吧？

嗯……不完全是。你说的没错，但有几个问题需要注意。我们来分析一下。

要注册 vuecode.js，您需要执行如下操作：

 wp_register_script('my_vuecode', 'vuecode.js')

不，不会，因为 WordPress 找不到vuecode.js。

问题：您的文件未加载

请记住，短代码会显示在与插件路径不同的页面上。它就像一个后勤镜厅，实际显示的位置与实际显示的位置完全不同。

要解决这个问题，您需要更精确地指定文件的位置。这可以通过添加一个 WordPress 函数来处理，该函数返回您正在使用的插件文件的路径。plugin_dir_url可以解决这个问题。

wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js') 

有关插件网址的更多信息：https://codex.wordpress.org/Function_Reference/plugins_url

问题：Vue.js 需要先加载

您的 vuecode.js 在 Vue 上运行，因此请确保在开始运行 Vue 代码之前已加载这些文件。

为了确保这一点，请通过在 register_script 函数中添加依赖项来告知 WordPress 它依赖于 Vuejs 。使用 Vue.js 脚本寄存器中的句柄。

wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js', 'wpvue_vuejs' );

陷阱：包含 Vue 代码的文件必须在 DOM 加载之后

为什么？它加载了head中的脚本，但是你的 vuecode.js 控制着body中的一个 div ，而它还没有加载。它找不到它，并抛出了错误。

因此，首先加载 Vue.js，然后加载包含 DOM 的主体，最后加载控制脚本 ( vuecode.js )。您可以通过在注册脚本中添加参数“true”来实现这一点。“ true ”指示WordPress 在页脚中加载脚本。

它看起来应该是这样的：

wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js', 'wpvue_vuejs', true );

分解如下：

加载脚本的函数应该如下所示：

//Register scripts to use
function func_load_vuescripts() {
    wp_register_script('wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
    wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js', 'wpvue_vuejs', true );
}
add_action('wp_enqueue_scripts', 'func_load_vuescripts');

有关注册脚本的更多信息：

• 注册脚本：https://developer.wordpress.org/reference/functions/wp_register_script/
• 插件网址：https://codex.wordpress.org/Function_Reference/plugin_dir_url

这样就应该完成了。但是，你仍然看不到任何东西，为什么呢？
毕竟，你只是注册了脚本。WordPress 知道所有相关信息，但你还没有告诉它触发它。

别忘了加入/加载脚本

好的，这个就像将 Vue.js 脚本放入队列一样。将以下内容添加到短代码函数“ func_wp_vue ”中。

wp_enqueue_script('my_vuecode');

' func_wp_vue ' 应该看起来像：

//Return string for shortcode
function func_wp_vue(){
  //Add Vue.js
  wp_enqueue_script('wpvue_vuejs');
  //Add my code to it
  wp_enqueue_script('my_vuecode');

  //Build String
  $str= "<div id='divWpVue'>"
    ."Message from Vue: {{ message }}"
    ."</div>";

  //Return to display
  return $str;
} // end function

//Add shortcode to WordPress
add_shortcode( 'wpvue', 'func_wp_vue' );

总结一下：

你的插件应该名为“wp-vue-tutorial”。在插件目录中，应该有两个文件：

• vuecode.js（其中包含 Vue 代码）
• wp-vue-tutorial.php（包含 WordPress 代码）

vuecode.js

运行 Vue.js 的 Javascript 文件应如下所示：

var app = new Vue({
  el: '#divWpVue',
  data: {
    message: 'Hello Vue!'
  }
})

wp-vue-tutorial.php

定义插件并包含短代码的 WordPress 文件应如下所示：

<?php
/**
 * Plugin Name: WordPress Vue Tutorial
 * Description: A demo on how to use Vue in WordPress.
 */

//Register scripts to use
function func_load_vuescripts() {
    wp_register_script('wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
    wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js', 'wpvue_vuejs', true );
}
//Tell WordPress to register the scripts 
add_action('wp_enqueue_scripts', 'func_load_vuescripts');


//Return string for shortcode
function func_wp_vue(){
  //Add Vue.js
  wp_enqueue_script('wpvue_vuejs');
  //Add my code to it
  wp_enqueue_script('my_vuecode');

  //Build String
  $str= "<div id='divWpVue'>"
    ."Message from Vue: {{ message }}"
    ."</div>";

  //Return to display
  return $str;
} // end function

//Add shortcode to WordPress
add_shortcode( 'wpvue', 'func_wp_vue' );
?>

注意：您可以将短代码添加到主题的 functions.php 文件中，只要主题仍在使用，或者其 functions.php 文件没有因升级而被覆盖，它就能正常工作。
我更喜欢这个插件，因为它将样式与内容分离，而且我的 Vue 代码通常都是关于内容的。

更多信息：
https://codex.wordpress.org/Functions_File_Explained

如果您使用主题功能文件，则需要调用与您的主题相关的文件路径，而不是插件。

更多信息：
https://codex.wordpress.org/Function_Reference/get_template_directory

下载文件

您可以从以下位置下载文件：
https://github.com/workingwebsites/wp-vue-tutorial

结论

好吧，“Hello Vue” 这个词并没有真正引起轰动。但是，一旦你理解了它，你就能知道如何通过 Vue 为你的 WordPress 网站添加大量功能。

在 WordPress 网站中使用 Vue，访问 API 并提升网站交互性会变得更加轻松。同样，如果你用 Vue 编写了一些精妙的代码，那么将其放入 WordPress 网站（这类代码有很多）也并非难事。

就像花生酱和果酱一样，两种好东西结合在一起会让它变得更好！