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
來源：简书