vue网页打包成appapicloud

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背景，滚动条，是否全屏运行，自动监测更新，云修复，绑定模块的参数，权限管理等。具体的配置地址：

APICloud config.xml应用配置说明 - 手机APP开发、APP制作、APP定制平docs.apicloud.com/Dev-Guide/app-config-manual

vue网页打包成app

二、如何将 vue 运行到 APICloud APP 中

1、 使用vue 创建项目 ，并将项目同步到APP调试

1.1、使用vuecli创建项目和多页面项目创建

1>使用 vuecli创建项目:

PC端环境依赖：nodejs、vue、npm、webpack（新版本vue不用管webpack）

正常的创建vue的项目，vue可能分文2 3+版本，老的项目都是vue2的创建方式，很多都用到了webpack ，后面的是vue create创建项目方式，我们可以创建完毕后切换到文件夹内npm install，然后npm run serve,会得到一个启动地址。

例如下图： http://192.168.2.152:8080/ 将地址配置到我们的 config.xml的输入的目录。

vue2的安装和创建项目---老项目可能用的vue2 安装 npm install vue-cli@2.9.6

vue init webpack "项目名称"

vue的最新安装和创建项目

安装 npm install -g vue-cli

安装 vue create "项目名称"

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和原生模块产生冲突。