欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于vue-cli3多頁面開發(fā)apicloud應用的教程詳解

 更新時間:2019年06月03日 16:57:58   作者:假裝取了昵稱  
這篇文章主要介紹了基于vue-cli3多頁面開發(fā)apicloud應用,本文采用vue-cli+APIcloud的方式寫解決以上痛點,開發(fā)靈活,并且打包之后體積更小速度更快,需要的朋友可以參考下
= item }) console.log('文件獲取結束') module.exports = pages

src文件夾下創(chuàng)建views文件夾,用于存放開發(fā)頁面的源碼;src文件夾下的main.js、App.vue可有可無,因為打包時并不會打包這兩個頁面,所以可根據(jù)自己的喜好刪除或保留

命令說明

打包:

npm run build

運行項目虛擬服務器

npm run serve

如果你用的是webstrom可把這兩個命令配置成運行命令,參考: http://www.dbjr.com.cn/article/149110.htm

頁面開發(fā)

根據(jù)上面的配置,實際打包的項目應該是如下結構:

我們可以注意到無論你的項目結構有多深,打包之后都在dist目錄下(如果不喜歡可以更改配置)

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

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

頁面跳轉

頁面初始化打開win或者frame放在main.js中,也可以放在App.vue中,我習慣放在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,因為vm對象中沒有api對象):

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

通過APICloud調試

開發(fā)階段跑的項目是本地虛擬服務,可在APICloud的config.xml中配置為本地虛擬服務器路徑:

打開wifi自動同步,由于vue的熱更新,開發(fā)項目會自動同步到APP項目中

生產環(huán)境下將項目打包,將打包之后的文件拷貝到APICloud項目html文件夾下(根據(jù)自己習慣),路勁改為APICloud項目路徑即可。

需要注意的是APICloud Studio無法外部拷貝到項目文件夾下,只能打開本地文件夾替換文件,每次替換完成之后,需要重啟APICloud Studio或者重新添加項目文件夾。不得不說這真是一個讓人很難受的事情,APICloud Studio并沒有刷新項目或者文件夾的選項。

總結

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

相關文章

最新評論