asenseio / falcon Goto Github PK

View Code? Open in Web Editor NEW

This project forked from thierryxing/falcon

0.0 0.0 0.0 109 KB

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

JavaScript 33.77% HTML 0.23% Vue 62.99% CSS 3.01%

falcon's Introduction

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。但是我已经将所有的API放置在了Mock服务上，可以通过JSON Server来访问，运行方法如下：

配置proxyTable

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

    proxyTable: { // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        changeOrigin: true,
        secure: false,
        target: 'http://localhost:9090',
        pathRewrite: {
          '^/api': ''
        }
      }
    },

运行项目：

安装npm依赖的库

npm install

运行服务

npm run mockdev

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

项目结构

.
├── App.vue
├── assets
│   └── logo.png
├── components
│   ├── global
│   │   ├── Alert.vue
│   │   ├── ConfirmModal.vue
│   │   ├── ContentFooter.vue
│   │   ├── ContentHeader.vue
│   │   ├── LoadingOverlay.vue
│   │   ├── NavBar.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
├── 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
        │   ├── Detail.vue
        │   ├── List.vue
        │   └── PreBuildLib.vue
        ├── environments
        │   ├── List.vue
        │   ├── New.vue
        │   └── configs
        │       ├── Fastlane.vue
        │       ├── GitClone.vue
        │       ├── Info.vue
        │       └── List.vue
        └── services
            ├── Edit.vue
            └── List.vue

18 directories, 50 files