在wordpress与vuejs中创建混合单页应用程序

使用vue.js的WordPress应用程序为您的WordPress应用程序-逐行与反应和角度相似的逐阶段的渐进式JavaScript框架.

在本文中，我将向您展示如何在现有的WordPress应用程序中与Vue.js -一个非常流行的JavaScript框架集成在现有的WordPress应用程序中集成，用于开发丰富的用户界面.我将通过从头开始构建VUE应用程序的整个过程，与WordPress REST API进行交互，并使用Vue的可重用组件创建搜索应用程序.

继续读取，或使用以下链接跳转:

• WordPress中的Vue Spa概述
• Vue单页搜索app

的解剖

• 使用Vue-CLI设置本地开发工作流程
• 使用Vue-Cli
脚手架脚手架app
• 与WordPress
集成Vue Spa
• 在Wordpress
中构建单页搜索应用程序
• 用Vue单文件组件构建搜索应用程序

如果您从未使用Vue或其他现代JavaScript框架/库，则是跳入的好时机.虽然施用您的框架数量施用您的JavaScript游戏可能是非常压倒的，Vue会让旅程变得更加压倒不到愉快.

注意:本文适用于中级高级WordPress开发人员，并假设您具有PHP，JavaScript，Vue.js和WordPress REST API的工作知识.如果您想要一种进修，我建议您阅读以下内容:

• WordPress开发人员的JavaScript
• WordPress REST API
的快速入门指南
• JavaScript和WordPress REST API:了解JARGON

熟悉vue.js(2.x)也是必不可少的.单页App(SPA)使用许多Vue的功能，例如单文件组件，自定义事件，计算属性，生命周期挂钩，以及与WordPress REST API交互的AxiOS.如果你是vue的新手，它真的很容易拿起，你可以在这些教程中只有几个小时开始:

• vue.js 2 - Academind的入门
• vue.js介绍vue mastery

虽然Vue应用程序可以用纯ES5语法编写，但我将使用版本ES6和ES7中引入的JavaScript的一些新功能.如果您需要使用ES6加快速度，请查看以下内容:

• es6 javascript -基础
• The WordPress Developer的ES2015指南(ES6)

是否需要使用现代的javascript或vue.js将完全取决于您的要求和偏好.我的目标是帮助您探讨使用实用搜索应用程序在WordPress中集成单页应用程序的可能性.让我们开始开始！

wordpress

中的Vue Spa概述

对于本文，我在wordpress与vue.js中的单个页面搜索app使用了二十十七字wordpress主题的子主题.您可以从这里下载孩子主题，并与文章一起关注.

搜索应用程序可以使用自定义页面模板在任何WordPress页面上呈现.页面模板基本上使用现有的DOM元素提供vue实例来安装.

集成WordPress中的Vue.js应用程序与自定义页面模板

应用因此采用混合或混合方法，其中服务器端应用程序(WordPress)也用于前端，但是它的部分用客户端应用程序呈现，如Vue.这与可以使用无头或解耦CMS的纯水疗中心不同，其中服务器端引擎仅负责提供内容(通过API)并且不会生成用于渲染的HTML.

使用vue.js

增强搜索体验

在传统的搜索方案中，每个对服务器的请求都会导致页面重新加载.但是，使用Vue.js或spa方法，当用户与搜索交互但没有常量重新加载时，该页面被动态更新.这使得一个非常令人愉悦的用户体验.事实上，你可以在这支笔中尝试一下我创建的笔:

我的Vue搜索应用程序在上面的笔的示例中构建.所以，让我们在潜入代码之前了解搜索应用程序的内部工作.

Vue单页搜索app

的解剖

下面的信息图解释了搜索应用程序如何使用彼此交互的多个可重用组件来组成.

Vue单页面搜索app

在高级别，这是各种组件所做的:

• AppNavigation为Vue路由器提供路由器链接，以呈现AppQuickSearch和AppCustomSearch组件.
• AppQuickSearch和AppCustomSearch作为父组件作为AppFilterSwitches和AppGetPosts工作.但是，它们导致两个完全独立的搜索应用程序，每个搜索应用程序都配备了自己的数据，方法和属性.
• AppFilterSwitches渲染输入切换开关，可以是复选框或单选按钮，具体取决于传递给它的参数.
• AppGetPosts从WordPress REST API获取数据，并使用搜索键和切换输入过滤.然后，在过滤结果中调用每个帖子的AppDisplayPost组件.
• AppDisplayPost使单个帖子项目的标记呈现标记，并在搜索结果中显示它.

所有这一切都在分配给WordPress中的特定页面的自定义页面模板内.

