vue 页面开发模式

关于开发模式,我个人认为就是个找姿势的问题,什么样的姿势舒服了就用什么样的姿势,如果模式用的好,对于开发速度的提升是很大的。

使用vue-cli

在进行后端开发的时候,一般我们会使用eclipse或是idea创建项目,前端的ide目前好像还没有这样的功能,其实这些创建项目的方式都是使用项目模板来创建项目。

在github上有很多的前端项目模板,这些项目模板已经做好了项目配置的优化,集成了常用的包,我一般会使用维护频次比较高的项目模板,前端与后端的不同在于,前端发展的很快,后端在项目开发过程中对于依赖的使用会倾向于使用过去的稳定版本,如果出现问题,也会很方便的找到前人解决方案,前端的发展速度比较的快,很多的旧版本的质量不是很高,开发者会直接放弃,不在维护,对于新的版本你还可以跑到github上提issues。

使用vue.extend

除去vue各种各样的好处,我比较喜欢的就是vue.extend,vue.extend的作用类似于继承,但是但是还是有点却别的,我们可以理解为,我们创建了一个vue组件(我个人喜欢称之为模板),可以通过vue.extend的方式来继承此组件,继承了模板的vue组件(我喜欢称之为模板页面)。

在使用vue开发后台管理项目的时候,我们会遇到很多的列表详情页,这些页面非常的相似,不同的在于这些页面可能标题,请求数据的接口不一样啊!这时候我们就可以使用vue.extend继承模板,通过修改发生变动的属性,渲染出新的页面。

使用vue.mixin

mixin在react也进行了实现,vue与react中的mixin比较的类似,vue,mixin主要用户扩展组件对象的属性,vue.extend主要针对的是页面的大部分属性相同,但是部分属性不同的情况,而vue.mixin针对的情况则是相反的,vue.mixin主要针对的情况是,当前页面的大部分的属性都是不一样的,但是又极少数的属性是完全一致的,在form表单页面,表单的内容是不一样的,但是对于表单的操作又大部分相同,这也是目前我对于mixin使用最多的场合。

使用install为全局vue添加属性

不管是vue.extend还是vue.mixin都是对vue对象属性的管理,都是为了提炼相同,减少代码,对于代码的相同部分进行提炼统一管理,那如果对于每个vue组件都要添加的属性该如何处理能,在以前,我们如果想过要在项目的各个地方都能方便的使用一个对象,我们对半会将该方法设置为全局对象,但是全局对象过于暴露,任何人都可以修改此对象。

在使用了vue后,我们几乎所有的代码都是在编写vue对象的各个属性,我们只需要在vue的对象属性中可以访问到该对象即可,所以我们可以通过install为所有vue对象添加属性。

最后更新于