apicloud结合vue-cli三端跨平台超快速开发

看到我的标题的时候可能觉得我是吹牛的,我早就想试试webpack+apicloud结合起来来开发,用了官方的脚手架发现并不是我想要的开发速度,总之开发很麻烦,小项目就很慢的了,别说大一点的项目,编译起来简直不可想像!首先我要证明一下我的项目工程大小,上图


315行


76行

光看接口的数量就能证明这个项目不小,这个项目放在apicloud官方项目中,可以说,写起来很舒服,但是后期维护起来要累死两头牛都不算过,维护成本太大。

除了apicloud的官方脚手架(虽然说也支持es6,但是编译起来不如自己配置的webpack或者gulp),看到社区里面也有很多结合vue的,一些是用vue做数据渲染的工具,一些也是结合vue-cli,但是没有从根本上解决编译慢的问题,而且开发起来会很慢。

今天我要介绍的也是vue-cli结合apicloud,与其他不同的是,我介绍的这个方法入门简单(会vue-cli就可以),解决掉编译慢的问题,解决官方同步node_modules会卡死的问题(我加了.syncignore,依然会卡死,不知是不是操作姿势不对),解决插件管理问题,运行速度问题

apicloud现项目遇到的问题:

1、项目大维护成本难,

2、一次开发可以使用两端,不能使用到web端,需要再次开发,

3、插件没有系统的管理

4、使用的前端技术还在停留在几年前。等等一系列问题。

我们现在需要使用vue-cli+apicloud面临的会有几个问题;

1、单页面如何去进行页面跳转;

    :在应用vue-cli结合apicloud的时候,我选择抛弃了api.openwin、我用了vue-router做了页面跳转,发现性能甚至会比openwin高。可能有人会说openwin有很多动画,转场动画vue从来都不缺,例:vueg转场动画,性能也是刚刚的。带的参数一个不会少。

2、如何解决node_modules同步卡死的问题。

    :这个需要我们去改造config-->index.js   ——>build;我们改掉他的路径,不让在当前项目中打包生成,需要在当前项目外一层生成dist,这个dist中我们可以提前拷贝好apicloud的config.xml,

看到这个目录结构了吗?这个是vue打包生成的,我们只需要把config.xml,拷贝进去,这时候就没有node_modules,同步一下,就几个打包好的文件,是不是同步的速度都快了很多,哈哈,不过这个不需要一直打包,一直打包就违背了我们说的超快速开发的初衷,我们要在浏览器全部调试ok,测试原生,比如bmap,rongyun,等一切需要apicloud的地方,正常逻辑完全可以使用浏览器去搞定。

3、如何在网页端运行;

    :如何在网页端运行,我们的app项目,我们需要改造vue-cli的main.js入口文件,逻辑就是,当前是不是在app中运行,如果是app的话,我们需要做的就是加上window.apiready = function () {},不是app的话我们就走正常逻辑


基本上也都差不多就这么多,用es6飞起来吧,vue千万的组件等着你使用。效率飞起来,性能飞起来。推荐几个移动ui:vux,muse-ui。这两个组件库,基本上涵盖了平常使用的所有功能。附上demo马云地址:https://gitee.com/vuevv/apicloud-vue.git



作者:zhyzhyzz
链接:https://www.jianshu.com/p/8175ca085db7
来源:简书


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章