前端开发项⽬实例_Vue项⽬开发技巧总结
前⾔
最近帮组⾥⾯新⼈做code review, 顺带回顾了⼀下以前项⽬的代码。问题是真的不少，虽然尽量统⼀规范，但每个⼈的代码风格还是有所区别的，很难让⼈满意。在项⽬开发的时候，我也经常会遇到有些部分可以⽤更有效率和易维护的代码实现，但是因为项⽬进度的原因选择了更省事的写法，虽然后来会在有时间的时候回去优化，但不能否认的是⼤部分还是没有时间再去修正的。所以我系统总结了⼀下我在Vue 开发中遵循的规则，希望⾃⼰能够严格规范代码，同时也分享给⼤家参考。
项⽬结构
建项⽬是技术确认后正式开发的第⼀步，⼀个合理的项⽬⽬录结构会在规范整个项⽬的代码风格上有很⼤帮助。⾸先先看⼀下我⽤vue-cli建的vue项⽬
在这⾥我只介绍src内部⽬录
1. api
这个⽬录是⽤来封装和服务端交互的api的，⽐较通⽤的写法 2. assets
⽤来存放图⽚，字体等等静态资源 3. business
这个⽬录是⽤来存放视图和业务分离后业务部分的代码的，我会在下⾯详细介绍 4. components
⽤来存放⼀些封装好的公共组件，或基础组件。如果是只在某个页⾯单独使⽤的组件，⼀般放到views⽬录下。 5. lang
⽤来存放国际化的多语⾔相关的⽂件
6. model
该⽬录下⼀般⽤来存放两种model,⼀种是页⾯的viewModel,⼀种是⽹络请求的数据model，我会在下⾯详细介绍 7. router
存放vue-router的路由⽂件 8. store
存放vuex的store⽂件 9. utils 该⽬录下⼀般放⼀些⼯具类或静态数据，⽐如说对⽇期处理的封装函数，
还有静态的变量名之类的数据。10. views 该⽬录下放项⽬的主要代码，⼀般来说该⽬录下的⼀个⼦⽬录对应⼀个页⾯。
代码分离
过度耦合。⾮常简单的⼀个例⼦，业在Vue开发中，我见过包括我⾃⼰在内的很多开发⼈员都会犯的⼀个错误，那就是视图代码和业务代码过度耦合
务⽐较复杂的页⾯的，写到后期经常会出现⼀个.vue⽂件⾥⾯写了最少上千⾏代码，导致⽆论继续开发或者是后期维护都变得⾮常费时费⼒，究其原因是因为把很多业务、数据上的处理都放到了这⼀个.vue⽂件⾥⾯。
要想解决这个问题，那就必须要分离代码，在和视图有关的.vue⽂件中，只允许存在和视图UI操作有关的代码。下⾯是⼀个对模板增删改查的.vue⽂件的分离写法。
前端页面模板在这⾥我将Template.vue这个⽂件有关的所有业务处理，以及进⾏⽹络请求的数据处理都放到business⽬录下的template.business.js这个⽂件中，在.vue⽂件中只保留对UI对基本操作。⽽在相应的template.business.js中，如果业务很复杂的话，也可以对这个js⽂件进⾏模块划分，这样对于相应业务的逻辑会更加清晰，让复杂的项⽬代码也会具有较⾼的可维护性和易读性。
数据处理
在前端开发中，当通过⽹络请求获取、提交数据时，接⼝提交、返回当数据格式和页⾯渲染时⽤的当数据格式很有可能并不相符，所以对于这部分⼀般需要做数据转换。数据转换我⼀般会封装到model⽬录下，每⼀个⽹络请求都对应于⼀个数据Model和⼀个View Model，在进⾏http请求获取数据时⽣成⼀个普通的数据Model的实例，然后转换成适合页⾯渲染的View Model。当进⾏数据提交时，将页⾯的view Model转换成普通的数据Model然后进⾏http请求。
Vue项⽬开发技巧总结
前⾔
最近帮组⾥⾯新⼈做code review, 顺带回顾了⼀下以前项⽬的代码。问题是真的不少，虽然尽量统⼀规范，但每个⼈的代码风格还是有所区别的，很难让⼈满意。在项⽬开发的时候，我也经常会遇到有
些部分可以⽤更有效率和易维护的代码实现，但是因为项⽬进度的原因选择了更省事的写法，虽然后来会在有时间的时候回去优化，但不能否认的是⼤部分还是没有时间再去修正的。所以我系统总结了⼀下我在Vue 开发中遵循的规则，希望⾃⼰能够严格规范代码，同时也分享给⼤家参考。
项⽬结构
建项⽬是技术确认后正式开发的第⼀步，⼀个合理的项⽬⽬录结构会在规范整个项⽬的代码风格上有很⼤帮助。⾸先先看⼀下我⽤vue-cli建
的vue项⽬
在这⾥我只介绍src内部⽬录
1. api
这个⽬录是⽤来封装和服务端交互的api的，⽐较通⽤的写法 2. assets
⽤来存放图⽚，字体等等静态资源 3. business
这个⽬录是⽤来存放视图和业务分离后业务部分的代码的，我会在下⾯详细介绍 4. components
⽤来存放⼀些封装好的公共组件，或基础组件。如果是只在某个页⾯单独使⽤的组件，⼀般放到views⽬录下。 5. lang
⽤来存放国际化的多语⾔相关的⽂件
6. model
该⽬录下⼀般⽤来存放两种model,⼀种是页⾯的viewModel,⼀种是⽹络请求的数据model，我会在下⾯详细介绍 7. router
存放vue-router的路由⽂件 8. store
存放vuex的store⽂件 9. utils 该⽬录下⼀般放⼀些⼯具类或静态数据，⽐如说对⽇期处理的封装函数，还有静态的变量名之类的数据。10. views 该⽬录下放项⽬的主要代码，⼀般来说该⽬录下的⼀个⼦⽬录对应⼀个页⾯。
代码分离
在Vue开发中，我见过包括我⾃⼰在内的很多开发⼈员都会犯的⼀个错误，那就是视图代码和业务代码过度耦合
过度耦合。⾮常简单的⼀个例⼦，业务⽐较复杂的页⾯的，写到后期经常会出现⼀个.vue⽂件⾥⾯写了最少上千⾏代码，导致⽆论继续开发或者是后期维护都变得⾮常费时费⼒，究其原因是因为把很多业务、数据上的处理都放到了这⼀个.vue⽂件⾥⾯。
要想解决这个问题，那就必须要分离代码，在和视图有关的.vue⽂件中，只允许存在和视图UI操作有关的代码。下⾯是⼀个对模板增删改查
的.vue⽂件的分离写法。
在这⾥我将Template.vue这个⽂件有关的所有业务处理，以及进⾏⽹络请求的数据处理都放到business⽬录下的template.business.js这个⽂件中，在.vue⽂件中只保留对UI对基本操作。⽽在相应的template.business.js中，如果业务很复杂的话，也可以对这个js⽂件进⾏模块划分，这样对于相应业务的逻辑会更加清晰，让复杂的项⽬代码也会具有较⾼的可维护性和易读性。
数据处理
在前端开发中，当通过⽹络请求获取、提交数据时，接⼝提交、返回当数据格式和页⾯渲染时⽤的当数据格式很有可能并不相符，所以对于这部分⼀般需要做数据转换。数据转换我⼀般会封装到model⽬录下，每⼀个⽹络请求都对应于⼀个数据Model和⼀个View Model，在进⾏http请求获取数据时⽣成⼀个普通的数据Model的实例，然后转换成适合页⾯渲染的View Model。当进⾏数据提交时，将页⾯的view Model转换成普通的数据Model然后进⾏http请求。
总结
以上的这些⽅法在开发的时候稍微⿇烦⼀些，肯定不如直接在.vue⽂件⾥直接写要⽅便。但是当项⽬开发到后期，代码量越来越多时，或者有需求要改动时，就会发现这些额外的⼯作是完全有价值的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。