【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/
【web开发】web前端开发常用技术总结归纳的更多相关文章
- 初学者Web介绍一些前端开发中的基本概念用到的技术
Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...
- Android无线开发的几种常用技术(阿里巴巴资深工程师原创分享)
完整的开发一个android移动App需要经过从分解需求.架构设计到开发调试.测试.上线发布等多个阶段,在发布后还会有产品功能上的迭代演进,此外还会面对性能.安全.无线网络质量等多方面的问题. 移动A ...
- 开发辅助 | 前端开发工程师必懂的 UI 知识
移动 UI 设计的世界 ... 1.屏幕尺寸 屏幕大小,指屏幕对角线的长度,而不是屏幕的宽度或高度: 单位为英寸 如 iPhone 7 屏幕尺寸为 4.7 英寸:三星 S6 屏幕尺寸为 ...
- 开发辅助 | 前端开发工程师对 UI设计、交互设计的认知
1.UI 用户界面 UI:User Interfase 用户界面 UID:User Interfase Designer 用户界面设计师,多指移动 app 的界面设计: 2.一个合格的 UI 设计师, ...
- odoo开发笔记 -- 前端开发相关
https://www.cnblogs.com/lyzg/p/5634565.html http://dmyz.org/archives/598 https://www.jianshu.com/p/6 ...
- Web前端,HTML5开发,前端资源,前端网址,前端博客,前端框架整理 - 转改
Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v ...
- Web前端开发最佳实践(1):前端开发概述
引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...
- web 前端开发学习路线
初级 HTML 5 HTML 5 与 HTML 4 的区别 HTML 5 新增的主体结构元素 HTML 5 新增的非主体结构元素 HTML 5 表单新增元素与属性 HTML 5 表单新增元素与属性(续 ...
- 认识web前端开发
web前端开发 1.web即web系统,是以网站的形式呈现,通过浏览器的访问来实现一定的功能的系统. 2.什么是前端开发? 前端开发是创建web页面或app等前端界面呈现给用户的过程.通过html.c ...
随机推荐
- zookeeper和PHP zookeeper和kafka 扩展安装
http://blog.csdn.net/fenglailea/article/details/52458737#t3 目录(?)[-] 安装zookeeper 1直接安装zookeeper无须编 ...
- 移动端图片轮播—swipe滑动插件
swipe是一个轻量级的移动滑动组件,它可以支持精确的触滑移动操作,能解决移动端对滑动的需求. swipe插件的使用主要有四大块: 一.html <div id='slider' class=' ...
- 丁酉年六月十一ACM模拟赛
似乎该写题解了.今天模拟ACM,10道题(本来还有2道被删了),9道都来自BZOJ,中间我做过2道.那么说,今天Solv.便大大增多了(但还是不如强大的Amphetamine). 题单及一句话题解如下 ...
- navicat执行大容量的.sql文件时的设置
如果有主外键关联等,执行报错,则去掉中间的对勾保留第三个对勾试试.第三个对勾 是 手动提交(不自动提交,估计是全部导入到数据库中之后再一起提交,而不是导入一条sql语句就提交一次) 如果同时不勾选第2 ...
- C#线程篇---让你知道什么是线程(1)
线程线程,进程进程,到底什么是线程,什么是熟练多线程编程? 今天来和大家一起讨论讨论线程基础,让大家知道线程的基本构造. 说线程之前,先要了解下进程,这个可不能不知道. 什么是进程? Microsof ...
- [收藏转载链接]Opencv部分
转载自-柳如风-http://www.cnblogs.com/rongfangliu/p/opencvlink.html [收藏夹整理]OpenCV部分 OpenCV中文论坛 OpenCV论坛 o ...
- 【题解】Willem, Chtholly and Seniorious Codeforces 896C ODT
Prelude ODT这个东西真是太好用了,以后写暴力骗分可以用,写在这里mark一下. 题目链接:ヽ(✿゚▽゚)ノ Solution 先把原题解贴在这里:(ノ*・ω・)ノ 简单地说,因为数据是全部随 ...
- C++中基于成员函数是否是const重载成员函数
C++pimer中文版第四版 378页 基于const的重载 如果我们要在一个类的成员函数中定义两个函数签名完全一样的成员函数,比如display,那么可以基于是否是const成员函数来重载.比如: ...
- Consul 服务发现与配置
Consule 是什么 Consul包含多个组件,但是作为一个整体,为你的基础设施提供服务发现和服务配置的工具.他提供以下关键特性: 服务发现 Consul 的客户端可用提供一个服务,比如 api 或 ...
- Hadoop生态圈-hive五种数据格式比较
Hadoop生态圈-hive五种数据格式比较 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.