Web App，顾名思义是指基于Web的应用，基本采用Html5语言写出，不需要下载安装。类似于现在所说的轻应用。基于浏览器运行的应用，基本上可以说是触屏版的网页应用。
一个web app如何拔地而起：需要用到的技术有Vue全家桶,H5。这三样我觉得是最重要的，其他的还包括js那些等等技术。
- vue参考文档https://cn.vuejs.org/
- H5参考接口Api http://www.html5plus.org/doc/h5p.html
构建一个web APP 大致流程是：
- vue脚手架搭建好项目框架（vue-cli3.0搭建）
vue create 项目名称在创建过程中会遇到很多的选择项，选择注释见vue3.0创建项目选择项注释 创建好之后就可以配置相关包，初步搭建项目的框架。
！！！一般vue3.0创建的是没有配置文件的需要自己创建一个vue.config.js的文件
- 选择好自己需要的ui框架
（现在有很多移动端的ui框架，我用过的是vant-uihttps://youzan.github.io/vant/#/zh-CN/）
yarn add vant
//在main.js文件里添加如下
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);- 还需要引入一个初始化样式文件，这种文件网上很多，根据自己所需要得引入（在main.js中引入）
- 个人觉得最重要的是移动端的单位像素适配和1像素边框的问题
（移动适配问题网上也有很多大神写的文章，但是自己到目前为止还是云里雾里。这篇文章算比较综合的解决方案了）
到目前为止我使用了两种方式：
第一种：(避免ui组件的单位也被转换单位的方式)
安装相关ostcss-px2rem-exclude，lib-flexible包
yarn add postcss-px2rem-exclude -D
yarn add lib-flexible
在main.js中引入
import ‘lib-flexible’//移动端适配
在修改postcss-px2rem-exclude 源码
/node_modules/postcss-px2rem-exclude/lib/index.js 文件 增加如下内容，即可
//还有一种方法，是避免ui组件的单位也被转换单位的方式
try{
var flag = options.exclude.includes('/')
if(flag){
var arr =options.exclude.split('/')
options.exclude = new RegExp(arr[1],arr[2])
}
}catch(err){
}
！！！该方法的链接
第二种配置方式：
安装lib-flexible，postcss-pxtorem包
yarn add lib-flexible
yarn add postcss-pxtorem
在main.js中引入
import ‘lib-flexible’//移动端适配
在public/index.html中修改：
注意事项（important）: 由于flexible会动态给页面header中添加标签，所以务必请把目录 public/index.html 中的这个标签删除！！
将 <meta name=“viewport” content="width=device-width,initial-scale=1.0"这个删除
在postcss.config.js中配置：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue:37.5,
propList: ['*']
}
}
}
注意：在写样式时需要将值改为设计图的一半
配置好以后需要重启
（该问题还需要的实际项目中多加练习配置）
- 接着就是各种逻辑代码的编写了，app编写肯定就少不了调用手机的各种功能那么就是看H5API文档了http://www.html5plus.org/doc/h5p.html个人觉得一些比较重要的配置点：
- 配置router.js路由文件（重点就是做登录逻辑判断----路由守卫）
- 配置全局请求的路径
- 配置全局组件（组件在很多地方使用的时候就可以配置为全局组件）
- 在main.js中引入
- 最后就是把web页面打包包装成一个app的外壳，就需要使用到Hbuild打包或者HbuildX打包
（个人建议使用HbuildX把，毕竟技术用最新的好。Hbuild打包，HbuildX打包的文章还在更新中）
