为什么要有开发规范：
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压缩，使用缓存等技术手段来减少网络传输数据量，提高页面加载速度。
版权归原作者 朝阳若蓝 所有， 如有侵权，请联系我们删除。