引入 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


点赞 取消点赞 收藏 取消收藏

<< 上一篇: 配置 JavaScript 和 SASS

>> 下一篇: 通过 Vue Router 配置前端路由