之前的开发项目APP项目是由APICloud原生js直接编写的。整个项目结束后，发现开发缓慢，页面代码众多且复杂，维护相对困难。而且文件打包后APP会比较大，apicloud的框架不太好用，支持一些es67(新的es6特性如let、const、import不支持写太硬)

使用vue-cli APIcloud编写并解决上述痛点，开发灵活，打包后体积更小、速度更快

环境依赖性

vue webpack vue-cli3 nodeJS的基本流程

最好准备两个项目进行项目开发，一个打包APP，一个项目开发，这样也会减少很多不必要的麻烦

创建一个项目并初始化

Cd到要创建项目的位置，并执行：

vue为apicloud创建vue

选择手动选择要素

根据自己的需求选择模块(不要使用Router，因为vue-router跳转到页面的效果比窗口和框架差很多)，按空格键选择，按Enter键完成选择：

选择css预处理语言，之后可以获得预处理语言支持：

选择eslint:

剩下的配置是根据自己的情况设置的，等待项目创建。

项目结构

项目结构如图所示：

多页配置

在项目的根目录下创建vue.config.js

Const pages=require('。/build/pages)模块。exports={ publicpath3360 '。/'，pages:pages，//是否生成sourceMap文件//开发环境配置为真，方便快捷定位错误(APICloud控制台输出实在不堪)//生产环境配置为假，构建速度更快，打包后体积更小。productionSourceMap: true}在项目根目录下创建build文件夹，在build文件夹下创建page.js。

Const glob=require('glob')//循环获取文件并打包console.log('获取页面文件.')//阅读src/view下的所有main.js。您可以更改const files=glob . sync(' * */view/* */main . js ')const pages={ } files . foreach(项={//默认情况下输出到dis文件夹。输出格式为文件夹名称(如果文件夹名称为框架，则为父文件夹名称框架)。html const items=item.split ('/')让page=items[items . length-2]const page parent=items[items . length-3]If(page==' frame '){ page=`$ { page parent } frame ` } page 12阅读下一页的全文