每当你开始使用新技术的时候，您可能至少会感到有点害怕。尤其是当外面有无数的 npm 包时。混合和匹配事物有时会花费大量时间和精力，而且常常令人沮丧。这是以下针对初学者开发人员的 Vue.js 教程发挥作用的地方。
什么是 Vue.js？为什么要关心
Vue.js 或简称 Vue 是用于构建用户界面的 JavaScript 框架。与 Angular 或 React 等其他框架相比，Vue 更容易上手，并且没有那么陡峭的学习曲线。
Vue 也是模块化的，允许您将代码拆分为可重用的组件。它们每个都有自己的 HTML 标记、CSS 和 JavaScript 代码。
本 Vue.js 教程的范围是什么？
这个简短的 Vue.js 教程的目的是为您提供一些脚手架，您可以在其上构建和试验 Vue。我们将在 WordPress 仪表板中查看 Vue 应用程序的基本设置。
（注意；我们不会在本指南中教您 Vue 本身，但您可以在此处设置项目后继续从官方指南中了解有关该框架的更多信息 – 您可以在完成后阅读finish 继续试验。）
我们要做的是使用 Vue 为 WordPress 插件使用预定义模板。如果您想深入挖掘，可以在以下 GitHub 存储库中找到它：https://github.com/abaicus/vue-wp-bootstrap。
Vue.js 教程：先决条件
您应该已经在计算机上设置了一些东西才能继续遵循本指南：
首先，您需要一个 LAMP Stack – 您可以在 Windows 或 Mac 上使用 XAMPP，或在 Mac 上使用 Flywheel 的 Local，并为自己设置全新的本地 WordPress 安装。
确保您的计算机上安装了 NodeJS 包管理器 (npm)。您还需要通过终端安装另外两个包 - Vue CLI 和 Vue Template Init Tool。像这样：
$ npm install -g @vue / cli $ npm install -g @vue / cli-init
安装这两个依赖后，需要更改活动目录到本地 WordPress 实例的 wp-content/plugins 目录，然后在其中运行以下命令：
$ vue init abaicus / vue-wp-bootstrap my-vue-dashboard-plugin
接下来，系统将提示您回答一些有关项目设置的问题。
对于Build提示，现在请继续选择第一个选项“Runtime + Compiler: Recommended for most users”。
如果需要，启用 ESLint linter。它会检测项目中的任何 linting 错误，但您现在不必担心。
Commit Lint 和 Pre-Commit Hook 用于在将提交发送到 GitHub 之前检查您的提交消息和代码 - 以保持一切整洁和格式正确。
完成后，您会看到一个大致如下所示的终端：
您可以继续按照屏幕上的说明进行操作。将目录更改为新生成的插件目录并运行终端提示符中显示的命令。这将使您的应用程序启动并运行，等待代码内部的更改，并将 Vue 代码转换为 JavaScript。
它有什么作用？
不多。这只是一个显示来自后端的数据的基本应用程序。引擎盖下的 Vue 并不多。您可以进入插件仪表板页面并激活它。它将在您的管理菜单中添加一个新页面。导航到它后，您会发现一个包含两个字符串的仪表板页面：
插件脚手架结构
我们来看看新生成的插件的文件结构。我们将忽略此 Vue.js 教程中的大部分配置文件，以便我们可以专注于应用程序的结构：
首先，我们有 plugin.php 文件，它是实际插件的入口点。这里我们有主要的插件类。这是包含和运行应用程序主要组件的地方。
接下来是一个package.json文件，里面定义了所有的依赖和一堆其他的项目信息。您可能感兴趣的部分位于“脚本”字段下。在那里你可以运行带有 npm run 前缀的所有命令。目前，重要的应该是 npm run dev（它构建用于开发的应用程序）和 npm run build（它应该在应用程序准备好部署用于生产时运行）。其他命令与这两个命令相邻，或者做一些您现在不必担心的其他事情。
在 includes 目录中，有三个文件：
- rest.php 类目前没有做任何事情，但是你已经有了一个结构来添加你的 RestAPI 路由
- assets.php 类处理样式和脚本排队。在这里，JavaScript 文件被本地化以将起始数据从 PHP 传递到我们的 Vue 应用程序。目前，只发送两条文本，但您可以包含任何您想要的内容。
- admin.php 文件负责在仪表板中添加新页面并呈现实际的插件页面。您会注意到应用程序本身只是两个空的 plugin_page() 函数中的一个选项卡。这是因为 JavaScript 将在应用加载后处理应用的实际呈现。
在 assets 目录中，您会发现另外四个目录：
- src 目录 – 我们的 Vue 应用程序的源文件，稍后我们将对其进行介绍稍后再讨论。
- scss 目录——我们生成 CSS 样式表的 SCSS 样式文件。
- js 目录——从 src 目录中的文件生成的转译代码。
- css 目录——从 SCSS 文件编译的样式。
src目录和Vue模板文件
在这个目录下，有两个文件：main.js和App.vue。 main.js 文件是应用程序的入口点。它将 Vue 应用程序组件附加到具有相应 id 的 DOM 元素。
/* jshint esversion: 6 */ import Vue from 'vue' import App from './App.vue' window.addEventListener('load', function() { new Vue({ // eslint -disable-line no-new el: '#mvdp-app', component: {App}, render: (h) => h(App)})})
实际的应用标记在在 App.vue 模板中：
/* jshint esversion: 6 */
{{this.strings.description}}
