vue开发⼤项⽬代码编写规范--⾼级前端必看
现在项⽬开发基本都是团队⼀起来完成的，⽽且⽬前都采⽤前后端分离的开发模式，⼈多了，每个⼈的代码风格⼜不⼀样，这就导致了项⽬
⽐较杂乱，⽽且后期⼈员离职后维护以及迭代开发都是致命的，所以团队遵循共同的规范是必须的。有了统⼀的规范，你才能确保团队做出
来的项⽬⼏年以后仍然可以很⽅便的维护以及迭代开发。
代码风格必须统⼀规范
⽰例：看以下代码规范，每个vue⽂件中⾥⾯都有mounted和methods那么你代码就得这么写了。要保存this变量，整个团队都⽤vm,这是
⼀个团队规范的统⼀，增强代码的可读性，为啥要保存this?因为在箭头函数以及嵌套函数调⽤中，this指向可能会有问题。页⾯数据获取团
队统⼀在mounted⾥⾯获取，当然，你也可以在created中，但是必须有统⼀的规范，所有⼈的初始化数据都在同⼀个地⽅获取。这样做的
话以后团队中的⼈要去⽤别⼈写的组件，他初始化就只看mounted就⾏了，看初始化执⾏了哪些⽅法
mounted() {
let vm = this;
vm.init(); //
页⾯初始化的数据都在这个⽅法⾥执⾏
},
methods: {
init() {
let vm = this;
vm.initData(); //
获取页⾯初始化数据
vm.getDetail(); //
获取页⾯需要的详细信息
},
//
页⾯中的⽅法命名也必须统⼀，见名知意，不能个性化，统⼀的命名规范⼗分⽅便以后维护以及功能迭代
initData() {
},
getDetail() {
}
}
另外团队项⽬中必须使⽤eslint来检验代码，从⽽规范所有开发者代码的格式。
必要的⽅法，参数，以及⾃定义的flag要写上注释，提⾼代码可读性，降低⽇后维护成本。
代码如下（⽰例）：
data() {
return {
routeFlag: 'add' // add
为新增，
review
为复核，
back
为打回重新申请，
update
为更新操作，
overdue
为过期
}
},
methods: {
//
⽤户信息提交
,type == 1,
新增操作，
type == 2
，变更操作，
type == 3
，提交到其他系统审核
handeSubmit(type) {
//
过滤⽤户
id
信息
peopleArray.filter((item) => {
return item.id == fromData.id;
});
}
}
框架公共资源的封装，放置位置
在项⽬开始阶段，⾸先得确定⽤那种技术，⽤啥框架，然后基于该框架在封装出符合企业开发需求的团队⼀起⽤的框架。就拿vue来说，它
的src⽬录下你要建⼀个http.js,这个⽂件主要是引⼊axios,然后进⾏请求和响应拦截，以及设置公共的请求头，然后请求参数的统⼀处理，
处理完成后最好将基于axios的get,post，getJson,postJson等⽅法挂载到vue的实例原型上，即vue.prototype.get = ⾃⼰封装的函数，
项⽬中可以直接this.get调⽤get请求。当然，这个http.js⽂件要在main.js中引⼊。
然后你还要在src下建⼀个api⽂件夹，地下在建⼀些⼦模块⽂件夹，⾥⾯编写的是每个模块所需的接⼝以及数据获取⽅法。
下载后可阅读完整内容，剩余3页未读，立即下载
怀里的熊
- 粉丝: 4
- 资源: 5
我的内容管理
展开
最新资源
- 李兴华Java基础教程：从入门到精通
- U盘与硬盘启动安装教程：从菜鸟到专家
- C++面试宝典：动态内存管理与继承解析
- C++ STL源码深度解析：专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手：数据管理与企业增值的战略
- Eclipse IDE基础教程：从入门到精通
- Shell脚本专家宝典：全面学习与资源指南
- Tomcat安装指南：附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华：必备术语集锦
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
