vue构建项目组件的一点思考

一个项目构建的好不好，对于后期开发和维护是至关重要的，如何去评判一个项目构建的好不好？

1. 目录结构

目录结构其实就是说明了一切问题，功能的区分

这是我一直沿用的，应该也是大部分vue项目沿用的

1. 组件移植，扩展性

做业务的时候，我们经常碰到上图给出的需求。怎么去实现A、B而满足易扩展、易调用呢？

下面是我给出的实现，我的思路很简单。A是A、B是B,组件之间是没有交互的，只当通过Page的时候才会产生关联。我认为这是一个原则，组件都是独立存在的，不应该有2个组件之间的相互去交互，如果有，一定是通过A和B父辈组件去间接完成的。

这样不管A组件是去Page1页面，还是Page2页面都是灵活的，不会牵扯到其他业务逻辑的变更。

// A.vue
{
    name: 'A',
    data() {
        return {
            list: [{ id: 0, title: 'title1' }]
        }
    },
    mounted() {
        this.onClickItem(0)
    },
    methosd: {
        onClickItem(id) {
            this.$emit('call', id)
        },
         getList() {
           this.list =  this.list.concat([{ id: this.list.length, title: 'title1' }])
        }
    }

}

// B.vue
{
    name: 'B',
    props: {
        id: Number
    },
    data() {
        return {
            title: ''
        }
    },
    methosd: {
        getView(id) {
            this.title = id + 'title'
        }
       
    }

}

// Page.vue

<template>
    <div>
        <A @call="callA" ref="a"></A>
        <B :id="curId" ref="b"></B>
    </div>
</template>
{
    name: 'Page',
    props: {
        curId: 0
    },
    data() {
        return {
            title: ''
        }
    },
    methosd: {
        callA(id){
            this.curId = id
            this.$refs.b.getView(id)
        }
        getView(id) {
            this.title = id + 'title'
        }
       
    }

}

3、易上手，易开发

这个其实就是项目规范、执行力的问题，对后期维护产生深远影响

最后至于项目性能优化，加载快慢、预加载等等，这些是根据项目需求及市场决定的，具体的就不说了...