vue项目重构心得

近期重构前端代码,记录下走过的坑

重构代码一般有两种方式--减法和加法

顾名思义“减法”一般是在原有项目的基础上删除修改文件,但是存在的问题是,分支管理的问题,一旦在重构代码时原有系统又更新了,就要把原有系统的代码更新,但是分支合并或者切换的时候回出现问题(推测删除文件造成)并且删除后的代码需做回归测试,risk较大
“加法”--搭建一个全新的项目,在这个新的项目上,将原有项目的代码加在新的项目上面,时间周期较长,risk较小

代码结构要简洁明了

将一些组件的配置用一个config文件封装在一起,使用时import即可。优化项目目录结构,切记不可使用相同的文件名字(不同文件夹下均使用index.vue),文件多的时候就不容易了解这个属于是哪个组件,不利于后续开发

将使用的常量或是一些配置的api域名统一处理

api的封装(必须),一般都是封装好的,不做概述

封装组件

vue component的封装可以使用slot语法,将一些用户自定义的内容显示在对应的位置
在配置默认的props时要注重props的写法:

export const props = {
    addName: {
        type: String,
        default: ''
    },
    isShow: {
        type: Object, // 若props为复杂数据类型需用function返回对应的类型
        default: function(){
            return {
                aa: true
            }
        }
    }
}

后续待update

你可能感兴趣的:(vue项目重构心得)