【web开发】web前端开发常用技术总结归纳

技术选型规范规范

• Vue版本:2.x
• 前端路由:vue-route
• 异步请求:Axios
• 全局状态管理:VueX
• css预处理器:sass/less
• h5项目移动端适配规则:使用rem单位/rem=>px换算规则统一 • 小程序:使用小程序自带rpx单位,适配规则参考小程序文档

 

公用组件库

• UI组件库:Vant_UI(有赞UI)
• 轮播库:vue-awesome (支持多种形式的图片轮播和相册展

示,适合活动页使用)

• css动画-Animate.css (轮播库自带动画,缺点不支持多个动 画)

• 备注:现在新的项目使用的都是vue技术栈,使用的插件需要 时基于vue的,避免引入基于jquery的插件

• 可使用小程序原生开发

 

小程序相关

• 可使用mpvue框架开发(vue小程序开发框架)

• 小程序提交有大小限制(最大2M),所以图片静态资源尽量放 在oss服务器上,另外小程序官方API改动频繁,开发时需要留意 开发者社区官方公告

 

性能优化规范

• vue-route路由懒加载---解决vue项目首次加载慢,减少白屏等 待时间,参考教 程:https://www.cnblogs.com/lijuntao/p/7777581.html

• v-if与v-show根据业务场景选用,两者区别参考官方文档
• data里初始化数据的结构尽量详细,命名清晰,简单易懂,避

免无用的变量

• 页面内全局状态过多难管理的时候按需引入VUEX,状态分模 块管理

• 打包优化,打包 vender 时不打包 vue、vuex、vue- router、axios 等,换用国内的 bootcdn 直接引入到根目录的 index.html 中,需要配置webpack,忽略不需要打包的库。

 

代码编写规范

• 用简短有意义的英文或者拼音(不能出现中文命名)来命 名文件夹和文件,不能起有歧义的命名并统一小写;(后 期可以整理一份常用的词汇表,减少为命名而浪费太多时 间)

● 编码规范

• 目前我们的所有文件编码以及代码编码都统一为utf- 8,所以出现很多诡异问题首先看看是不是编码不一 致导致的

● 注释规范

• 给代码加上适当的注释,便于协作以及后期维护(CSS以及 JS文件头注释,以及代码块注释等等)

 

• 相关技术文档地址:

• Vue:https://cn.vuejs.org/

相关技术文档

• Vue-route:https://router.vuejs.org/zh-cn/essentials/getting-started.html

• Vuex:https://vuex.vuejs.org/zh-cn/api.html

• Axios:https://www.kancloud.cn/yunye/axios/234845

• Vant-UI:https://www.youzanyun.com/zanui/vant#/zh-CN/intro

• vue-awesome:http://www.swiper.com.cn/

• animate.css:https://daneden.github.io/animate.css/

• clipboard:https://www.npmjs.com/package/clipboard

• 小程序开发文 档:https://developers.weixin.qq.com/miniprogram/dev/api/

• 小程序框架mpvue文档:http://mpvue.com/ • 参考前端开发规范文

档:https://www.w3cschool.cn/webdevelopment/drshcozt.html
• 百度前端开发规范文档:http://coderlmn.github.io/code-standards/

• 腾讯前端开发规范文档:http://alloyteam.github.io/CodeGuide/