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來源：簡書