使用Vue单文件组件

您可能已经看到使用使用IN-DOM模板或JavaScript模板字符串的Vue.component语法创建的vue组件的许多示例.但是，要在WordPress中构建搜索应用程序，我已经使用了Vue强大的单文件组件.

单个文件组件具有许多固有的优势-提供预编译的JavaScript(渲染功能)到浏览器，语法突出显示，不区分组件选择器和组件范围的CSS来命名为少数几个.它们还允许我通过将CodeBase拆分为多个(.vue)文件来编写模块化和可管理的代码.

现在你有一个相当有效的事情，让我们开始构建应用程序.

使用Vue-CLI设置本地开发工作流

将代码分为多个(.vue)文件，使用单文件组件将需要使用vue loader，webpack，babel等的开发工具.然而，不要让这会让你放弃保持非常简单，不处理配置文件.

使用Vue-Cli，您可以快速脚手架应用程序预先配置的Vue应用程序，该应用程序的最佳构建工具是现代前端工作流程.所以，让我们先设置CLI.

步骤1:安装node.js

要使用Vue-CLI，您将需要在系统上安装的node.js(8.x首选，NPM版本3+).您可以在此处从Node.js下载页面下载平台的安装程序.一旦设置为启动，测试以下命令工作:

• node--version和npm--version

第2步:安装Vue-CLI

接下来，打开系统的终端(在我的情况下PowerShell)，并通过运行npm install-g vue-cli命令在全局中安装Vue-CLI(2.x).一旦完成，测试它通过运行vue--version命令来工作.

设置Vue-CLI(2.x)以创建Vue Apps

在上面的图像中，您将注意到我还使用npm install-g eslint全局安装ESLint.这是因为我使用Visual Studio Code编辑器及其插件来格式化和刷我的javascript.您可以使用您选择的任何代码编辑器，但强烈推荐使用JavaScript Linter配置一个.

与完成的基本设置，让我们在webless与Vue-CLI中创建一个应用程序.

使用Vue-CLI

脚手架appolding a
要创建VUE应用程序，我使用了官方WebPack-Simple VueJS-Template.但是，您可能希望根据您的要求使用更复杂的模板.

模板使用webpack设置Vue项目，并使用开发服务器和其他现代构建工具配置它.这为我们提供了精心制作的开发工作流程.除此之外，它允许我们在开发期间使用NextGen(ES6/ES7)JavaScript编写代码，但在ES5中运送编译的JavaScript捆绑包以获得更好的浏览器兼容性.

步骤1:设置WordPress中的VUE应用程序

要设置VUE项目，请使用系统的终端导航到WordPress主题或子主题.在这里，我使用PowerShell(在Windows 10中)与Visual Studio代码编辑器集成.

导航到Wordpress主题 的目录

步骤2:使用webpack-simple模板创建Vue应用程序

next，使用项目名称(我的示例中的SPA)替换为project-name，替换project-name)，然后按照屏幕上的说明进行操作.

使用vue init和webpack模板

注意:如果您跟随我的Vuetwentyseventeen儿童主题，请跳过此步骤.它已经包含spa项目文件夹中的应用程序.

这在<project-name>目录中创建了VUE项目，具有现代构建工具的配置.

步骤3:安装开发依赖项

如果您使用代码编辑器向您的WordPress主题接头，并在新建的项目文件夹中查看在许多新文件中，您会注意到一个名为package.json的文件.它基本上列出了应用程序所需的所有开发工具.仍然需要安装这些工具，并执行此操作，请执行以下操作:

• cd project-name(替换项目名称与您的项目文件夹)
• npm install

然后

npm将下载并安装名为node_modules

的文件夹中的所有所需依赖项

使用npm 安装开发依赖项

请注意，我们不会在WordPress中部署任何这些下载的文件.它们只需要在开发阶段.

步骤4:与WordPress

一起运行webpack dev服务器

最后一步涉及运行上一步中安装的WebPack开发服务器.首先可能似乎很奇怪，但您必须运行开发服务器(在上一步中安装)，并将其与当地WordPress服务器(XAMP，WAMP，VVV等)一起运行.

即使VUE SPA是客户端应用程序，它最初需要由服务器提供服务，并且WebPack服务器将为我们执行此操作.只有在开发完成时，我们将通过WordPress服务于最终的JavaScript捆绑包.

要启动开发服务器，请从Vue项目文件夹运行命令npm run dev.然后，您将在浏览器中看到Starter Vue应用程序自动打开localhost:8080.

运行webpack开发服务器

vue bundle(build.js)

