基于vue-cli3多頁(yè)面開(kāi)發(fā)apicloud應(yīng)用的教程詳解
src文件夾下創(chuàng)建views文件夾,用于存放開(kāi)發(fā)頁(yè)面的源碼;src文件夾下的main.js、App.vue可有可無(wú),因?yàn)榇虬鼤r(shí)并不會(huì)打包這兩個(gè)頁(yè)面,所以可根據(jù)自己的喜好刪除或保留
命令說(shuō)明
打包:
npm run build
運(yùn)行項(xiàng)目虛擬服務(wù)器
npm run serve
如果你用的是webstrom可把這兩個(gè)命令配置成運(yùn)行命令,參考: http://www.dbjr.com.cn/article/149110.htm
頁(yè)面開(kāi)發(fā)
根據(jù)上面的配置,實(shí)際打包的項(xiàng)目應(yīng)該是如下結(jié)構(gòu):
我們可以注意到無(wú)論你的項(xiàng)目結(jié)構(gòu)有多深,打包之后都在dist目錄下(如果不喜歡可以更改配置)
根據(jù)自己的需求創(chuàng)建文件夾,文件夾名稱即為頁(yè)面名稱,如果文件夾下面有frame文件夾,則frame為文件夾下的文件打包后為文件夾名稱+frame.html
每個(gè)文件夾下必須有main.js和App.vue(入口和頁(yè)面文件),可以有多個(gè)拆分成組件(這一點(diǎn)和vue開(kāi)發(fā)無(wú)異)
頁(yè)面跳轉(zhuǎn)
頁(yè)面初始化打開(kāi)win或者frame放在main.js中,也可以放在App.vue中,我習(xí)慣放在main.js中
import Vue from 'vue' import App from './App.vue' window.apiready=function () { new Vue({ render: h => h(App) }).$mount('#app') window.api.openFrame({ name: 'waringFrame', url: 'waringFrame.html', bgColor: '#ffffff', rect: { x: 0, y: document.getElementsByTagName('header')[0].clientHeight, w: 'auto', h: 'auto' }, bounces: true, overScrollMode: 'scrolls' }) }
app.vue中打開(kāi)頁(yè)面(如果在App.vue中一定要用window.api.openWin,因?yàn)関m對(duì)象中沒(méi)有api對(duì)象):
methods: { openWin (name) { window.api.openWin({ name: name, url: `./${name}.html`, bgColor: '#fff' }) } }
通過(guò)APICloud調(diào)試
開(kāi)發(fā)階段跑的項(xiàng)目是本地虛擬服務(wù),可在APICloud的config.xml中配置為本地虛擬服務(wù)器路徑:
打開(kāi)wifi自動(dòng)同步,由于vue的熱更新,開(kāi)發(fā)項(xiàng)目會(huì)自動(dòng)同步到APP項(xiàng)目中
生產(chǎn)環(huán)境下將項(xiàng)目打包,將打包之后的文件拷貝到APICloud項(xiàng)目html文件夾下(根據(jù)自己習(xí)慣),路勁改為APICloud項(xiàng)目路徑即可。
需要注意的是APICloud Studio無(wú)法外部拷貝到項(xiàng)目文件夾下,只能打開(kāi)本地文件夾替換文件,每次替換完成之后,需要重啟APICloud Studio或者重新添加項(xiàng)目文件夾。不得不說(shuō)這真是一個(gè)讓人很難受的事情,APICloud Studio并沒(méi)有刷新項(xiàng)目或者文件夾的選項(xiàng)。
總結(jié)
以上所述是小編給大家介紹的基于vue-cli3多頁(yè)面開(kāi)發(fā)apicloud應(yīng)用的教程詳解,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁(yè)應(yīng)用
- 通過(guò)vue-cli3構(gòu)建一個(gè)SSR應(yīng)用程序的方法
- 詳解Vue CLI3 多頁(yè)應(yīng)用實(shí)踐和源碼設(shè)計(jì)
- vue-cli實(shí)現(xiàn)多頁(yè)面多路由的示例代碼
- 詳解如何將 Vue-cli 改造成支持多頁(yè)面的 history 模式
- Vue-cli創(chuàng)建項(xiàng)目從單頁(yè)面到多頁(yè)面的方法
- 詳解vue-cli + webpack 多頁(yè)面實(shí)例配置優(yōu)化方法
- 詳解vue-cli + webpack 多頁(yè)面實(shí)例應(yīng)用