Falcon

基于Vue2和AdminLTE的移动客户端自动化平台（前端）

关于Falcon

从16年初开始到现在，我们的前端团队将 Vue 作为主框架已经有一年多的时间了，而作为前端工程师出身的我，知识体系还停留在远古的 Prototype 和 jQuery 上，说起来也是一件十分惭愧的事情。

于是我下定决心花一段时间由浅入深地学习一下这个目前非常流行的框架，同时恶补一下ES6的知识。

本人一直赞同并践行一个观点：

学习一项新技术的最佳途径就是动手写一个完整的项目。

因为在这个项目中你将遇到几乎所有的问题，那么解决这些问题的过程就是你不断提高，融会贯通的过程。

学习 Vue 也不例外，恰好最近正在计划为内部的自动化平台 Jaguar 提供 iOS 和 Android 的版本，以方便大家在移动端进行使用，那么用 Native 去写显然有些浪费资源，而做一个Hybrid的跨平台App应该是最经济的方式了，所以最终的计划是将 Jaguar 进行前后端分离，然后在前端使用Vue框架，并使其同时能够支持浏览器，iOS 和 Android 平台。

为了和 Jaguar（美洲豹）相对应，最终决定给项目取名叫 Falcon，即：猎鹰，和 Jaguar 一样都是速度飞快的动物。

经过一段时间的规划和整理，可以预计出最终的版本大约包含40个左右的页面，30 个左右的组件，这么算来也可以称之为一个不大不小的项目了。

最终的界面大概如下：

Vue实战将事无巨细的记录我在完成整个项目过程中对Vue的从浅到深理解，遇到的点点滴滴问题，希望可以帮助正在入门或打算尝试Vue框架的同学们。

如何运行

由于后端 Jaguar 服务配置起来比较繁琐，为了简化大家的使用，我已经将部分 API 放置在了 Easy-Mock 服务上（不断更新中），运行方法如下：

配置 proxy

首先保证，vue.config.js 中 proxy 的内容如下（注释部分）：

    proxy: {
            '/api/v1': {
              changeOrigin: true,
              secure: false,
              target: 'https://www.easy-mock.com/mock/5b18ccb77dddfa3903693dba'
            },
            '/sidekiq': {
              changeOrigin: true,
              secure: false,
              target: 'http://localhost:3000'
            }
          }

运行项目：

• 安装npm依赖的库

npm install

• 运行服务

npm run serve

• 在浏览器中访问：http://localhost:8080/#/

登录

登录页面的用户名（邮箱）和密码可以随意填写

项目结构

.
├── App.vue
├── assets
│   └── logo.png
├── components
│   ├── global
│   │   ├── Alert.vue
│   │   ├── ConfirmModal.vue
│   │   ├── ContentFooter.vue
│   │   ├── ContentHeader.vue
│   │   ├── LoadingOverlay.vue
│   │   ├── NavBar.vue
│   │   ├── Pagination.vue
│   │   ├── SideBar.vue
│   │   ├── SideBarItem.vue
│   │   ├── TableBox.vue
│   │   └── UserPanel.vue
│   └── projects
│       ├── Dependency.vue
│       ├── EnvForm.vue
│       ├── Form.vue
│       ├── Info.vue
│       └── SideBar.vue
├── constants
│   ├── api.js
│   └── enum.js
├── main.js
├── router
│   ├── index.js
│   └── routes.js
├── store
│   ├── actions.js
│   ├── index.js
│   ├── modules
│   │   ├── alert.js
│   │   ├── current-platform.js
│   │   ├── current-project.js
│   │   └── current-user.js
│   └── mutation-types.js
├── utils
│   ├── networking.js
│   └── storage.js
└── views
    ├── Dashboard.vue
    ├── Layout.vue
    ├── account
    │   └── Login.vue
    ├── guardian
    │   └── List.vue
    ├── job
    │   └── Index.vue
    └── projects
        ├── Edit.vue
        ├── Home.vue
        ├── Layout.vue
        ├── New.vue
        ├── builds
        │   ├── CheckDependency.vue
        │   ├── Detail.vue
        │   ├── List.vue
        │   ├── PreBuildBeta.vue
        │   └── PreBuildLib.vue
        ├── environments
        │   ├── Clone.vue
        │   ├── List.vue
        │   ├── New.vue
        │   └── configs
        │       ├── Fastlane.vue
        │       ├── GitClone.vue
        │       ├── Info.vue
        │       └── List.vue
        └── services
            ├── Edit.vue
            └── List.vue

18 directories, 55 files

功能

目前项目还在不断的开发中，已经包含的功能如下：

• [x] 登录
• [x] 登出
• [x] 项目列表展示
• [x] 新增项目
• [x] 项目详情
• [x] 项目依赖第三方库列表
• [x] 项目下新增构建环境
• [x] 配置环境
• [x] 项目构建列表
• [x] 项目构建前配置
• [x] 第三方服务（Bugly，Fir）列表
• [x] 项目设置
• [x] 用户列表
• ...

链接

文章

• Vue实战（一）Falcon计划
• Vue实战（二）框架和环境
• Vue实战（三）Mock服务JSON Server
• Vue实战（四）组件和路由
• Vue实战（五）网络层拦截器与全局异常信息展示

三方工具

• AdminLTE
• JSON Server
• Vue Highlightjs

License

MIT licensed.