访客 一、APICloud创建程序
1、APICloud后台创建应用
2、APICloud拉取代码，APICloud开发工具地址
APICloud开发工具PC端，先下载APICloud开发工具，打开开发工具后点击项目，导入项目，云端云端检出，可以看到项目目录，可以将项目拉取下来。
3、APICloud自定义apk的loader创建测试应用的程序。
如何自定义loader：登录APICloud的官网，到达控制台，选择添加模块（可以添加h5不能实现的功能模块），点击模块下的自定义loader，点击编译xxx自定义loader。
将自定的loader下载到手机端，安装后打开，如果遇到问题，可能是需要打开此app的存储，照相的权限。
4.APICloud应用端的整体配置
整体的配置在config.xml文件下来配置，应用信息，偏好设置，模块的绑定，权限编辑等。
我们可以编辑源文件，改变里面的应用的名称，应用的版本，应用的开发者，应用的启动页，应用的邮箱，应用的描述，配置全局背景，window背景，frame背景，滚动条，是否全屏运行，自动监测更新，云修复，绑定模块的参数，权限管理等。具体的配置地址：
APICloudconfig.xml应用配置说明-手机APP开发、APP制作、APP定制平docs.apicloud.com/Dev-Guide/app-config-manual
源码配置图
二、如何将vue运行到APICloudAPP中
1、使用vue创建项目，并将项目同步到APP调试
1.1、使用vuecli创建项目和多页面项目创建
1>使用vuecli创建项目:
PC端环境依赖：nodejs、vue、npm、webpack（新版本vue不用管webpack）
正常的创建vue的项目，vue可能分文23版本，老的项目都是vue2的创建方式，很多都用到了webpack，后面的是vuecreate创建项目方式，我们可以创建完毕后切换到文件夹内npminstall，然后npmrunserve,会得到一个启动地址。
例如下图：http://192.168.2.152:8080/将地址配置到我们的config.xml的输入的目录。
vue2的安装和创建项目---老项目可能用的vue2安装npminstallvue-cli@2.9.6
vueinitwebpack"项目名称"
vue的最新安装和创建项目
安装npminstall-gvue-cli
安装vuecreate"项目名称"
2>多页面创建
为了尽量不影响应用性能和Hybrid中原生API的用户体验的前提下，并不推荐使用Vue.js的SPA开发模式，即不推荐使用vue-cli编译出使用vue-router、vuex、axois等模块的单页面应用。我们可以单独引入html页面每个页面引入vue.js，将vue.js当做是一个渲染的插件来用，可以使用里面的模板语法，v-if，v-show，v-for等。直接用script引入vue.js的方式能最大限度的减少vue与apicloud项目的耦合度，不会与现有原生api和原生模块产生冲突。
如下图每个页面都是这种单独引入vue.js的引入模式。
1.2、vueAPICloud项目开发调试
如果是单页的clivue的模式需要npmrunserve启动，然后将启动后台的访问地址放到如下图的config.xml里面，首先去apicloud生成自定义loader并下载，然后手机安装loader和电脑端安装的APICloudstudio3应用，打开项目，下载项目，编写里面代码，然后进行wifi同步到手机端。
如果是多页面的调试，和普通的项目的调试一样，就是将html页面新建到项目里面去，后面安装自定义loder和APICloudstudio3进行同步。
即手机端安装自定义loader，保证手机和电脑在同一个路由下，如图，手机端自定义loader，输入调试器的ip的地址和端口，这样就可以把前端的代码同步到手机端了。电脑端我们点击手机端的断点，我们可以看到console后的数据。
在PC端的，APICloudstudio的终端-通过wif链接设备
手机端安装的自定义loader
同步的时候会注意这个文件.gitignore，如图同步的时候将忽略的文件写到.gitignore文件中。
2、使用vue.js结合APICloud多页面渲染
2.1、vue多页面引入
首先我们知道了vue的多页面是怎么创建的，然后引入方式都是一个页面一个页面打开的，
使用APICloud有两种打开页面的方式1>api.openWin参数传递的时候写在pageParam里面，如果打开vue的路由的页面可以这样写，api.openWin({name:"index",url:"./index.html",});这样将index.html路由的页面可以打开。
2>api.openFrame参数传递的时候写在pageParam里面，如果打开vue的路由的页面可以这样写，api.openFrame({name:"index",url:"./index.html",});这样将index.html路由的页面可以打开。
参数可以在新页面中通过api.pageParam获取。
2.2、APICloud使用使用api
最需要注意的是apiready所有的js运行代码用到api的都要在这个函数内运行。其实就是需要等apiready准备好了，我们就可以直接调用了。
apiready此事件是在api对象准备完毕后产生，在每个Window或Frame的HTML代码中都需要监听此事件，以确定APICloud扩展对象已经准备完毕，可以调用了。
APICloud所有的文档都在这个链接APICloudAPP开发文档-手机APP开发、APP制作、APP定制平，关于所有的手机端的APICloud给我们封装的方法都在APICloud的api文档链接，我们可以看到他给我们封装了一些基础的使用手机系统的方法，关于应用的窗口的，各种事件的等，我们都可以在这边调用。还有就是APICloud的下面的模块都是通过api的方法去引用和调用。
例如使用ajax，可以将此方法放到vue页面的methods里面，在mounted可以直接调用或者在事件里面直接可以使用。
3、使用vue.js和vue的路由
vue.js的优势：1、【Vue.js】可以进行组件化开发，使代码编写量大大减少，读者更加易于理解；2、使用【Vue.js】编写出来的界面效果本身就是响应式的，这使网页在各种设备上都能显示出非常好看的效果3、这一套代码可以在APICloud上面打包成为安卓应用，可以打包成为IOS引用，可以打包成为h5应用。
首先通过vue的脚手架创建项目，使用vue-cli编译出使用vue-router、vuex、axois等混合APICloud的api来写项目。
开发配置：配置vue使用APICloud的api的方法是需要在main.js里面配置window.apiready方法如图，这样配置调用的是APICloud里面api的方法，只有在main.js这样写后同步到手机端的时候才能生效。单个vue页面上需要配置letapi=window.api来调用如下图：
import{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom'./router'importVantfrom'vant';import'vant/lib/index.css';window.apiready=()=>{createApp(App).use(router).use(Vant).mount('#app')}vue有路由：
方案一：声明式导航router-link
<router-link:to="{name:'home',params:{id:1}}">
<router-link:to="{name:'home',query:{id:1}}">
<router-link:to="/home/:id">
//传递对象
<router-link:to="{name:'detail',query:{item:JSON.stringify(obj)}}"></router-link>
方案二：编程式导航this.$router.push()在方法中添加参数，用的比较多。
1、不带参数：
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2、query传参
1.路由配置：name:'home',path:'/home'
2.跳转：this.$router.push({name:'home',query:{id:'1'}})this.$router.push({path:'/home',query:{id:'1'}})
3.获取参数html取参:$route.query.idscript取参:this.$route.query.id
3、params传参
1.路由配置：name:'home',path:'/home/:id'(或者path:'/home:id')
2.跳转：this.$router.push({name:'home',params:{id:'1'}})
3.获取参数html取参:$route.params.idscript取参:this.$route.params.id
4、直接通过path传参
1.路由配置name:'home',path:'/home/:id'
2.跳转：this.$router.push({path:'/home/123'})或者：this.$router.push('/home/123')
3.获取参数：this.$route.params.id
5、传递对象(obj不能过长否则会报错)
1query传递对象(类似get,url后面会显示参数)JSON.stringify(obj)转一下.
2接收参数：JS:JSON.parse(decodeURIComponent(this.$route.query.obj))
HTML:JSON.parse(decodeURIComponent($route.query.obj))
vue的项目的运行
如果上来就是链接npmrunserve的页面，可以在配config.xml，如图。ip地址是启动的本机的ip地址，注意手机和电脑在同一个wifi下面。
三、项目打包
1、vue打包
1>单页面的需要打包到dist文件里面
打包命令是vuerunbuild，打包文件都在dist文件夹下，如下图，dist文件里面有cssimgjs和index.html，
主要增加一个vue.config.js文件，修改publicpath的路径改成如下代码，这样修改了打包后访问空白bug。
注意，这个dist文件夹很重要，需要同步到APICloud平台进行打包，访问的时候访问dist/index.html路径再加上vue的路由。
这个dist文件就是我们要用的到的编译后的文件。dist文件提交到apicloud的后台再去打包。
2>多页面的不需要打包，只需要将涉及到的html文件，img，css，js文件全部提交到APICloud的后台。
2.Apiclou打包
将提交到后台的代码进行打包成为安卓APP和IOSAPP的过程。Apicloud打包我们把我们改的代码提交到APICloud的后台,注意我们启动页的路径，需要改的含有dist的绝对路径而不是http我们开发的路径。