如何在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中，但您不仅限于此。

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将其打开后，需要有关此东西的更多信息。包含在标题中。我们保持简单，因此在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. 您需要.js文件中的Vue代码才能在元素中进行工作。

加载Vue.js

让我们从添加Vue开始。您可以通过指向CDN的链接添加Vue。有两种版本，一种用于带有调试选项的开发，一种用于更快，更精简的产品。
我们将使用开发者之一：https : //cdn.jsdelivr.net/npm/vue/dist/vue.js

我们需要将其加载到WordPress中，这可以通过“ wp enqueue脚本”和“ wp_register_script ”的魔术来完成。
必要时，此挂钩会自动将脚本加载到WordPress的头部。

看起来像：

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的信息，但尚未加载。您将其加载到shortcode函数中，以便在运行shortcode时触发。说得通？

在您的简码函数中包括以下内容：

//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，我们可以使用在简码（’ divWpVue ‘）中生成的div ，我们需要的是一些在该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}}。

双大括号是在HTML文件中包含Vue内容的一种方式。如果在分配给Vue实例的元素内添加{{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' );

GOTCHA：带有Vue代码的文件必须在DOM加载后出现

为什么？它在head中加载脚本，但是您的vuecode.js在主体中控制着一个div，并且尚未加载。它找不到它并引发错误。

因此，首先加载Vue.js，然后加载具有DOM的主体，然后加载控制脚本（vuecode.js）。你可以做到这一点通过寄存器脚本通过添加一个“真”值的参数。’ 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”的插件。在plugin目录中，应该有2个文件：

• 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网站（其中有很多）并不是一个大技巧。

就像花生酱和果酱一样，将两个好东西结合起来会变得更好！

原文：https://dev.to/workingwebsites/using-vue-in-wordpress-1b9l