用vue做一个app

1 篇文章 0 订阅

做一个专属自己的app

首先是如何打包:

​ 下载HBuilderx,下载好后创建5+app项目,然后npm run build 打包vue项目,生成dist文件,把dist文件的内容整个复制粘贴到新创的5+app项目中,有重复直接替换。

​ 替换完后安装安卓模拟器,我用的是 逍遥安卓模拟器 ,安装完后运行,HBuilderx应该可以自己识别到,点击运行

在这里插入图片描述

运行到模拟器中,如果没有检测到,重新打开HBuilderx,和安卓模拟器,如果还是不行就百度找找问题。

运行到模拟中后,你安装的模拟器就会自己下载一个app,就是你这个项目的app了。

这里我遇到一个问题,就是项目打包后项目显示空白问题:

在你之前的vue项目中创建vue.config.js文件,里面加入:

module.exports = {
  baseUrl:'./',//如果出错的话换成  publicPath:'./',(这个是因为vue版本问题)
  outputDir:'dist'
}

还是不行的话,更改一下router的路由模式,改为hash模式

最后重新npm run build 打包,生成dist文件,再重新进行上面的操作。

最后在真机上运行app:

​ 在HBuilderx中右键你的项目,点击发行原生app云打包,点击后会弹出打包选项框,起个android包名,使用公测证书,选择安心打包,其他默认就可以,之后会让你配置manifest.json,配置一下就行(百度),配置完后重新发行原生app云打包,会生成一个apk,把这个apk发到你手机上安装就可以了。(这里还有一个要注意的微信发送apk后会自动加一个xxx.apk.1的后缀,会不能安装,qq发apk就可以 。)

在这里插入图片描述

2021.10.30

  • 5
    点赞
  • 40
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
实现一个音乐App需要考虑到很多因素,例如音乐的播放、列表的展示、搜索功能、歌词显示等等。下面我将简单介绍如何使用Vue实现一个基础版的音乐App。 1. 准备工作 首先,我们需要准备好一些必要的资源,例如音乐文件、歌词文件、图片等等。这些资源可以放在静态资源目录中,例如public目录。 2. 创建Vue项目 使用Vue CLI创建一个新的项目: ``` vue create music-app ``` 创建完成后,进入项目目录并启动开发服务器: ``` cd music-app npm run serve ``` 3. 编写页面结构 创建一个音乐列表页面和一个歌曲详情页面,可以使用Vue Router进行路由管理。页面中需要展示音乐列表、歌曲封面、歌曲名称、歌手、歌词等信息。 4. 实现音乐播放 使用HTML5的audio标签进行音乐播放,同时使用Vue的生命周期钩子函数和watch监听音乐播放状态,实现播放、暂停、上一首、下一首等功能。 5. 实现搜索功能 使用Vue的computed属性和watch监听搜索关键词的变化,实现搜索功能。同时可以使用第三方API获取搜索结果。 6. 实现歌词显示 使用第三方库实现歌词解析和显示,例如lyric-parser和lyric-scroll。 7. 发布项目 完成开发后,使用npm run build命令进行打包,然后将打包后的文件部署到服务器上即可。 以上是实现一个音乐App的基本步骤,具体实现过程中还需要考虑到很多细节问题。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值