前端Vue开发规范

前端Vue开发规范

为什么要有开发规范:

1.降低新成员融入团队的成本,同时也一定程度避免挖坑

2.提高开发效率、团队协作效率,降低沟通成本

3.实现高度统一的代码风格,方便review,另外可以提高项目的可维护性

4.规范是实现自动化的基础

5.规范是一个团队知识沉淀的直接输出

项目结构

node_modules        //存放项目所有的依赖
public              //存放静态资源,项目打包的时候webpack不会编译这个文件夹
src                 //存放项目源代码
   assets           //存放项目静态资源文件
     icon           //存放项目图标文件
     images         //存放项目图片文件
     styles         //存放项目样式文件
     video          //存放项目视频文件
   ***mon           //存放项目公共文件
     axios          //存放项目axios文件
     ***monJs       //存放项目公共Js文件
     constant       //存放项目常量文件
     controllers    //存放项目控制器文件
     mixin          //存放项目混入文件
     services       //存放项目服务器文件
     vuex           //存放项目vuex文件
   ***ponents       //存放项目组件文件
   router           //存放项目路由文件
   utils            //存放项目工具文件
   views            //存放项目视图文件
App.vue             //页面的入口文件
main.js             //程序入口文件
directive.js        //存放自定义指令文件
index.scss          //根样式文件

目录,文件,组件,组件结构命名规范:

    目录命名:

     全部采用小写方式,以中划线分隔,有负数结构时,要采用复数命名法,缩写不用复数。

     项目目录与其项目一级导航菜单统一,便于管理,二级导航放在一级导航文件夹下,以此类推

    文件命名:

     JS、CSS、SCSS、HTML、PNG命名,全部采用小写方式,以中划线分隔

    组件命名:

    组件名以单词大写开头,当多个单词拼写成的组件时,采用驼峰式命名规则。一般是多个单词全拼,减少简写的情况,这样增加可读性。

组件结构:

组件结构遵循从上往下template, script, style的结构

   

Template规范:

      1.尽量使用以.vue结束的单文件组件,方便管理,结构清晰

      2.标签语义化,避免清一色的div元素

      3.DOM的层级数尽可能少,优化渲染速度

      4.多特性,分行写,提高可读性。即一个标签内有多个属性,属性分行写。

      5.自定义标签:使用自闭标签的写法。

      6.v-slot:在vue2.6版本中,slot与slot-scope已被弃用,统一使用v-slot指令。

      7.不使用v-html指令

      8.不写过于复杂的表达式,使用计算属性来代替

      9.相同的卡片布局,首先整合数据,尽量使用循环方式去增加,避免变更多处的问题。

     10.v-for循环必须加上key属性,在整个for循环中key需要唯一,key一般使用index或者todo.id

     11.避免v-if和v-for同时用在一个元素上(性能问题),以下为两种解决方案:

         1).将数据替换为一个计算属性,让其返回过滤后的列表

         2).将v-if移动至容器元素上(比如ul,ol)

JS规范:

       1.在Script标签中,应该遵守JS的规范和ES6规范

       2.创建公共的JS,封装公用的方法和工具类

       3.声明变量必须赋值

       4.使用let、const替代var 

       5.匿名函数使用箭头函数

       6.避免回调地狱

       7.方法返回Promise,方便可以通过.then的方式进行链式调用

       8.获取异步的数据,按具体情况使用async/await操作

       9.三元运算符不嵌套

       10.使用map、object替代if、switch case条件取值

       11.慎用setTimeout

       12.无特殊情况下不允许使用原生API操作DOM,谨慎使用this.$refs直接操作DOM

       13.需要使用函数表达式的场合,尽量用箭头函数代替。因为这样更简洁,而且绑定了this。

       14.尽量使用===和!==

       15.整合数据时尽量使用ES6,Object.assign和...扩展符(ps:Object.assign()为浅复制)

       16.若循环中需使用函数,请将函数定义在循环外部而非内部,这样可以避免函数的反复创建。

       17.Props定义:提供默认值,使用Type属性校验类型,使用Props之前先检查Prop是否存在。

       18.当在组件中使用data属性的时候(除了new Vue外的任何地方),它的值必须是返回一个对象的函数。

       19.JS中统一使用反引号(``)或是单引号(''),不使用双引号(“”)

       20.避免v-if和v-for用在一起

       21.函数中统一使用_this=this来解决全局指向问题

       22.导入模块时不要省略后缀(js除外),这样有利于IDE感知(特别是.vue)

       23.弹窗、select等需要大量代码去实现,要以组件的方式引入

       24.应该把复杂计算属性分割为尽可能多的更简单的属性

       25.使用路由懒加载(延迟加载)机制

       26.组件懒加载,较复杂的组件可使用,建议多使用

       27.调试信息console.log(); debugger使用完及时删除

       28.减少作用域链的查找,减少全局变量、闭包的使用,能用局部缓存的尽量用局部缓存

 

