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

柔情只为你懂 2023-06-23 04:52 9阅读 0赞

> Web App，顾名思义是指基于Web的应用，基本采用Html5语言写出，不需要下载安装。类似于现在所说的轻应用。基于浏览器运行的应用，基本上可以说是触屏版的网页应用。

一个web app如何拔地而起：需要用到的技术有Vue全家桶,H5。这三样我觉得是最重要的，其他的还包括js那些等等技术。

*  vue参考文档[https://cn.vuejs.org/][https_cn.vuejs.org]
 *  H5参考接口Api [http://www.html5plus.org/doc/h5p.html][http_www.html5plus.org_doc_h5p.html]

**构建一个web APP 大致流程是：**

*  vue脚手架搭建好项目框架（vue-cli3.0搭建）

vue create 项目名称

在创建过程中会遇到很多的选择项，选择注释见[vue3.0创建项目选择项注释][vue3.0]  
创建好之后就可以配置相关包，初步搭建项目的框架。  
！！！一般vue3.0创建的是没有配置文件的需要自己创建一个vue.config.js的文件  
![这就是创建好项目后的文件结构][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]

*  选择好自己需要的ui框架  
    （现在有很多移动端的ui框架，我用过的是vant-ui[https://youzan.github.io/vant/\#/zh-CN/][https_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中引入）  
    ![在这里插入图片描述][20200428141812214.png]
 *  个人觉得最重要的是移动端的单位像素适配和1像素边框的问题  
    （移动适配问题网上也有很多大神写的文章，但是自己到目前为止还是云里雾里。这篇文章算比较综合的解决方案了[https://juejin.im/post/5df59139518825123e7af459][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){
    
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]  
[！！！该方法的链接][Link 1]

**第二种配置方式：**

**安装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: ['*']
          }
        }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]  
**注意：在写样式时需要将值改为设计图的一半**  
配置好以后需要重启

**（该问题还需要的实际项目中多加练习配置）**

*  接着就是各种逻辑代码的编写了，app编写肯定就少不了调用手机的各种功能那么就是看H5API文档了[http://www.html5plus.org/doc/h5p.html][http_www.html5plus.org_doc_h5p.html]  
    **个人觉得一些比较重要的配置点：**
 *  配置router.js路由文件（重点就是做登录逻辑判断----[路由守卫][Link 2]）
 *  跨域文件配置（在vue.config.js的文件里配置！！！注意只有在pc端测试时才会出现跨域问题，在打包时需要将跨域文件注释掉）
 *  配置全局请求的路径  
    ![在这里插入图片描述][20191219110136739.png]
 *  配置全局组件（组件在很多地方使用的时候就可以配置为全局组件）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 3]  
    在main.js中引入  
    ![在这里插入图片描述][20191219110411590.png]
 *  最后就是把web页面打包包装成一个app的外壳，就需要使用到Hbuild打包或者HbuildX打包  
    （个人建议使用HbuildX把，毕竟技术用最新的好。[Hbuild打包][Hbuild]，HbuildX打包的文章还在更新中）

[https_cn.vuejs.org]: https://cn.vuejs.org/
[http_www.html5plus.org_doc_h5p.html]: http://www.html5plus.org/doc/h5p.html
[vue3.0]: https://www.jianshu.com/p/5e13bc2eb97c
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191219090621717.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw==,size_16,color_FFFFFF,t_70
[https_youzan.github.io_vant_zh-CN]: https://youzan.github.io/vant/#/zh-CN/
[20200428141812214.png]: https://img-blog.csdnimg.cn/20200428141812214.png
[https_juejin.im_post_5df59139518825123e7af459]: https://juejin.im/post/5df59139518825123e7af459
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200618113856320.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw==,size_16,color_FFFFFF,t_70
[Link 1]: https://www.cnblogs.com/guandekuan/p/10551711.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200618133844696.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw==,size_16,color_FFFFFF,t_70
[Link 2]: https://www.jianshu.com/p/6c2048884066
[20191219110136739.png]: https://img-blog.csdnimg.cn/20191219110136739.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191219110320919.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw==,size_16,color_FFFFFF,t_70
[20191219110411590.png]: https://img-blog.csdnimg.cn/20191219110411590.png
[Hbuild]: https://blog.csdn.net/weixin_42307283/article/details/93624267