Vue-app之H5基于Vue初始化一个移动端项目H5APP

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像素边框的问题
（移动适配问题网上也有很多大神写的文章，但是自己到目前为止还是云里雾里。这篇文章算比较综合的解决方案了https://juejin.im/post/5df59139518825123e7af459）

到目前为止我使用了两种方式：
第一种：(避免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路由文件（重点就是做登录逻辑判断----路由守卫）
跨域文件配置（在vue.config.js的文件里配置！！！注意只有在pc端测试时才会出现跨域问题，在打包时需要将跨域文件注释掉）
配置全局请求的路径
配置全局组件（组件在很多地方使用的时候就可以配置为全局组件）

在main.js中引入
最后就是把web页面打包包装成一个app的外壳，就需要使用到Hbuild打包或者HbuildX打包
（个人建议使用HbuildX把，毕竟技术用最新的好。Hbuild打包，HbuildX打包的文章还在更新中）

Vue-app之H5基于Vue初始化一个移动端项目H5APP相关推荐

vue.js毕业设计，基于vue.js前后端分离教室预约系统（H5移动项目）开题报告
毕业论文基于Vue.js的教室预约系统(H5) 开题报告学院: 专业: 年级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书姓 ...
vue.js毕业设计，基于vue.js前后端分离订座预约系统（H5移动项目）开题报告
毕业论文基于Vue.js预约订座系统(H5) 开题报告学院: 专业: 年级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书姓 ...
vue.js毕业设计，基于vue.js前后端分离在线教育视频点播系统（H5移动项目）开题报告
毕业论文基于Vue.js视频点播系统(H5) 开题报告学院: 专业: 年级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书姓 ...
vue.js毕业设计，基于vue.js前后端分离外卖点餐系统（H5移动项目）开题报告
毕业论文基于Vue.js外卖点餐系统(H5) 开题报告学院: 专业: 年级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书姓 ...
vue.js毕业设计，基于vue.js前后端分离电影院售票系统（H5移动项目）开题报告
毕业论文基于Vue.js电影院售票系统(H5) 开题报告学院: 专业: 年级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书姓 ...
vue.js毕业设计，基于vue.js前后端分离订座预约系统设计与实现（H5移动项目）
功能介绍 [后台功能] 广告管理:设置小程序首页轮播图广告和链接留言列表:所有用户留言信息列表,支持删除会员列表:查看所有注册会员信息,支持删除录入资讯:录入资讯标题.内容等信息管理资讯:查看 ...
vue.js毕业设计，基于vue.js前后端分离在线教育视频点播小程序系统开题报告
毕业论文基于Vue.js视频点播小程序系统开题报告学院: 专业: 年级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书姓名 ...
vue.js毕业设计，基于vue.js前后端分离教室预约小程序系统开题报告
毕业论文基于Vue.js的教室预约小程序系统开题报告学院: 专业: 年级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书姓 ...
vue.js毕业设计，基于vue.js前后端分离电影院售票小程序系统开题报告
毕业论文基于Vue.js电影院售票小程序系统开题报告学院: 专业: 年级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书姓 ...

Vue-app之H5基于Vue初始化一个移动端项目H5APP

Vue-app之H5基于Vue初始化一个移动端项目H5APP相关推荐

最新文章

热门文章