Css规范:

        1.需要加上scoped作用域

        2.避免使用标签选择器(效率低、损耗性能)

        3.CSS属性书写顺序:先决定定位宽高显示大小,再做局部细节修饰!推荐顺序:定位属性(或显示属性,display)-> 宽高属性 ->边距属性(margin, padding)-> 字体,背景,颜色等,修饰属性的定义

图片规范:

        1.每个模块都要增加一个图片文件夹方便后期维护和处理,图片文件命名尽量跟模块意义的相同,尽量使用小写单词命名

        2.图片格式常用png, jpg, gif

        3.命名全部用小写字母,数字及中划线组合,其中不包含汉子、空格和特殊字符;尽量用易懂的词汇,便于团队其他成员理解;命名分头尾两部分,用中划线隔开,(例如:ad-left01.png、btn-submit.png)

        4.在保证视觉效果的情况下选最小的图片格式与图片质量,减少加载时间

        5.PC端img图片必须填写width、height、alt属性

        6.需要变动的文字禁止切到图片中,如果不能确定是否需要变动,请咨询接口人

        7.需要程序后台动态生成的图片,如道具图片、头像、奖品,必须单独切割出来

        8.装饰性图片合并成精灵图,减少页面请求

API规范:

1.API接口地址统一管理,接口较少时可以单独写一个接口文件JS,页面中使用哪些引入哪些

2.接口较多时,可对接口按模块进行分类,一个模块对应一个接口文件

其他:

1.文字超出容器需要进行‘...’省略

2.图片显示无特殊要求时,按原图宽高比显示,尽量不要变形

3.涉及数据处理功能按钮,增加防频繁点击处理

4.小图标尽量使用UI框架自带的icon图标

5.页面按钮颜色,样式,功能尽量统一

6.不同页面相同功能的提示文字尽量统一

命名规范:

1.变量名,文件名,组件名,文件名等遵循驼峰命名规则:多单词拼接首字母小写,如:userInfo、productInfo;同时遵循语义化规则,能直观明白意图,如:getUserInfo;setUserName

2.变量声明(var, let, const),定义常量使用const,定义变量尽量使用let

Vue规范:

编码规范,使用es6风格进行编码

1.解构赋值

2.箭头函数

3.正确使用模块,如果模块只有一个输出值,就使用export default,如果模块有多个输出值,就不使用export default, export default与普通的export不要同时使用

4.多个异步操作时使用Promise对象进行封装

Http基础知识:

1.什么是http:http是一种超文本传输协议

2.为什么要使用http来传输:http是可靠的安全的

3.http协议的请求方式是什么:http是一个基于TCP/IP通信协议来传递数据,包括文件、图像、结果等,即是一个客户端和服务器端请求和应答的标准。基本上用到的就是GET和POST,充其量再遇到个option请求。

4.http和https有什么区别:1)https有ca证书,http一般没有   2)http是超文本传输协议,信息是超文本传输协议,信息是明文传输。https则是具有安全性的ssl加密传输协议  3)http默认80端口,https默认443端口

5.http协议有什么特点:  1)http无连接:限制每次连接只处理一个请求,服务端完成客户端的请求后,即断开连接。(传输速度快,减少不必要的连接,但也意味着每一次访问都要建立一次连接,效率降低)  2)http无状态:对于事务处理没有记忆能力。每一次请求都是独立的,不记录客户端任何行为   3)客户端/服务器端模型:客户端支持web浏览器或其他任何客户端    4)简单快速    5)灵活:可以传输任何类型的数据

6.cookies机制和session机制的区别是什么:1)cookies数据保存在客户端,session数据保存在服务端  2)cookies可以减轻服务器压力,但是不安全,容易进行cookies欺骗   3)session安全一点,但是占用服务器资源

7.GET和POST的区别:get地址栏可见,post地址栏不可见

8.什么是Http协议无状态协议?怎么解决Http协议无状态协议?

无状态协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息。状态协议解决办法:通过1.Cookie   2.通过Session会话保存

9.http协议中302状态:http协议中,返回状态码表示重定向。这种情况下,服务器返回的头部信息中会包含一个Location字段,内容是重定向到url

10.http协议由什么组成:

请求报文包含三部分:请求行:包含请求方法、URI、HTTP版本信息;请求首部字段;请求内容实体。

Rem移动端适配原理:

