基于 Vue2 和 AdminLTE 的移动客户端 CI 平台（前端）
后端在这项目中 https://github.com/thierryxing/Jaguar
从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来访问，运行方法如下：
首先保证，config下的index.js中proxyTable的内容如下（注释部分）：
proxyTable: { // proxy all requests starting with /api to jsonplaceholder
'/api': {
changeOrigin: true,
secure: false,
target: 'http://localhost:9090',
pathRewrite: {
'^/api': ''
}
}
},
-
选择mock分支，这样可以不依赖后端服务器，而是从Mock服务器中获取数据
-
安装npm依赖的库
npm install
- 运行服务
npm run mockdev
- 在浏览器中访问：http://localhost:8080/#/
登录页面的用户名（邮箱）和密码可以随意填写
.
├── App.vue
├── assets
│ └── logo.png
├── components
│ ├── dashboard
│ │ ├── Aggregate.vue
│ │ └── WeeklyChart.vue
│ ├── 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
├── Layout.vue
├── account
│ └── Login.vue
├── activity
│ └── List.vue
├── dashboard
│ └── List.vue
├── jobs
│ └── Index.vue
├── members
│ └── List.vue
└── projects
├── Edit.vue
├── Home.vue
├── Layout.vue
├── List.vue
├── New.vue
├── builds
│ ├── Detail.vue
│ ├── List.vue
│ ├── PreBuildBeta.vue
│ ├── PreBuildLib.vue
│ ├── PreBuildProd.vue
│ └── PreBuildTest.vue
├── environments
│ ├── Clone.vue
│ ├── List.vue
│ ├── New.vue
│ └── configs
│ ├── Fastlane.vue
│ ├── GitClone.vue
│ ├── Info.vue
│ └── List.vue
└── services
├── Edit.vue
└── List.vue
21 directories, 60 files
目前项目还在不断的开发中，已经包含的功能如下：
- 登录
- 登出
- 项目列表展示
- 新增项目
- 项目详情
- 项目依赖第三方库列表
- 项目下新增构建环境
- 配置环境
- 项目构建列表
- 项目构建前配置
- 第三方服务（Bugly，Fir）列表
- 项目设置
- 用户列表
- ...
- Vue实战（一）Falcon计划
- Vue实战（二）框架和环境
- Vue实战（三）Mock服务JSON Server
- Vue实战（四）组件和路由
- Vue实战（五）网络层拦截器与全局异常信息展示
- Vue实战（六）通用Table组件
MIT licensed.