如果您查看浏览器中Starter应用程序的页面来源，您将注意到该页面仅包含一个脚本文件- build.js.这是因为当您运行开发服务器时，webpack自动编译Vue应用程序并将其捆绑在一起绑定到单个JavaScript文件中的任何其他依赖项.

但是，请注意，该文件在系统上没有身体存在，并且在运行时由节点和WebPack动态生成.

通过webpack在运行时动态生成的javascript包

要生成可以使用您的应用程序发货的物理构建文件，您必须运行npm run build，我们将在稍后阶段看到.

在此阶段，我们有一个由DelionPress主题文件夹中的开发服务器提供的全功能Vue应用程序.但是，它还与WordPress无关.所以，让我们来看看如何将VUE应用程序与WordPress主题集成.

与WordPress

集成Vue Spa>

与wordpress集成Vue应用程序基本上需要三件事:

• WordPress中的DOM元素，用于安装在

上的VUE应用程序

• 在Wordpress
中征集Vue Bundle
• 通知Wue WordPress
中的DOM安装点

在Wue

提供WordPress中的DOM元素

您可能希望在单个WordPress页面或多页或有条件的页面上钩住VUE应用程序.所有VUE需求都是您选择的WordPress页面上存在的DOM元素.

为此，您可以使用WordPress Template Hierarchy来决定需要编辑的必要模板文件.在我的示例中，我希望搜索应用程序出现在使用特定自定义页面模板的任何WordPress页面上.您可以根据要求使用常规页面模板来定位特定页面.

自定义页面模板templates/vue-search-app-template.php我的示例子主题提供DOM元素#wp-vue-app f for Vue.

加载GIST FC6EC65077819AAD1A33615EEC47DDF9

在WordPress

中注册VUE应用程序

让WordPress了解Vue应用程序，您必须在WordPress中注册/浏览Vue Bundle.但是，在开发期间的每次修改后生成构建文件是不可行的.为此，我们可以利用您之前看到的动态构建.

只要WebPack开发服务器正在运行，我们就可以使用动态构建路径http://localhost:8080/dist/build.js在WordPress中注册Vue脚本.

WebPack服务器还将自动重新编译Vue Bundle并在修改应用程序时更新页面.

在开发期间注册WordPress中的动态构建路径

这是您在开发期间必须运行本地WordPress服务器和WebPack服务器的原因.开发完成后，您必须修改路径以反映运行npm run build生成的物理文件.

在开发后的Wordpress中注册物理构建文件

还注意，除了最终的VUE捆绑包外，Vue项目文件夹中的任何文件都不需要与WordPress主题一起发布.它们只需要在开发期间，并且当您必须进行修改以重新生成Vue Bundle时.

在我的主题示例中，我注册了includes/enqueue-scripts.php

中的vue捆绑包
加载GIST E786B9C302896B22EE4001A8D57AA02C

通知Vue关于WordPress

的安装点

最后，要在WordPress中加载Vue应用程序，所需的所有内容都是告诉Vue在哪里安装自己.这是通过在VUE项目的main.js中指定WordPress DOM元素的WordPress DOM元素来完成.或者，您也可以使用$mount方法.

在我的示例中，我将应用程序安装在我的自定义页面模板的#wp-vue-app div容器上.

使用'el'选项

并就像那样，启动器Vue应用程序将在WordPress中呈现.

呈现Wordpress 中的入门Vue应用程序

很棒，随着Vue Starter App成功注入WordPress，您现在可以与Vue建立几乎任何东西.所以，让我们进入我的Vue搜索应用程序的详细信息.

在WordPress

中构建单页搜索应用程序

如果您查看文章开头的流程图，您将能够与下面显示的最终搜索应用程序相关联:

在Wordpress 中构建Vue搜索应用程序

项目文件夹结构

要构建此，我只是将Vue Starter应用程序用作基础.我从Vue项目中摆脱了spa/index.html和src/assets，并在以下文件夹结构中到达:

wordpress 中的Vue搜索应用程序的文件夹结构

如果您想知道子主题中的includes文件夹，则是因为我使用functions.php来指定WordPress Hooks，并在includes/下定义各个PHP文件中的相应回调.我更倾向于将所有内容倾倒在一个functions.php文件中.

加载GIST CF0D04AA7E77A50D479BeedB25D4E650

为eslint和eCAmascriptNext的其他依赖项添加(可选)

如果您打算使用eslint(我强烈推荐)或eSync/await等esnext功能，您必须为项目添加一些额外的开发包.

配置WordPress和Vue