根节点html设置font-size,

元素rem则是相对于根节点html  font-size的大小进行计算

前端组件开发的注意事项:

1.浏览器兼容性

2.响应式设计(可以通过使用CSS媒体查询和流体布局来实现)

3.前端性能优化

4.安全性

5.可访问性

6.代码维护性和可扩展性

前端性能优化:

使用缓存,压缩资源,减少HTTP请求,减少重绘和重排,使用CSS Sprites,使用CDN,优化图片,懒加载,异步加载,减少DOM操作,使用Web Worker,使用Service Worker,使用浏览器缓存,代码优化和测试优化等。通过这些方法,可以帮助开发人员更好地优化网站性能,提高用户体验。

Vue前端用户体验优化:

1.使用合理的组件结构:将页面分为多个小模块或组件,每个组件负责特定功能。这样可以更好地管理和复用代码,并提高项目的可维护性。

2.数据加载优化:对于大量数据的展示场景,可以使用虚拟列表(Virtual List)技术,只渲染当前视口内显示的部分数据,而不是全部加载到DOM中。同时,也要注意及时清除无效的数据,避免造成内存溢出等问题。

3.图片优化:对于网站上的图片,可以使用WebP格式、压缩算法等手段拉力减少文件大小,从而提高加载速度。此外,还应该根据设备像素比选择正确的图片版本,以保证最佳的显示效果。

4.路由切换动画:利用Vue Router提供的transition属性,可以添加页面之间的过渡动画效果,如淡入淡出、左右滑动等,提升用户交互体验。

5.错误处理与反馈机制:良好的错误处理机制可以有效避免因程序bug导致的页面崩溃或白屏现象。同时,建立友好的反馈机制,收集用户的意见和建议,改进产品质量。

6.移动端适配:对于需要支持多平台的移动端应用,可以使用CSS媒体查询和Flex布局等技术,自适应调整界面元素位置和大小,以达到良好的显示效果。

7.接口优化:对于后端API接口,可以通过合理的参数传递、返回值控制等方式,尽量减少服务器的计算和IO操作,提高接口的响应速度和系统性能。

8.单页面SEO优化:对于基于SPA的网站,可以使用vue-meta库来生成HTML标签,包括titile、description、keywords等信息,以提高搜索引擎的收录和排名。

9.打包工具优化:使用webpack等打包工具时,可以按需加载所需的第三方库和组件,减少初始加载时间;同时,还可以通过代码分割、Tree Shaking等技术来减小打包后的文件体积。

Vue开发建议:如何优化前端性能和用户体验

1.合理使用Vue的响应式系统

避免频繁地对数据进行不必要的观察(watch)和更新;

在处理大量数据时,可以考虑使用Vue的计算属性,将一些复杂或频繁变化的数据进行缓存,避免重复计算;

对于不需要监听的数据,可以通过Object.freeze()或者Vue.set()等方式来禁止响应式系统对其进行监听,提升性能;

2.合理使用组件化开发

Vue提倡组件化开发,这种开发模式有利于代码的复用和维护。但是,如果组件划分不合理或者组件逻辑过于复杂,在页面渲染和组件交互方面可能会存在性能问题。

为了优化性能,应该将大型组件进行拆分,将其划分为多个子组件,并通过props和events来组织各组件之间的通信。此外,还可以通过异步组件来延迟加载一些不是首次渲染必须的组件,从而提升首屏加载速度。

3.合理使用路由和状态管理

在Vue应用中,合理使用路由和状态管理(如vuex)同样对性能和用户体验至关重要。在设计路由和状态管理时,需要避免过度嵌套和冗余数据的使用。

针对路由,可以考虑使用路由懒加载来延迟加载不同页面所需的资源,提升页面的加载速度。

对于状态管理,可以避免过度使用全局数据和过多的状态共享。在实际应用中,可以通过模块化的方式来划分状态,将复杂的全局状态分解成多个模块,这样可以更好地进行状态管理,也能够在一定程度上提升性能。

4.优化网络请求和数据加载

尽量减少不必要的网络请求,合并、压缩和缓存请求,以提升页面加载速度和用户体验。

对于大量数据的加载,可以采用分页加载和懒加载技术,逐步加载数据,减轻页面的压力,避免一次性加载过多数据而导致页面响应缓慢。

5.进行性能优化和代码压缩

性能优化和代码压缩,包括但不限于:压缩JS/CSS,使用CDN加速,启用Gzip压缩,使用缓存等技术手段来减少网络传输数据量,提高页面加载速度。

转载请说明出处内容投诉
CSS教程_站长资源网 » 前端Vue开发规范

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买