看到我的標(biāo)題的時(shí)候可能覺得我是吹牛的凤类,我早就想試試webpack+apicloud結(jié)合起來來開發(fā),用了官方的腳手架發(fā)現(xiàn)并不是我想要的開發(fā)速度,總之開發(fā)很麻煩物延,小項(xiàng)目就很慢的了,別說大一點(diǎn)的項(xiàng)目障本,編譯起來簡直不可想像教届!首先我要證明一下我的項(xiàng)目工程大小响鹃,上圖
光看接口的數(shù)量就能證明這個項(xiàng)目不小,這個項(xiàng)目放在apicloud官方項(xiàng)目中案训,可以說买置,寫起來很舒服,但是后期維護(hù)起來要累死兩頭牛都不算過强霎,維護(hù)成本太大忿项。
除了apicloud的官方腳手架(雖然說也支持es6,但是編譯起來不如自己配置的webpack或者gulp)城舞,看到社區(qū)里面也有很多結(jié)合vue的轩触,一些是用vue做數(shù)據(jù)渲染的工具,一些也是結(jié)合vue-cli家夺,但是沒有從根本上解決編譯慢的問題脱柱,而且開發(fā)起來會很慢。
今天我要介紹的也是vue-cli結(jié)合apicloud拉馋,與其他不同的是榨为,我介紹的這個方法入門簡單(會vue-cli就可以),解決掉編譯慢的問題煌茴,解決官方同步node_modules會卡死的問題(我加了.syncignore随闺,依然會卡死,不知是不是操作姿勢不對)蔓腐,解決插件管理問題矩乐,運(yùn)行速度問題
apicloud現(xiàn)項(xiàng)目遇到的問題:
1、項(xiàng)目大維護(hù)成本難回论,
2散罕、一次開發(fā)可以使用兩端,不能使用到web端透葛,需要再次開發(fā)笨使,
3、插件沒有系統(tǒng)的管理
4僚害、使用的前端技術(shù)還在停留在幾年前硫椰。等等一系列問題。
我們現(xiàn)在需要使用vue-cli+apicloud面臨的會有幾個問題萨蚕;
1靶草、單頁面如何去進(jìn)行頁面跳轉(zhuǎn);
? ? :在應(yīng)用vue-cli結(jié)合apicloud的時(shí)候岳遥,我選擇拋棄了api.openwin奕翔、我用了vue-router做了頁面跳轉(zhuǎn),發(fā)現(xiàn)性能甚至?xí)萶penwin高浩蓉∨杉蹋可能有人會說openwin有很多動畫宾袜,轉(zhuǎn)場動畫vue從來都不缺,例:vueg轉(zhuǎn)場動畫驾窟,性能也是剛剛的庆猫。帶的參數(shù)一個不會少。
2绅络、如何解決node_modules同步卡死的問題月培。
? ? :這個需要我們?nèi)ジ脑靋onfig-->index.js? ?——>build;我們改掉他的路徑,不讓在當(dāng)前項(xiàng)目中打包生成恩急,需要在當(dāng)前項(xiàng)目外一層生成dist杉畜,這個dist中我們可以提前拷貝好apicloud的config.xml,
看到這個目錄結(jié)構(gòu)了嗎衷恭?這個是vue打包生成的此叠,我們只需要把config.xml,拷貝進(jìn)去随珠,這時(shí)候就沒有node_modules,同步一下拌蜘,就幾個打包好的文件,是不是同步的速度都快了很多牙丽,哈哈,不過這個不需要一直打包兔魂,一直打包就違背了我們說的超快速開發(fā)的初衷烤芦,我們要在瀏覽器全部調(diào)試ok,測試原生析校,比如bmap构罗,rongyun,等一切需要apicloud的地方智玻,正常邏輯完全可以使用瀏覽器去搞定遂唧。
3、如何在網(wǎng)頁端運(yùn)行吊奢;
? ? :如何在網(wǎng)頁端運(yùn)行盖彭,我們的app項(xiàng)目,我們需要改造vue-cli的main.js入口文件页滚,邏輯就是召边,當(dāng)前是不是在app中運(yùn)行,如果是app的話裹驰,我們需要做的就是加上window.apiready = function () {},不是app的話我們就走正常邏輯
基本上也都差不多就這么多隧熙,用es6飛起來吧,vue千萬的組件等著你使用幻林。效率飛起來贞盯,性能飛起來音念。推薦幾個移動ui:vux,muse-ui躏敢。這兩個組件庫闷愤,基本上涵蓋了平常使用的所有功能。附上demo馬云地址:https://gitee.com/vuevv/apicloud-vue.git