vue实现spa实例讲解：总体设计

前端项目目录结构

写这个文章隔上一篇的日志有点久，因为有某些方面我又进行了改版，可能会有点不同。而且还实现了真正意义上的前后分离。

屏幕快照 2016-08-15 下午3.16.40.png

使用vue-cli创建的项目miu_vue，src是我的主要组件，先介绍components里面的控件。

• 第一个alert是自己写的弹出框控件，下面是效果图。

屏幕快照 2016-08-15 下午3.26.59.png

• loading，一个简单的加载中效果，里面只有一个小小的gif图片。
• login，使用alert写的一个登录和注册的弹出框。
• musicItem，这是最重的一个组件，这个项目很多地方都会用到这个组件，主要是把录音的数据用列表的形势显示出来。还可以跳到录音详情页面和有一些播放和点击喜欢的效果。

屏幕快照 2016-08-15 下午3.32.24.png

• vueHeader，一个头部组件，放在主页的头部组件

Paste_Image.png

• vueSwiperSlide, 这个组件是第二重的，它的主要业务是进行日期的选择。

Paste_Image.png

下面介绍的是view上面的组件，这里的组件大多会套用上面的组件进行构建，每一个组件相当于一个页面。页面显示效果我就不截图了，之前的文章有截图展示。

• help，这个页面没什么说的，静态页面，主要进行一些文字描述，帮助用户了解这个项目是做什么的。
• main，这个是主页页面。
• music_detail，录音详情页面，里面还有评论功能，在个这个页面做微信的专门分享接口，可以把录音分享出去。
• music_record，录音页面，可以选择手机微信录音和电脑浏览器录音。
• recomment，新写的页面，还没完成，主要是录音的排行和主题录音或者比赛。

Paste_Image.png

• user_comment，这个本来是准备个人评论信息的提示页面，但是我还没做。
• user_detail，这个是用户的个人信息和录音展示和修改页面。
• user_like，这个页面会把用户点赞过的录音都列出来。

开发总结

1. 使用vuex来进行总体数据的保存，比如录音数据和用户数据。我还见过有人用vuex把所有的后台访问ajax操作都总结起来。我不知道这样做好不好，反正我不太喜欢。
2. 然后就是组件之间的通讯问题，虽然有vuex，但是我更推荐吧vuex想象成一个全局变量，我简单解释一下vue的通讯机制。
   爸爸通知儿子用this.$broadcast('fn', date)
   儿子通知爸爸用this.$dispatch('fn',date)
   响应的时候要用

events: { 'fn': function(date){} }

3. 使用vue-resource来进行ajax访问。
4. 开发的使用可以试过配置config.js里面的dev来进行反向代理。
5. 全局的播放器，我是直接在index.html进行全局设置。无论到哪里都不影响播放器的正常使用。但是有一些小bug，就是ios上面对于录音的时间长度获取不准确，还没想到解决办法。

后台总结

1. 用thinkjs写的后台，使用了里面的restful和orm，基本上后台代码很少。
2. 同时我在后台还加了两个页面，pc端录音页面和展示分享录音页面。
3. 资源基本上都是放在七牛上面的。