技术选型规范规范

• 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/

【web开发】web前端开发常用技术总结归纳的更多相关文章

  1. 初学者Web介绍一些前端开发中的基本概念用到的技术

    Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...

  2. Android无线开发的几种常用技术(阿里巴巴资深工程师原创分享)

    完整的开发一个android移动App需要经过从分解需求.架构设计到开发调试.测试.上线发布等多个阶段,在发布后还会有产品功能上的迭代演进,此外还会面对性能.安全.无线网络质量等多方面的问题. 移动A ...

  3. 开发辅助 | 前端开发工程师必懂的 UI 知识

           移动 UI 设计的世界 ... 1.屏幕尺寸 屏幕大小,指屏幕对角线的长度,而不是屏幕的宽度或高度: 单位为英寸 如 iPhone 7 屏幕尺寸为 4.7 英寸:三星 S6 屏幕尺寸为 ...

  4. 开发辅助 | 前端开发工程师对 UI设计、交互设计的认知

    1.UI 用户界面 UI:User Interfase 用户界面 UID:User Interfase Designer 用户界面设计师,多指移动 app 的界面设计: 2.一个合格的 UI 设计师, ...

  5. odoo开发笔记 -- 前端开发相关

    https://www.cnblogs.com/lyzg/p/5634565.html http://dmyz.org/archives/598 https://www.jianshu.com/p/6 ...

  6. Web前端,HTML5开发,前端资源,前端网址,前端博客,前端框架整理 - 转改

    Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v ...

  7. Web前端开发最佳实践(1):前端开发概述

    引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...

  8. web 前端开发学习路线

    初级 HTML 5 HTML 5 与 HTML 4 的区别 HTML 5 新增的主体结构元素 HTML 5 新增的非主体结构元素 HTML 5 表单新增元素与属性 HTML 5 表单新增元素与属性(续 ...

  9. 认识web前端开发

    web前端开发 1.web即web系统,是以网站的形式呈现,通过浏览器的访问来实现一定的功能的系统. 2.什么是前端开发? 前端开发是创建web页面或app等前端界面呈现给用户的过程.通过html.c ...

随机推荐

  1. UIImage加载图片的方式以及Images.xcassets对于加载方法的影响

    UIImage加载图片的方式以及Images.xcassets对于加载方法的影响 图片缓存 根据是否将创建好的对象缓存入系统内存,有两类创建UIImage对象的方法可选: 缓存:+ imageName ...

  2. winscp以命令行方式同步服务器数据到PC机磁盘上

    目前服务器上每日会产生备份文件,需要使用winscp工具把备份同步到本地PC机硬盘上.平时都是图形界面用鼠标点击方式来同步的,效率低下,因此编写了winscp自动同步脚本,并加入到计划任务中定时自动运 ...

  3. CAAnimation保持动画结束时的效果

    配置动画时,加上一下两句 animation.removedOnCompletion = NO; animation.fillMode = kCAFillModeForwards;

  4. AAC音频格式详解

    关于AAC音频格式基本情况,可参考维基百科http://en.wikipedia.org/wiki/Advanced_Audio_Coding AAC音频格式分析 AAC音频格式有ADIF和ADTS: ...

  5. Java并发编程原理与实战三十四:并发容器CopyOnWriteArrayList原理与使用

    1.ArrayList的实现原理是怎样的呢? ------>例如:ArrayList本质是实现了一个可变长度的数组. 假如这个数组的长度为10,调用add方法的时候,下标会移动到下一位,当移动到 ...

  6. Redis实战(一)CentOS 7上搭建redis-3.0.2

    1.安装redis wget http://download.redis.io/releases/redis-3.0.2.tar.gz tar zxvf redis-3.0.2.tar.gz cd   ...

  7. Linuc学习3-输入和输出重定向

    已打开的文件描述符在fork和exec调用后保留下来,我们可以利用对进程这方面知识点的理解来改变程序的行为. 这个例子涉及一个过滤程序:它从标准输入读取数据,然后向标准输出写数据,同时在输入和输出之间 ...

  8. springboot+mybatis使用PageHelper分页

    项目结构和spring搭建mybatis请参考springboot整合mybatis.在这个基础上配置分页. 一:导入PageHelper依赖 <dependency> <group ...

  9. 20145202马超 2016-2017-2 《Java程序设计》第6周学习总结

    20145202马超 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 进程:是一个正在执行中的程序,每一个进程都有一个执行程序,该顺序是一个执行路径,或者说是 ...

  10. 突破XSS字符限制执行任意JS代码

    突破XSS字符限制执行任意JS代码 一.综述 有些XSS漏洞由于字符数量有限制而没法有效的利用,只能弹出一个对话框来YY,本文主要讨论如何突破字符数量的限制进行有效的利用,这里对有效利用的定义是可以不 ...