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现项目遇到的问题：

一、项目大维护成本难，

二、一次开发可使用两端，不能使用到web端，须要再次开发，

三、插件没有系统的管理

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

咱们如今须要使用vue-cli+apicloud面临的会有几个问题；

一、单页面如何去进行页面跳转；

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

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

    ：这个须要咱们去改造config-->index.js   ——>build;咱们改掉他的路径，不让在当前项目中打包生成，须要在当前项目外一层生成dist，这个dist中咱们能够提早拷贝好apicloud的config.xml，

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

三、如何在网页端运行；

    ：如何在网页端运行，咱们的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來源：简书