vue实现spa实例讲解:前沿及展示

5月12号,我发布了我的新项目的想法,一个大三下学期学期总结的项目,但是却身不由己,拖了很久才正式开始做这个项目,主要是因为学校有了个ssh的学期性项目要做,烦死。于是我就做了一个纯文字的游戏网站。我把它比喻成q宠大乐斗的翻版。就是没有画面而已。
1.这个项目的刚开始是准备做一个音乐翻唱软件的,但是越到后面总会有一些意想不到的新的有趣的想法涌上来。现在我把它作成了一个录音日志的分享网站。截止至7月20号。我终于完成了我的新项目,我给它取名《谬沐》

2.解释一下具体的功能。

  • 录音,可以微信录音和pc端录音和上传已经录好的音频文件。微信录音有微信的语音识别功能。
  • 转发,可以在具体的音乐详情页面选择转发分享吧音乐分享给好友。
  • 评论,模仿网易云音乐的评论设计
  • 个人统计,个人录音信息的统计

2.这里我讲解一下这个项目我最自豪的东西。其实从上面也都知道,其实这个项目没什么有趣好玩的地方,至少比我的上一个个人项目来说,这个不是特别有趣,但是它对于我来说意义重大。

  • 设计,我的上一个项目很多人都说不好看,俗话说的好,不想做设计师的前端不是好程序员。我想要做一个让身边所有人惊叹的设计,于是我选择了vue,于是我开始了我的设计师之旅,我花尽了我大量的心思去完美整个页面的设计,使得他让人有第一眼的好印象。
  • spa,单页面应用,整个webapp只需要一次加载即可,不需要再刷新。在使用vue来实现spa的过程中我学到了很多东西。这样可以更好的熟练和发挥我新学的知识。

3.最后讲一下这个项目中我个人觉得的缺点。

  • 首次加载页面过大,差不多2m。
  • 设计和体验还有些不够好的地方。

话不多说上图最重要

vue实现spa实例讲解:前沿及展示_第1张图片
用户详情页面
vue实现spa实例讲解:前沿及展示_第2张图片
录音详情页面
vue实现spa实例讲解:前沿及展示_第3张图片
主页效果图
vue实现spa实例讲解:前沿及展示_第4张图片
登陆
vue实现spa实例讲解:前沿及展示_第5张图片
主页
vue实现spa实例讲解:前沿及展示_第6张图片
评论效果图
vue实现spa实例讲解:前沿及展示_第7张图片
录音页面
vue实现spa实例讲解:前沿及展示_第8张图片
微信录音页面
vue实现spa实例讲解:前沿及展示_第9张图片
个人喜欢的录音集
vue实现spa实例讲解:前沿及展示_第10张图片
录音分享页面

这些就是我设计的网站的web端效果,还有一些pc的页面就不上传了。
下面几篇内容我会讲解一下这个项目的设计和实现。

你可能感兴趣的:(vue实现spa实例讲解:前沿及展示)