前端Vue开发规范

为什么要有开发规范：

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

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

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

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

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

项目结构

node_modules        //存放项目所有的依赖public              //存放静态资源，项目打包的时候webpack不会编译这个文件夹src                 //存放项目源代码   assets           //存放项目静态资源文件     icon           //存放项目图标文件     images         //存放项目图片文件     styles         //存放项目样式文件     video          //存放项目视频文件   common           //存放项目公共文件     axios          //存放项目axios文件     commonJs       //存放项目公共Js文件     constant       //存放项目常量文件     controllers    //存放项目控制器文件     mixin          //存放项目混入文件     services       //存放项目服务器文件     vuex           //存放项目vuex文件   components       //存放项目组件文件   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压缩，使用缓存等技术手段来减少网络传输数据量，提高页面加载速度。

本文链接：https://www.kjpai.cn/news/2024-04-28/163229.html，文章来源：网络cs，作者：晨起，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！