的eslint
要配置eslint，我已安装eslint-plugin-vue插件和eslint-config-wordpress配置.为此，请停止开发服务器(Ctrl + C)，然后从Vue项目文件夹中运行以下内容:
npm install--save-dev eslint eslint-plugin-vue
npm install--save-dev eslint-config-wordpress

下一个，将以下内容添加到.eslintrc.json文件:
"extends": ["eslint:recommended", "wordpress", "plugin:vue/recommended"]

这将设置WordPress的JavaScript编码标准，以及Vue的预定义的Linning规则.与像VS代码这样的现代编辑器，这非常有助于我捕获和修复错误:

在Visual Studio代码中与eslint捕获错误

为异步/等待添加Babel预设

Babel预设超出了本文的范围，但以下将基本允许您在VUE应用程序中使用ES7 Async/等待.为此，您必须通过运行添加babel-preset-vue-app:
npm install--save-dev babel-preset-vue-app

然后，将Preset vue-app添加到Vue项目文件夹中.babelrc文件:
"presets": [["env", { "modules": false }], "stage-3", "vue-app"]

完成后，不要忘记使用npm run dev启动开发服务器.我的示例Vue Child主题已经为您配置了所有这些，因此您只需通过在spa目录中运行npm install来安装包.

使本地WordPress数据可用于Vue

vue最终在浏览器中运行的JavaScript，因此，它无法访问WordPress中的任何数据.要为VUE应用程序提供本地WordPress数据，您必须使用良好的旧wp_localize_script WordPress函数.

我在vuetwentyseventeen儿童主题的includes/enqueue-scripts.php中完成了这一点.

加载GIST 3160A325086ACD89FC39FCC56685DF4A

上面的GIST应该是我所有评论的相当自我解释，所以我将专注于我为我的VUE应用程序提供的数据:

• wpData.template_directory_uri -构建主题文件夹中的静态资产(如图像)的文件路径
• wpData.rest_url -从WP REST API
中检索帖子的URL
• wpData.app_path - spa wordpress页面构建相对链接
• wpData.post_categories -渲染过滤帖子的复选框

如此，让我们终于探索搜索应用程序的单一文件组件.

用Vue单文件组件

构建搜索应用程序

与搜索应用程序结构讨论，我实际构建的第一个组件是AppDisplayComponent.我开始使用一个非常基本的组件，仅使用JavaScript Fetch API和WordPress Posts resource - /wp/v2/posts.

appdisplaypost组件

的基本版本

以获得开始的appdisplaypost组件的非常基本的版本

并在WordPress页面上呈现，我删除了App.vue中的所有入门内容，并调用了AppDisplayPost组件，如下所示:

一个非常基本的app.vue以呈现appdisplaypost组件

但是，并非所有一切都在第一次尝试时(甚至在那之后)，这是vue devtools的Chrome扩展来到我的救援时.我建议你已经安装了它，因为它允许您使用更用户友好的界面调试和检查您的VUE应用程序，而不是只是将所有内容记录到控制台.

使用Vue devtools的调试Vue应用程序

我还建议您使用像Postman这样的工具与WP REST API交互.它将节省大量时间了解API响应，并以更容易查看的格式提供数据.这就是我的意思:

使用像邮递员这样的REST客户端与WordPress REST API 相互作用

vue impless的渲染帖子在Vue应用程序中拍了一段时间，最初设置了一段时间，但在Vue Devtools和邮递员之间几轮后，我很高兴.此时，我还决定扩展API响应以添加自定义内容.

将WordPress REST API扩展为自定义内容

REST API的默认响应非常全面;但是，它可能无法满足您的所有要求.

例如，您可能希望显示诸如作者姓名，评论和帖子的特色图像之类的信息.如果在邮递员(或您的首选REST客户端)中制作GET request to the posts route，则会注意到这些不可直接在默认响应中提供.在延长API的同时，这里可以通过简单地将_embed=true参数添加到资源- wp/v2/posts?_embed=true的情况下来检索这些选项.使用_embed，API将在响应后响应中将标记为embeddable: true的所有元数据进行整理.

对于我的Vue搜索应用程序，我决定扩展API，然后添加以下自定义内容:

扩展WordPress REST API 的默认响应

如果您查看儿童主题中AppDisplayPost组件的最终版本，您会注意到我使用的字段vue_meta，这不是默认响应的一部分.它在儿童主题的includes/extend-api.php中添加了register_rest_field函数.有一个相当基本的代码，并且了解更多关于扩展API的信息，请查看REST API Handbook的Modifying Reponses部分.

有了这个，然后我移动了逻辑，用于将帖子检索到AppGetPosts组件，并且仅使用AppDisplayPost以呈现各个帖子项目的所需内容.

