美文网首页
我们的vue(技术栈总结)

我们的vue(技术栈总结)

作者: JTR354 | 来源:发表于2019-08-14 02:22 被阅读0次

经历了多年的探索与实践,我觉得我们技术栈的特点就是非常契合目前公司的开发需求。
特点是什么呢?

  • 开发敏捷
  • 扩充团队新生力量成本低

为什么这么说呢?先上图:


web端
  • 特色1:目录结构简洁,即使是第一天报到的新员工也能通过几个简单的英文单词就能分清楚各功能的所在位置
  • 特色2:上手成本低,由于是基于vue的模板,开发者只需要了解基础的html,css,javascript不到十分钟就能上手开发;再加上esLint的约束和提示,以及我们的规范能够保证代码风格一致。(统一的IDE和开发环境)也有利于降低开发维护成本。

  • 特色3:文件系统自动化创建(页面,组件,vuex以及它们所配套的路由、vuex模块化文件)

比如说,创建一个页面,你只需要在命令行输入npm run new page,根据相应的提示,会自动生成如下:


神奇的是:modules会自动按需加载

最重要的是这一切都是自动生成的,有效避免了人工产生的系统误差,节省了不必要开发维护成本。

以此类推 npm run new component 创建组件模板;npm run new module 创建全局的状态管理

  • 特色4:组件自动挂载与激活。当启用上述命令行创建组件时,以_base-开头为全局自动挂载组件,该组件无需再局部注册,以_global-开头为自动化全局组件,可在任意页面直接调用该组件。


另外,你也会发现我们的目录结构全采用一级目录方式,这个扁平化的风格是非常有利于后续开发人员维护与平移

  • 特色5:api接口模块化,充分的工作面,满足多人同时对接的需求;此外也是默认导出,页面 只需要import API from '@api' 打包工具webpack定义的文件目录的别名即可获取对应接口模块。


http工具类也是基于flyio进行的轻量封装,自动处理的全局的错误码,以及可配置的错误异常体系。利于维护和开发,以及新手的上手程度。

  • 特色6:声明式的版本发布,比如打包时输入npm run build dev v1便会生成v1版本研发环境平台应用的一个程序。
    这个功能主要的目的就是为了解决同一个项目经常会有多条需求同时开发的需求
    当多个开发环境,多个应用,多个版本同时跑起来的时候,想想都头大,好在有了这个简便的方案,便能够轻松的解决这个棘手的问题。

移动端(小程序)

上述描述的是web端的特点,下面再来看看小程序端基于mpvue的实现:


mpvue小程序端目录结构

是的,你没有看错,这就是小程序的目录结构,是不是和web端的一模一样?
当目录结构相同后,就方便在让自动化文件创建系统和web端的一致,这里就不再重复介绍了。
我们通过结合了mpvue的特点并进行了改进后,做到了与web端同样的开发体验,节约了技术栈切换的时间成本

pongni(框架模板cli工具)

更加神奇的是:

pongni
上述的这一切只需要通过cli的方式生成对应的框架代码;在项目快速拓展的时候,有非常明显的优势

小结

  • 首先有了自动化的文件系统,能够在开发过程中省去目录文件的创建工作
  • 然后在创建文件的过程中,会自动引入路由,vuex等模块的标准化
  • 再有整个项目又是通过pongni自动生成;
  • 从而形成了自上而下的一套完备体系,既能够有效的规范代码,又能让团队能够在繁琐单调的重复创建文件目录中得以解放,一举两得。
  • 再有就是vue上手速度很快,更利于团队新生力量的扩充
    可能你会觉得这没有什么了不起的,但是时间就是效率,谁把控了时间,谁就掌握了命运!

下面来看点数据:


优鲜小程序的日常访问量
优鲜小程序的近期访问量

虽然说我们用户数量目前无法更当今的巨头企业相比较,但是真实的用户流量数据,是否能够从侧面印证我们的作品是安全的,可靠的,稳定的。

再来看看我们的版本迭代
赞播优鲜版本更新(不完全)记录
从版本记录来看平均每月更新2到3个版本,而且还不包括小的功能需求。

上线的项目概览
以上一系列数据,也能证明我们在开发人员匮乏的情况之下,是能够满足项目快速开发迭代的要求的!

综上所述的数据事实来看,是能够证明我们的技术选型是非常适合当前公司的发展战略!

相关文章

网友评论

      本文标题:我们的vue(技术栈总结)

      本文链接:https://www.haomeiwen.com/subject/hhfwjctx.html