面向初学者的 Vue.js 教程：学习基础知识并使用这个入门级 Vue 结构

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

当你在开发流程中开始使用新技术时，你可能会感到有些不知所措。尤其是在市面上充斥着海量的 npm 包的情况下。混搭不同的包有时会耗费大量时间和精力，而且通常令人沮丧。这时，这篇面向初学者的 Vue.js 教程就派上用场了。

什么是 Vue.js？你为什么要关注它？ 🤔

Vue.js（简称 Vue）是一个用于构建用户界面的JavaScript框架。与其他框架（例如Angular 或 React）相比，Vue 更易于上手，学习曲线也更平缓。

Vue 也是模块化的，它允许你将代码拆分成可重用的组件。每个组件都有自己的 HTML 标记、CSS 和 JavaScript 代码。

本 Vue.js 教程涵盖哪些内容？ 🔍

本篇简短的 Vue.js 教程旨在为您提供一些框架，以便您在此基础上构建和试验 Vue 应用。我们将了解一下在WordPress 控制面板中搭建一个基本的 Vue 应用。

（注：本指南不会专门讲解 Vue，但您可以在完成此处的项目设置后，继续从官方指南中了解更多关于该框架的信息——您也可以在项目完成后继续进行实验。）

我们将使用一个预定义的基于 Vue 的 WordPress 插件模板。如果您想深入了解，可以在以下 GitHub 存储库中找到它：https://github.com/abaicus/vue-wp-bootstrap。

Vue.js教程：先决条件🚀

要继续按照本指南操作，您应该已经在电脑上设置好一些事项：

首先，你需要一个 LAMP 堆栈——你可以在 Windows 或 Mac 上使用 XAMPP，或者在 Mac 上使用 Local by Flywheel，然后设置一个全新的本地 WordPress 安装。

请确保您的计算机上已安装NodeJS 包管理器(npm)。您还需要通过终端安装另外两个包——Vue CLI 和 Vue 模板初始化工具。如下所示：

$ 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

接下来，系统会提示您回答一些有关项目设置的问题。

对于构建提示，现在只需选择第一个选项“运行时 + 编译器：推荐给大多数用户”。

您可以根据需要启用 ESLint 代码检查工具。它会检测项目中的任何代码错误，但您现在不必为此担心。

提交检查和提交前钩子旨在向 GitHub 发送提交之前检查您的提交消息和代码，以保持所有内容整洁有序。

完成后，终端界面大致会像这样：

您可以按照屏幕上的说明进行操作。将目录切换到新生成的插件目录，然后运行终端提示符中显示的命令。这将启动并运行您的应用程序，等待代码更改，并将 Vue 代码转译为 JavaScript。

它有什么作用？ 💻

没什么特别的。这只是一个显示后端数据的基本应用程序，底层并没有使用太多 Vue。您可以前往插件控制面板页面并激活它。激活后，您的管理菜单中会添加一个新页面。进入该页面后，您会看到一个包含两个字符串的控制面板页面：

插件脚手架结构👨🏼‍💻

让我们来看一下新生成的插件的文件结构。在本 Vue.js 教程中，我们将忽略大部分配置文件，以便专注于应用程序的结构：

首先，我们有plugin.php文件，它是插件的入口点。这里有主要的Plugin类。应用程序的主要组件都包含在这里并运行。

接下来是package.json文件，其中定义了所有依赖项和其他项目信息。您可能感兴趣的部分位于“scripts”字段下。这里列出了所有可以使用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目录——SCSS 样式文件，我们从中生成 CSS 样式表。
  • 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',
      components: { App },
      render: (h) => h(App)
    })
  })
  

  实际的应用程序标记位于App.vue模板中：
  

  /* jshint esversion: 6 */
  <template>
    <div>
      <h1>{{this.strings.title}}</h1>
      <p>{{this.strings.description}}</p>
    </div>
  </template>
  
  <script>
    /* global MVDP */
    export default {
      data () {
        return {
          strings: MVDP.strings
        }
      },
      name: 'App.vue'
    }
  </script>
  
  <style scoped>
  
  </style>
  

  从上面的代码片段可以看出，我们使用了在Assets类中本地化的字符串。Vue 的一个优点是，组件的代码被清晰地组织成模板、脚本和样式，使其结构易于理解。

  好了，现在你已经有了一个坚实的起点，可以开始使用 Vue.js 进行任何你想做的开发了！希望这篇 Vue.js 教程对你有所帮助。

  本文最初发表于CodeinWP.com。