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.技术架构图

VUE前端项目技术架构_第1张图片

你可能感兴趣的:(前端,vue.js,架构)