引入 Vue 2、Vue Router 和 Vuex

到目前为止，我们已经搭建好了 Roast 单页面应用的基本骨架：安装好了 Laravel、配置好了基于 Socialite 的社会化登录、基于 Passport 配置好了自己的 OAuth 服务器，并且配置好了 JavaScript 和 Sass。

在这一篇教程中我们将开始安装配置 Vue 全家桶（Vue 2 + Vuex + Vue Router），在我看来，这个全家桶是最经过深思熟虑的、易于实现的、功能齐全的 Javascript 前端框架，它非常易于使用（学院君后续会在基础系列教程中推出 Vue 快速入门教程）。

前言：Vue 2、Vue Router 和 Vuex 概述

Vue 2 用于处理所有响应式设计和 Web 组件的构建，如果你之前没有使用过 Web 组件，可以访问 Vue 2 文档了解明细。

Vue Router 和 Vue 2 一起工作用于提供路由组件，其原理是使用了 HTML 5 History API 在应用程序中创建可链接页面，不过是以单页面应用方式执行。感兴趣的同学可以查看 Vue Router 文档了解明细。

Vuex 用于处理单页面应用数据的状态管理系统，它会在单一数据源（Single Source of Truth）中存放应用所使用的所有数据，这在处理大型应用程序的时候非常有用。如果你之前使用过组件和模块但没有使用过单一数据源，就需要来回传递很多属性来保持数据的同步，随着应用越来越复杂，这样的操作会越来越麻烦，使应用变得难以维护。而使用 Vuex 的话，你可以导入特定模块到组件中，这样这些组件就可以访问模块中的数据，你可以调用执行变更的动作来更新数据，以保证所有更改都被跟踪，所有数据都保持同步。更多细节请阅读 Vuex 文档。

更重要的是，Vue 还为 Firefox 和 Chrome 提供了开发工具，你可以在这里找到并安装：vuejs/vue-devtools。通过开发者工具，可以查看应用当前状态和组件数据、路由信息以及事件跟踪。

第一步：重新引入 Vue

我们在上一篇教程中为 Roast 应用设置了 JavaScript 和 Sass，并在 resources/assets/js/app.js 文件中移除了对 Vue 的引用，现在要重新加上，在该文件 axios token 配置部分之后加上下面这行代码（由于之前已经通过 npm install 安装过 Vue，所以无需再安装这个库）：

import Vue from 'vue';

然后移除下面这部分代码：

const app = new Vue({
    el: '#app'
});

第二步：安装 Vue Router

Vue Router 是一个 NPM 扩展包，可以在项目根目录下运行如下命令安装：

npm install vue-router --save-dev

第三步：安装 Vuex

和 Vue Router 一样，也要通过 NPM 在项目根目录下安装：

npm install vuex --save-dev

第四步：配置 JavaScript 目录

好的目录结构可以让项目更容易维护，也具备更好的可读性，所以我们在上一篇教程中遵循 Sass 指南 重新设置了 sass 的目录结构，这一篇教程中，我们对 js 目录进行重新编排：

• 创建 resources/assets/js/api 目录，用于存放前端 API 路由调用
• 创建 resources/assets/js/components 目录，用于存放 Vue 组件
• 创建 resources/assets/js/mixins 目录，Vue 有一个叫做 mixins 的特性，用于定义可以在不同组件中共用的方法，从而提高代码可用性，该目录用于存放这些 mixins
• 创建 resources/assets/js/pages 目录，在 Vue Router 中，页面本质上也是组件，不过我喜欢将它们放到单独的目录中作为「特殊的」组件，这样更容易被找到，页面也可以包含子页面，这一点我们在后面会讲到
• 创建 resources/assets/js/modules 目录，用于数据存储，Vuex 将数据分割到多个组件并存放到这个目录。如果你之前使用过 Vuex，官方文档提到过要将操作、修改和获取分割到不同的目录，不过在 Vue 2 中，这些都将合并到一个模块

现在，我们已经按照需要重新设置了 assets 下的子目录，接下来就可以创建文件来构建前端功能了。

第五步：创建 JavaScript 文件

我们需要创建一些 JavaScript 文件来对应用功能进行拆分。

首先，要创建 resources/assets/js/config.js，我们可以将所有配置信息存放到这个文件，本应用中将使用这个文件来存储基于环境的 API URL：在生产环境中，将引用生产环境 URL；在开发环境中，将引用开发环境 URL。随着开发进程的推进，后面还会使用该文件存放更多信息。

接下来，创建一个事件总线：resources/assets/js/event-bus.js，用于通过不同组件之间的消息传递进行通信。在 Vue 1.x 中还可以通过广播和分发来处理，但是更推荐使用事件总线（参考对应文档）。稍后就会使用到它，现在先在这个文件中编写如下代码：

import Vue from 'vue';
export const EventBus = new Vue();

然后，创建 resources/assets/js/routes.js，该文件包含所有 Roast 单页面应用的前端路由。我们可以在这里定义 Vue Router 使用的路由。

最后，我们来创建一个 resources/assets/js/store.js 文件，这里是我们 Vuex 模块的起点，Vuex 由一个父模块和多个子模块构成，该文件包含父模块，随后我们会导入所有子模块到这个文件。现在我们将其留空，在构建应用时再来填充内容。

至此，Roast 单页面应用的骨架已经搭建起来了，所有的目录和空文件都已经建好，接下来，让我们回到 resources/assets/js/app.js 文件让应用运转起来。

第六步：设置 Vue

在 resources/assets/js/app.js 文件末尾添加这段代码：

new Vue().$mount('#app');

其作用是将 Vue 挂载到 ID 为 app 的页面元素上，同时在准备就绪时可以通过 Vue 调用 Vue Router 和 Vuex。

此时，resources/assets/js/app.js 文件内容如下：

window._ = require('lodash');

try {
    window.$ = window.jQuery = require('jquery');

    require('foundation-sites');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

import Vue from 'vue';

new Vue().$mount('#app');

第七步：运行 npm install

运行 npm install 安装所有前端依赖，可能在前面已经运行过该命令了，这里只是确保运行过该命令以免后面运行时报错。

第八步：构建应用

现在可以构建应用了！在开发环境构建可以运行 npm run dev 来构建应用，构建完成后就可以通过 http://roast.test 访问首页，此时仍然是空白页。在下一篇教程中，我们将会配置 Vue Router 来添加一些前端路由到应用，骨骼有了，剩下的就是肌肉和皮毛了，一大波应用的外在功能即将来袭！

项目源码位于 Github 上：nonfu/roastapp。