前后端混合开发

沟通成本高

分工不明确

不便管理

不便维护扩展

前后端分离开发

前端--接口--后端

需求分析--接口定义--前后端并行开发--测试--前后端连调测试

前端开发

  • 模块化 JS、CSS

  • 组件化 UI结构、样式、行为

  • 规范化 目录结构、编码、接口

  • 自动化 构建、部署、测试

前端工程化:在企业级的前端项目开发中,把前端开发所需要的工具、技术、流程、经验等进行规范化、标准化

环境准备

vue-cli:Vue官方提供的一个脚手架,用于快速生成一个Vue的项目模板

提供了如下功能:

  • 统一的目录结构

  • 本地调试

  • 热部署

  • 单元测试

  • 集成打包上线

依赖环境:NodeJS

Vue项目目录结构

Vue项目开发流程

Vue的组件文件以.vue结尾,每个组件由三个部分组成:< template >,< script >,< style >

  • < template >模板部分,由他生成HTML代码

  • < script >控制模板的数据来源和行为

  • < style > CSS样式部分

Element

组件:组成网页的部件,例如超链接、按钮、图片、表格等

前端路由

URL中的hash(#号)与组件之间的对应关系

Vue路由

  • VueRouter:路由器类,根据路由请求在路由视图中动态渲染选中的组件

  • < router-link >:请求链接组件,浏览器会解析成< a >

  • < router-view > :动态视图组件,用来渲染展示与路由路径对应的组件

Nginx

一款轻量级的web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少,并发能力强。

注意:Nginx默认占用80端口号,如果80被占用,可以在nginx.conf中修改端口号。(netstat -ano|findStr 80)

maven

apache旗下的开源项目,是一款用于管理和构建java项目的工具

maven作用

  • 依赖管理:方便快捷的管理项目依赖的资源(jar包),避免版本冲突问题

  • 统一项目结构:提供标准、统一的项目目录

  • 项目构建:标准跨平台(Linux,Windows,MacOS)的自动化项目构建方式

介绍

Apache Maven是一个项目管理和构建工具,它基于项目对象模型(POM)的概念,通过一小段描述信息来管理项目的构建

仓库

用于管理存储资源,管理各种jar包

  • 本地仓库:自己计算机上的一个目录

  • 中央仓库:由Maven团队维护的全球唯一的。Central Repository:

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部