项目一:校园超市
项目简介:
提供学生在校园内购物的一个App,使生活变得更加简单
项目技术栈:
Client:vue、vue-router、vuex、webpack、vue-cli、eslint、scss、axios、post-css、swiper、svg
Service:egg、restful接口规范、jwt、cookie、session、mysql
前段项目框架:
基于vue-cli手脚架生成,在此基础之上做了自己的配置
基础设施:
全局scss的配置,自己开发了_mixin,_variablrs统一页面ui规范
通过postcss的autoprefixer自动处理浏览器对于css的兼容自动添加浏览器前缀
通过postcss-px2rem自动做px到rem单位的装换
Svg-sprite-loader处理svg图标文件,自动生成symbol图标
通过devServer.Proxy设置处理跨域
目录规范的设计
Vue组件开发的规范采用的是eslint,结合vue组件开发规则
应用开发层:
全局组件:ElButton,Ellnput,ElTable,FooterBar,Grid,lcon,Message,ProductList,Tab,TabBar等组件
实现了autolnstallComponent插件实现了组件的自动全局注册,利用require.context方法实现读取文件目录文件,将组件分为了3种类型(普通,组合,api)是自动化组件
Filter过滤器,date,number,相关的格式化处理
Directives封装公共的dom操作
Axios的二次封装,更具环境动态改变baseUrl的值,使用拦截器
Api挂载到全局
打通上下游关系:
后端:接口文旦,restful规范,proxy代理
Ui:scss实线全局ui规范定义,rem处理适配
组件开发过程
考虑组件的类型(展示组件,容器组件,业务组件),设计组件用例,更具组件用例进行组件的开发,用例的设计主要考虑的就是(props,events,slots),以及组件如何被调用(模板中调用(全局注册,局部注册)),js中调用一个方法(Vue.extend方式创建组件),容器组件,业务组件的复用性差,也可以说不需要复用,但是展示组件的话复用能力比较强,所有在做组件设计的时候,组建内部不允许依赖状态管理(vuex),不允许出现axios请求
组件的创建方式:
Vue.extend
全局
局部
项目职责:
1.此项目使用vue-cli+webpack+es6搭建底层框架;
2.使用vue-router进行路由之间的跳转,实现页面局部切换,将功能模块拆分成多个组件;
3.页面排版采用iview框架,其中列表及分页在项目中使用频繁;
4.使用Vue双向数据绑定进行页面的渲染及交互功能;
5.解决关于浏览器的兼容问题;
6.负责部分页面的更新迭代;
项目二:痕量毒品检测后台管理系统(PC端)
项目简介:
痕量毒品检测是以拉曼项目为原型针对福建省公安厅的一个升级版检测数据展示平台, 新增除列表展示外的另一形式的数据展示及更新的一个项目。
项目职责:
1.使用vue-cli+webpack+es6搭建底层框架;
2.页面布局使用了element-ui框架;
3.对类似于分页等公共组件进行封;
4.使用echarts进行图表展示,并运用了echarts中的地图来展示数据分布;
5.针对不同用户正在登陆时做权限判断;
项目三:侃家找房(M站)
项目简介:
侃家找房汇集北京、上海所有的新房楼盘:定制化楼盘推荐、全流程买房攻略、一对一咨询服务、真实楼盘热度数据。
项目职责:
1.使用vue-cli+webpack+es6进行全家桶开发;
2.使用vue-router实现路由跳转;
3.使用axios向后台请求数据进行页面的渲染;
4.使用Vue双向数据绑定进行页面的渲染及交互功能,将功能模块拆分为多个组件,实现组件的按需加载,提高代码的可维护性;
5.使用fastclick模块解决点击延迟,使用webpack进行打包,提高性能;
6.使用vuex实现各个模块之间的数据管理,在modules之间进行各个模块之间的拆分,实现数据的快速更新。
项目四:居理新房(PC端)
项目简介:
居理新房是一个新房团购服务提供商,平台在了解用户需求后,会帮其寻找市场上合适的新房房源,并进行有针对性的推荐。
项目职责:
1.使用vue-cli+webpack+es6来构建整个项目的结构和规范;
2.使用Element-UI完成页面的基本布局;
3.详情页