vue开发移动端app-学习记录

2023年2月18日 207次阅读 来源: gellenliu

目录

持续更新中，学到一点写一点

  1. 项目结构
  2. H5与app的区别
  3. 项目框架搭建
  4. 使用iconfont图标库
  5. 连接真机调试
  6. 打包apk发布
  7. 使用mint ui 组件
  8. 使用vant ui 组件
  9. 调用h5 + api
  10. Axios请求封装
  11. 偷师学艺：浏览器访问手机端网页并审查元素
    4
    项目结构
    《vue开发移动端app-学习记录》

Vuex学习
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
https://vuex.vuejs.org/zh/guide/

npm install vuex –save

项目的适配
因为移动端设备屏幕大小，屏幕比例什么的差别比较大，所以移动端项目的适配问题就显得尤为重要，这里我们主要使用flexible.js进行适配，
引入flexible.js，在main.js里引入flexible.js文件，可将flexible.js作为静态文件放在最外层static文件夹里引入，如下图《vue开发移动端app-学习记录》

页脚标签。 router-link 导航标签。进行跳转 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

1、window.location.href=URL ： 在本窗体打开一个新的页面，也是最常用的一种方法；

2、window.open(URL) ： 在一个新的窗口打开一个新的页面；

3、location.replace(URL) ：本窗口的页面被替换为一个新的页面URL，替换后不可以回退到上个页面；

4、localtion.assign(URL) ：本窗口的页面转为为一个新的页面URL，与上一方法类似，但此方法可回退至上一页面。
《vue开发移动端app-学习记录》

执行过程：当用户点击 router-link 标签时，会去寻找它的 to 属性， 它的 to 属性和 js
中配置的路径{ path: ‘/home’, component: Home} path 一一对应，从而找到了匹配的组件， 最后把组件渲染到
标签所在的地方。

vue.config.js配置文件
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

H5与app的区别：
H5就是移动端的web，手机的浏览器，所以vue开发的app是基于h5的基于手机浏览器的，虽然后面打包成app，但实际是运行在手机提供的浏览器上的。

原生app是用java写的，android studio写的。

vue编译成h5 ，h5打包成app，app运行在手机浏览器上。

使用iconfont图标库

SVG
可缩放矢量图形（Scalable Vector Graphics）使你能够使用一组矢量与形状来描述图片，在显示时可提供无关大小的零失真的平滑缩放。

调用h5接口，使用手机功能。

https://blog.csdn.net/qianlixiaomage/article/details/104622151

1.安装库
cnpm i vue-awesome-mui -S
如果没有cnpm那就npm吧！

2、引入Mui

main.js中引入
import Mui from ‘vue-awesome-mui’;
Vue.config.productionTip = false
Vue.use(Mui);
在new Vue中添加上Mui，
《vue开发移动端app-学习记录》
3、完成1、2、就可以在后面的vue文件中直接引用plus了。
注意：
plus只能在手机上使用，所以浏览器run dev没有使用。连接手机调试才能看到效果

使用vant ui组件

mint ui 实在太难用，开发者文档也没有演示的结果。决定用vant ui。

npm install vant -S

import Vant from ‘vant’
import ‘vant/lib/index.css’
Vue.use(Vant)

记得导入css。

van滑动单元格踩坑
官方文档中，<template #right>,不行，要改成slot=“right”

 <van-swipe-cell right-width="65">
        <van-card
          num=""
          price="更新至xxx"
          desc="简介:七城战乱，邪神复苏的阴影笼罩在赤色大陆上空，家族争斗，对抗怪物，阶级跨越，人类一切的阴谋与仇恨，皆指向永夜传说，指向人与时间的诅咒。"
          title="小说名"
          class="goods-card"
          thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
          @click="reading"
        />
        <template slot="right">
          <van-button square text="删除" type="danger"  class="delete-button" />
          <!-- <van-button square type="primary" text="收藏" /> -->
        </template>
      </van-swipe-cell>

偷师学艺：浏览器访问手机端网页并审查元素

电脑浏览器怎么访问网页的手机端呢?
打开开发者工具，elements旁边有两个小手机框框，就可以切换成H5端.

Hbuilderx创建5+app项目
指向编译出来的dist

连接真机调试
打包，直接把dist下面的所有文件，复制到5+app项目下，运行/打包即可。
真机调试：菜单-运行-运行到手机/模拟器-xxx手机

打包apk发布
选择发行=》原生App云打包=>然后选择打android的包，有ios的证书也可以打包为ios，android可以用免费的公用证书，开发者直接使用即可，具体选择如下，然后接下来等待即可。稍微等待之后，打包成功之后，会返回apk下载文件的下载链接，点击链接，把apk文件下载下来，然后发送到自己的android手机，安装在自己的手机上即可。

    原文作者：gellenliu
    原文地址: https://blog.csdn.net/weixin_44736005/article/details/113406120
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