HTML5开发App通常使用的是Apache Cordova框架，它在HTML、CSS和JavaScript这些网页技术的基础上，添加一些native层的功能和API，比如调用设备的摄像头、地理位置等等。使用这个框架可以使Web应用程序具备类似原生应用程序的特性，例如可以调用设备的硬件、离线存储、交互性强等等。
Vue CLI是通过Node.js实现的脚手架工具，使用它可以快速创建一个Vue.js项目的结构及各种配置选项，可以轻松构建Vue开发环境。Vue CLI还集成了webpack、babel、css预处理器、ESlint等工具，方便开发和测试。
下面将详细介绍如何使用Vue CLI构建HTML5开发App。
1. 安装Vue CLI
安装Vue CLI前，先确保本地已安装了Node.js和npm包管理工具。
在命令行中输入以下命令进行全局安装Vue CLI：
```
npm install -g vue-cli
```
2. 创建Vue项目
在命令行输入以下命令创建一个打算命名为my-app的Vue项目：
```
vue init webpack my-app
```
然后按照提示选择一些选项进行设置，比如是否安装vue-router，是否使用ESLint等等。等待所有依赖包安装完毕后，进入my-app目录。
3. 安装Cordova
进入my-app目录，使用npm命令安装Cordova：
```
npm install -g cordova
```
安装完毕后，使用以下命令在my-app目录中新建一个cordova项目，名为my-hybrid：
```
cordova create my-hybrid com.example.myhybrid MyHybrid
```
其中，com.example.myhybrid和MyHybrid是应用程序的id和名称，可以根据实际情况进行修改。新建后，进入my-hybrid目录。
4. 将Vue项目构建为静态资源
在my-app目录中，运行以下命令构建Vue项目为静态资源：
```
npm run build
```
构建完成后，生成的静态资源文件将存放在my-app的/dist目录下。
5. 将静态资源复制到cordova项目中
在my-app目录中，运行以下命令将构建好的静态资源复制到cordova项目中：
```
cp -R dist/ ../my-hybrid/www/
```
6. 配置Cordova原生功能
在my-hybrid目录中，运行以下命令添加Cordova原生功能：
```
cordova platform add android
cordova platform add ios
```
其中，android和ios是应用程序的目标平台，可以根据需求进行修改。
7. 编写Cordova插件
Cordova插件是为了补充webview的API缺失而编写的代码库，这些代码可以让JavaScript代码调用原生平台的API和功能，比如获取设备信息、调用相机等等。在my-hybrid目录下，可以使用以下命令来创建一个cordova插件：
```
cordova plugin create MyPlugin --plugindir ~/Desktop/my-plugin
```
其中，MyPlugin为插件名称，~/Desktop/my-plugin为插件所在的文件目录。
8. 集成Vue和Cordova
在my-hybrid目录下，打开www目录下的index.html文件，在body标签内加入以下代码：
```
```
其中，cordova.js是必要的，用于加载Cordova原生功能。index.js是Cordova插件调用的入口文件。
然后，在my-app目录下找到src/main.js文件，将代码修改为如下：
```
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
var app = new Vue({
render: h => h(App)
}).$mount('#app')
//在deviceready事件中初始化cordova插件和资源
document.addEventListener('deviceready', function() {
var script = document.createElement('script');
script.setAttribute('src', 'cordova.js');
document.body.appendChild(script);
script.onload = function() {
//加载cordova插件
var myPlugin = cordova.require('cordova/plugin/MyPlugin');
app.$myPlugin = myPlugin;
//加载城市列表
var url = 'data/cities.json';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true)
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
var cities = JSON.parse(xhr.responseText);
app.$cities = cities;
}
};
xhr.send();
}
}, false);
```
代码中，首先初始化Vue，并在body标签内添加一个id为app的div元素，将Vue实例挂载到该id上。
然后使用document.addEventListener()方法监听Cordova的deviceready事件。该事件表示Cordova已经准备好了，Web应用程序可以开始使用原生平台的功能了。
在deviceready事件中，加载Cordova插件并将其添加到Vue实例中，然后加载城市列表数据。
完成以上步骤后，使用以下命令将应用程序部署到设备上：
```
cordova run android
```
这样，通过Vue CLI和Cordova框架，我们就可以快速、方便地开发HTML5 App了。
