VUE前端项目技术架构

1.技术架构介绍

如图下图所示，图中展示为项目系统软件层次架构。该系统采用 SOA思想的分层架构，共分为视图层、编译层、代码层、数据层。

(1) 视图层：

浏览器：主要功能是将用户选择的web资源，通过解析网页源文件，进行页面显示。

业务模块：根据不同的业务需求所开发的独立模块。

(2) 编译层：

分析项目结构，根据入口文件，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（TypeScript、SCSS等），通过 webpack 将源代码编译（构建，打包）成合适的格式以供浏览器直接使用。

(3) 代码层：

将页面上每个独立的可视或者可交互的区域均视为一个组件，每个组件对应一个工程目录(文件夹)，组件所需要的各种资源尽可能的都放在这个目录下就近维护（即将模板、样式、js等都写在一个.vue文件中)，组件可以嵌套自由组合，形成完整的页面。

vue-router是Vue.js官方的路由插件。路由是用户根据不同页面设定访问路径，将不同的页面路径和组件映射起来。根据不同的路由跳转。实现页面切换功能。

vuex是专门用来管理[vue].js应用程序中状态的一个插件，作用是将应用中的所有状态都放在一起，集中式来管理。

UI组件库是在常规[界面设计]过程中可以直接用来制作交互图例和搭建页面的组件集合。可以帮助设计师和研发提高工作效率。

util文件夹是全局工具包，在项目开发过程过程中，将通用的功能抽离统一管理，可以提高项目的可维护性，减少代码冗余，提高编码效率。

(4) 数据层：

Service：作用是负责业务模块的应用设计，保证业务逻辑的独立性和重复利用性。

Network：主要使用来查看网络请求的内容，包括请求响应方式、异常、缓存、超时等。

Api：通过 ajax 不同的请求方式，从后端接口中获取业务模块中所需的数据。

2.技术架构图