• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

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

互联网 diligentman 1个月前 (01-31) 7次浏览

目录

  1. 项目结构
  2. 项目框架搭建
  3. 连接真机调试
  4. 打包apk发布
    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 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们

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接口,使用手机功能。

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

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

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

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


程序员灯塔
转载请注明原文链接:vue开发移动端app-学习记录
喜欢 (0)