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

前端关键技术介绍：

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 引擎识别可以在浏览器端正常运行的文件。实现代码转换、代码优化、代码分割、模块合并、自动刷新、单元测试、自动发布等功能。

基于VUE的前端架构设计相关推荐

前端架构设计第十课前端数据结构和算法
21 如何利用 JavaScript 实现经典数据结构? 前面几讲我们从编程思维的角度分析了软件设计哲学.从这一讲开始,我们将深入数据结构这个话题. 数据结构是计算机中组织和存储数据的特定方式,它的目 ...
前端架构设计第一课 CI环境npm/Yarn
开篇词像架构师一样思考,突破技术成长瓶颈透过工程基建,架构有迹可循.你好,我是侯策(LucasHC),目前任职于某互联网独角兽公司,带领 6 条业务线前端团队,负责架构设计和核心开发.工程方案调研 ...
前端进阶之路: 前端架构设计(2)-流程核心
可能很多人和我一样, 首次听到"前端架构"这个词, 第一反应是: "前端还有架构这一说呢?" 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备受重视 ...
前端架构设计1：代码核心
现在的前端领域, 随着JS框架, UI框架和各种库的丰富, 前端架构也变得十分的重要. 如果一个大型项目没有合理的前端架构设计, 那么前端代码可能因为不同的开发人员随意的引入各种库和UI框架, 导致代 ...
前端架构设计应该包含哪些东西？
前端架构设计后台架构设计概念适用于前端,前端没有数据库设计,所以可以不考虑并发. vuejs的优点,一样适用于前端项目.高内聚,低耦合,可复用,单元测试. 从项目的生命周期,开发.上线.维护三个阶段 ...
基于Vue的数据可视化设计框架，数据大屏可视化编辑器
开发文档(★★★★★) 请访问 https://lizhensheng.github.io/vue-data-view/ 完整代码下载地址:基于Vue的数据可视化设计框架,数据大屏可视化编辑器简介 ...
基于Vue的管理后台设计（布局篇）
文章系列: 基于Vue的管理后台设计(布局篇) 基于Vue的管理后台设计(登录鉴权篇) 基于Vue的管理后台设计(打包部署篇) 前言我打算把接下来要写的几篇文章写成一个系列,用来记录一下如何基于Vu ...
【软件体系结构】架构风格与基于网络应用软件的架构设计：Roy Tomas Fielding】
[软件体系结构]架构风格与基于网络应用软件的架构设计:Roy Tomas Fielding 博士 - 唐雕 - 博客园
浅谈京东静态html原理,京东首页前端架构设计.ppt
京东首页前端架构设计工程化 Windows可视化工具 * 工程化前端模块构建平台 * 总结 * QA * * JD.com JD.com JD.com JD.com JD.com JD.com J ...
Vue的使用 -- 基于Vue搭建前端页面
Vue的使用 – 基于Vue搭建前端页面首先,用到的前端技术只有 Vue.Element-ui.axios.Echarts,至于其它的技术点,我一个后端很少接触. 其次,Echarts 我也不怎么会 ...

基于VUE的前端架构设计