基于vue-cli3多页面开发apicloud应用的教程详解第2/2页
src文件夹下创建views文件夹，用于存放开发页面的源码；src文件夹下的main.js、App.vue可有可无，因为打包时并不会打包这两个页面，所以可根据自己的喜好删除或保留
命令说明
打包：
npm run build
运行项目虚拟服务器
npm run serve
如果你用的是webstrom可把这两个命令配置成运行命令，参考: https://www.jb51.net/article/149110.htm
页面开发
根据上面的配置，实际打包的项目应该是如下结构：
我们可以注意到无论你的项目结构有多深，打包之后都在dist目录下(如果不喜欢可以更改配置)
根据自己的需求创建文件夹，文件夹名称即为页面名称，如果文件夹下面有frame文件夹，则frame为文件夹下的文件打包后为文件夹名称+frame.html
每个文件夹下必须有main.js和App.vue（入口和页面文件）,可以有多个拆分成组件（这一点和vue开发无异）
页面跳转
页面初始化打开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调试
开发阶段跑的项目是本地虚拟服务，可在APICloud的config.xml中配置为本地虚拟服务器路径：
打开wifi自动同步，由于vue的热更新，开发项目会自动同步到APP项目中
生产环境下将项目打包，将打包之后的文件拷贝到APICloud项目html文件夹下（根据自己习惯），路劲改为APICloud项目路径即可。
需要注意的是APICloud Studio无法外部拷贝到项目文件夹下，只能打开本地文件夹替换文件，每次替换完成之后，需要重启APICloud Studio或者重新添加项目文件夹。不得不说这真是一个让人很难受的事情，APICloud Studio并没有刷新项目或者文件夹的选项。
总结
以上所述是小编给大家介绍的基于vue-cli3多页面开发apicloud应用的教程详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
最新评论