基于vue-cli3多頁面開發(fā)apicloud應(yīng)用的教程詳解第2/2頁

src文件夾下創(chuàng)建views文件夾，用于存放開發(fā)頁面的源碼；src文件夾下的main.js、App.vue可有可無，因?yàn)榇虬鼤r(shí)并不會(huì)打包這兩個(gè)頁面，所以可根據(jù)自己的喜好刪除或保留

命令說明

打包：

npm run build

運(yùn)行項(xiàng)目虛擬服務(wù)器

npm run serve

如果你用的是webstrom可把這兩個(gè)命令配置成運(yùn)行命令，參考: http://www.fzitv.net/article/149110.htm

頁面開發(fā)

根據(jù)上面的配置，實(shí)際打包的項(xiàng)目應(yīng)該是如下結(jié)構(gòu)：

我們可以注意到無論你的項(xiàng)目結(jié)構(gòu)有多深，打包之后都在dist目錄下(如果不喜歡可以更改配置)

根據(jù)自己的需求創(chuàng)建文件夾，文件夾名稱即為頁面名稱，如果文件夾下面有frame文件夾，則frame為文件夾下的文件打包后為文件夾名稱+frame.html

每個(gè)文件夾下必須有main.js和App.vue（入口和頁面文件）,可以有多個(gè)拆分成組件（這一點(diǎn)和vue開發(fā)無異）

頁面跳轉(zhuǎn)

頁面初始化打開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中打開頁面(如果在App.vue中一定要用window.api.openWin，因?yàn)関m對(duì)象中沒有api對(duì)象)：

methods: {
 openWin (name) {
 window.api.openWin({
 name: name,
 url: `./${name}.html`,
 bgColor: '#fff'
 })
 }
 }

通過APICloud調(diào)試

開發(fā)階段跑的項(xiàng)目是本地虛擬服務(wù)，可在APICloud的config.xml中配置為本地虛擬服務(wù)器路徑：

打開wifi自動(dòng)同步，由于vue的熱更新，開發(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無法外部拷貝到項(xiàng)目文件夾下，只能打開本地文件夾替換文件，每次替換完成之后，需要重啟APICloud Studio或者重新添加項(xiàng)目文件夾。不得不說這真是一個(gè)讓人很難受的事情，APICloud Studio并沒有刷新項(xiàng)目或者文件夾的選項(xiàng)。

總結(jié)

以上所述是小編給大家介紹的基于vue-cli3多頁面開發(fā)apicloud應(yīng)用的教程詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論