前端技术架构设计图如下：

前端关键技术介绍：

1. 使用Vue2.0 +Vuex MVVM 框架，框架依赖中间件有：vue-router,axios。

采用MVVM实际解决的前端问题：提高效率、提升性能、提高可扩展性、防止重复造轮子、提高可维护性。

MVVM框架与MVC框架的主要区别有两点：
a) 实现数据与视图的分离

b) 通过数据来驱动视图，开发者只需要关心数据变化，DOM操作被封装了。

  在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。其流程图如下：

vue借助插件vuex,axios实现内部状态管理与数据的高效流转。满足与服务器大量交互 (例如使用 WebSocket)、视图从多个来源获取数据，交互复杂、多数据源的业务场景。      

2.css预处理插件：less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

3.界面库ElementUI

ElementUI：一套基于Vue2.0作为基础框架实现的组件库，服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，提供大量通用、惯用的组件和交互，帮助网站快速成型，给用户优秀的界面体验。

4. 打包工具：webpack 4.0，babel 7.0

Webpack 是一个可以将前端模板引擎、预处理语言、JavaScript 模块进行合并、压缩、打包最终成为能被JavaScript 引擎识别可以在浏览器端正常运行的文件。实现代码转换、代码优化、代码分割、模块合并、自动刷新、单元测试、自动发布等功能。