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前端项目技术架构相关推荐
- VUE项目学习（一）：搭建VUE前端项目
VUE项目学习(一):搭建VUE前端项目 1.安装node.js环境 (1)下载node.js,下载地址为:https://nodejs.org/en/ (2)按照默认选项安装node,检查安装版本 ...
- vue 前端项目部署阿里云服务器
vue 前端项目部署阿里云服务器 one 前期准备 two 代码打包 扔服务器 one 前期准备 首先两个软件应该下载(Xftp Xshell),如果有其他类似的软件也可以. 打开xftp,新建一个会 ...
- cmd搭建vue前端项目详细过程
cmd 搭建vue前端项目 下载nods.js node.js下载(Windows版本) next 安装完毕! 配置node.js环境变量 进入找到Path进入 这里填你的node.js的安装路径 验 ...
- Vue前端项目【尚品汇】
Vue前端项目[尚品汇] 1. 说明 2. 对项目创建 3.结构 4. 项目运行起来时,浏览器自动打开 5.关闭ESLint校验功能 5.路由分析 6.路由元信息 7. 路由传参 7.1 路由的跳转方 ...
- Vue前端项目-Vuex实战使用
目录 1.创建 vue-cli 脚手架项目 2.安装 vuex 3.将 store 实例注册到 Vue对象 4. store 实例对象 5.将 store 分割成模块化(Module) 6.项目中的模 ...
- Vue前端项目自适应布局
Vue前端项目自适应布局 一.单位尺寸 二.基于rem实现自适应布局 一.单位尺寸 px % vw.vh: 窗口 em: 针对父元素的font-size rem:"root em" ...
- B站云E办Springboot+vue——前端项目完整版（含源码）
一.项目简介 项目背景:受疫情的影响,许多企业由线上办公转为线下办公.随着线上办公的人数的增多,线上办公的优点逐步凸显:通过实现工作流程的自动化.节省企业办公费用.实现绿色办公,同时提升办公效率. 项 ...
- 为什么vue前端项目要使用nodejs
一.传统的JavaScript 传统的js是运行在浏览器上的,因为浏览器内核分为两个部分: 渲染引擎---渲染HTML和CSS, JavaScript 引擎---负责运行 JavaScript 随着技 ...
- 企业级VUE前端项目执行流程总结
概述 首先我司最新的项目架构采用的是前后端分离模式,前端使用VUE框架,采用多页面开发,引入组件化设计思想,提高代码重用率进而提高开发效率:后台使用微服务治理.微服务工作在此前项目已经搭建完成,此次仅 ...
- Vue前端项目部署在tomcat
第一步 配置java环境,下载tomcat后解压,然后将webapps里的默认文件删掉 第二步 修改vue项目下config/index.js,注意dev和build都要改assetsPublicPa ...
最新文章
- 需要反射时使用dynamic
- Elasticsearch5.5.1(核心10)
- Android权限处理分类
- “突破•重塑”2017年数据中心设施讨论
- AOV网拓扑排序(c/c++)
- STM32 基础系列教程 3 – 外部中断
- varnish缓存服务器构建疑问
- jquery.cookie.js操作cookie实现“记住密码”
- 第二周linux微职位
- 用shell查看关键数据
- NOIP模拟赛(洛谷11月月赛)
- 操作两个表的SQL语句，可用在数据源中
- span 居中_H5元素的水平垂直居中布局总结
- ANSYS 15 直接优化分析
- PHP折算,PHP实现货币换算的方法
- 一点浩然气，千里快哉风（修炼孟子浩然之气）
- “杀熟”的数据从哪里来？这些用户数据泄露案例说不定你都听过
- 花卉商城APP开发详细方案
- 美容院如何更好的招揽顾客
- 利用三角形三条边求三角形面积