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

目录

持续更新中,学到一点写一点😔

  1. 项目结构
  2. H5与app的区别
  3. 项目框架搭建
  4. 使用iconfont图标库
  5. 连接真机调试
  6. 打包apk发布
  7. 使用mint ui 组件
  8. 使用vant ui 组件
  9. 调用h5 + api
  10. Axios请求封装
  11. 偷师学艺:浏览器访问手机端网页并审查元素
    4
    项目结构
    在这里插入图片描述

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文件夹里引入,如下图在这里插入图片描述

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

1、window.location.href=URL : 在本窗体打开一个新的页面&

  • 6
    点赞
  • 85
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue开发移动App时,可以使用一些工具和组件来进行适配和开发。首先,在main.js中引入`vue-awesome-mui`并使用`Vue.use(Mui)`来引入MUI组件库。注意,MUI只能在手机上使用,所以在浏览器运行时可能无法看到效果。\[1\] 为了适配移动设备的屏幕大小和比例差异,可以使用`flexible.js`进行适配。在main.js中引入`flexible.js`文件,并将其作为静态文件放在最外层的static文件夹中引入。这样可以实现移动项目的适配。\[2\] 在开发移动App时,可以使用一些常见的组件和标签,如`router-link`用于导航跳转,`keep-alive`用于缓存不活动的组件实例,以提高性能。此外,还可以使用一些UI组件库,如`mint-ui`和`vant-ui`来快速构建界面。\[2\] 除此之外,还可以使用Axios进行网络请求的封装,使用iconfont图标库,连接真机进行调试,打包APK并发布应用。在开发过程中,可以不断学习并更新项目,逐步完善项目结构和功能。\[3\] 总结来说,开发Vue移动App需要引入相应的组件库和工具,进行适配和开发,并不断学习和更新项目。 #### 引用[.reference_title] - *1* *2* *3* [vue开发移动app-学习记录](https://blog.csdn.net/weixin_44736005/article/details/113406120)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值