以前开发项APP项目直接用APICloud+原生js的方式进行编写，整个项目下来发现开发慢，页面代码多且复杂，维护起来相对困难，并且文件大打包以后的APP会比较大，apicloud的框架也很差用，支持部分es67(像let、const、import等es6新特性不支持写的太难受了)css

采用vue-cli+APIcloud的方式写解决以上痛点，开发灵活，而且打包以后体积更小速度更快html

环境依赖

• vue
• webpack
• vue-cli3
• nodeJS

基本流程

项目开发最好准备两个项目，一个打包APP，一个项目开发，也会减小不少没必要要的麻烦vue

建立项目并初始化

cd到项目想要建立的位置，执行：node

vue create vue-for-apicloud
复制代码

选择Manually select featureswebpack

项目结构

项目结构如图：git

多页面配置

项目根目录下建立vue.config.jses6

const pages = require('./build/pages')

module.exports = {
  publicPath: './',
  pages: pages,
  // 是否生成sourceMap文件
  // 开发环境配置true，方便快速定位错误（APICloud控制台输出真的很难受）
  // 生产环境配置false，构建速度更快，打包以后体积更小
  productionSourceMap: true
}
复制代码

项目根目录下建立build文件夹，bulid文件夹下建立page.jsgithub

const glob = require('glob')

// 循环获取文件并打包
console.log('获取页面文件中...')
// 读取src/views下全部main.js,可根据本身的状况更改
const files = glob.sync('**/views/**/main.js')
const pages = {}
files.forEach(item => {
  // 默认输出到dis文件夹下,输出格式为文件夹名（若是文件夹名为frame则为父文件夹名+frame）.html
  const items = item.split('/')
  let page = items[items.length - 2]
  const pageParent = items[items.length - 3]
  if (page === 'frame') {
    page = `${pageParent}Frame`
  }
  pages[page] = item
})
console.log('文件获取结束')

module.exports = pages
复制代码

src文件夹下建立views文件夹，用于存放开发页面的源码；src文件夹下的main.js、App.vue无关紧要，由于打包时并不会打包这两个页面，因此可根据本身的喜爱删除或保留web

命令说明

打包：vue-router

npm run build
复制代码

运行项目虚拟服务器

npm run serve
复制代码

若是你用的是webstrom可把这两个命令配置成运行命令，参考:blog.csdn.net/q649381130/…

页面开发

根据上面的配置，实际打包的项目应该是以下结构：

根据本身的需求建立文件夹，文件夹名称即为页面名称，若是文件夹下面有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并无刷新项目或者文件夹的选项。

经过上面的流程就能够实现打开win或者frame了，其余的和APICloud开发差很少

须要注意的地方

• App.vue中调用APICloud的方法须要采用window.api.openWi的方式(APICloud的其余方法同理），App.vue的this本质上是vm对象
• App.vue中方法或者回调尽可能使用箭头函数，保证this必定是vm对象
• APICloud的模块加载最好放在main.js中的window.apiready方法中
• APICloud Studio没法外部拷贝到项目文件夹下，只能打开本地文件夹替换文件，每次替换完成以后，须要重启APICloud Studio或者从新添加项目文件夹

说明

• 以上流程已经在正式项目中实践
• 参考文章：juejin.im/post/5c500c…
• github地址：github.com/maihuochai/…