appiteposts组件从RET API

中使用数据

分离数据检索的逻辑也意味着通过props将Posts阵列传递到AppDisplayPosts.

加载GIST F325F3C11E7031247866EFV6874FD69D

然后，在AppGetPosts i中，在帖子阵列中为每个帖子调用AppDisplayPost.

加载GIST 34A0C96A19385944B4A1C7B5CA83AF32

我还决定使用Axios而不是本机获取API从WordPress REST API中检索帖子.我更舒服地使用AXIOS从API中消耗数据，但您也可以选择使用jQuery(已包含在WordPress中)来制作AJAX呼叫.

注意:要使用AXIOS，您必须通过在VUE项目文件夹中运行npm install axios来将其作为生产依赖性安装.

从WordPress REST API

中检索特定字段

我最近发现，您可以使用_fields参数来仅从API响应中检索所需的字段.这显着降低了有效载荷大小，尤其是当您不希望JSON响应中的帖子内容时.为此，只需使用逗号分隔的字段名称列表添加_fields参数，为值- wp/v2/posts?_fields=id,title,excerpt

<fime5aption class =使用_fields参数选择性地包括响应JSON

_fields参数仍然需要找到它进入REST API手册的方式，因此您可能希望留意它.

从WordPress REST API

中检索所有帖子

目前，无法从WordPress REST API中检索所有帖子.为此，您必须运行循环并为API提供多个请求，直到所需的数据已获取.

要计算API请求的数量，我使用了分页参数per_page=100和X-WP-Total标题字段，它提供了集合中的记录总数.per_page参数当前在100条记录时叠加，这就是为什么当存在超过100个帖子时需要对API进行多次请求.您将在GIST中的get_posts组件的get_posts方法中看到此操作:

加载GIST 8B67F44C78687F9322EBEBBBBBB31B697517.

在上面的GIST中，安装组件时自动调用get_posts.我已经使用了ES7 Async/Await功能来标记包含await表达式的aynchronous function 的方法.

您将注意到，第一个Axios Request标有await -
const response = await axios(...) .这可以防止后续代码行执行直到请求已解决.我这样做是为了检索x-wp-total标题来计算所需的API请求数.

await的第二个使用率在结束时，它等待所有Promises以在呈现页面上的数据之前用Promise.all解析.但是，您也可以在这样的情况下立即呈现数据:

加载GIST 9BB57F1B71E4F903A1BB512B4299A43A

具有可用的所需数据，然后在计算属性中添加了搜索输入框和过滤逻辑.在下面的GIST中，注意FilteredResults替换wpPosts如何调用AppDisplayPost组件.

加载GIST 5F65B73B38E9F45BC34E0BCA8CD3A446

appquicksearch和appfilterswitches组件

与AppGetPosts很好地处理数据检索和过滤，然后我将用户输入移动到父组件AppQuickSearch，并使用道具将数据传递给链条.

我创建了一个新的组件AppFilterSwitches，以使用本地化的wordpress wpData对象渲染类别过滤器.组件emits自定义事件onFilterToggle父组件AppQuickSearch必须收听.

最后，所有组分在AppQuickSearch

中均分析
加载GIST BF1F0E523D685910A115CAD858C087B0

到底，我只是通过运行npm run build而导出生成的最终构建.

使用npm运行构建生成最终构建

如果你来这次来，你应该觉得自己探索其余的应用程序.最终版本的组件确实有很多，但它们是建立在您刚刚看到的所有内容.

探索路由和保持活动组件

虽然我可以用快速搜索结束应用程序，我添加了另一个组件AppCustomSearch，让您探索Vue路由，以及如何在道具的帮助下轻松重复使用各种组件.

Vue Router超出了本文的范围，但您可以在spa/src/app-routes.js中找到路由的功能.它提供AppQuickSearch，AppCustomSearch和导航链路之间的映射.如果您最终使用WordPress页面上的Vue路由器，请记住Vue将使用URL '#'来模拟页面，以便在路由器链接之间切换时不会重新加载.如果您尝试排除哈希(请参阅app-routes.js中的评论)，则WordPress Rewrite API将接管，并且您将最终未找到404.

App.vue组件托管AppNavigation和router-view组件.您还会注意到router-view用keep-alive包装以保留组件状态，避免在它们之间切换时重新渲染AppQuickSearch和AppCustomSearch.

是！

求和

我希望你发现这篇文章很有用.随着我的Vue搜索应用程序可以随意玩，您可以在这里下载二十七岁儿童主题的一部分.您可以将其作为游乐场来练习和发展WordPress和现代JavaScript的技能.