miumiu音乐app总结

---

经过了一个月的时间，终于将miumiu音乐app跟着敲完了。

这是我的miumiu音乐app地址 http://101.37.65.185:9000/#/recommend。
gitee地址： https://gitee.com/fenglifengli/miumiu

miumiu 来听歌吧 ！ 😄

一、项目结构

结构图

项目组织

二、学习到的知识

2.1 业务组件与基础组件

业务组件就是与业务密切相关的组件。基础组件，是我们再业务组件种用到的可复用的组件。

比如，我们项目种components目录下的组件都是业务组件，而base目录下的都是基础组件。

2.2 stylus

项目中用到了stylus这个css预处理语言（还有less,sass）。它可以让写css更简单。它有以下特点:

• 冒号可有可无
• 分号可有可无
• 逗号可有可无
• 括号可有可无
• 变量
  …

2.3 vue mixin

用来封装各组件种可复用的功能。官方文档

混入规则：

• 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
• 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

例子:

export const playlistMixin = {
  computed: {
    ...mapGetters([
      'playlist'
    ])
  },
  mounted () {
    this.handlePlaylist(this.playlist)
  },
  activated () {
    this.handlePlaylist(this.playlist)
  },
  watch: {
    playlist (newVal) {
      this.handlePlaylist(newVal)
    }
  },
  methods: {
    handlePlaylist () {
      throw new Error('component must implement handlePlaylist method')
    }
  }
}

2.4 vuex

vuex是一个状态管理模式，官网文档

• state存储状态
• getter获取状态
• mutation相当于setter，用来修改状态
• actions提交的是 mutation(提交多个mutation)，而不是直接变更状态。action 可以包含任意异步操作。
• index将getter,mutation,state,actions暴露出去

例子。

在业务组件种，使用getters,mutations,actions的例子。

export default {
  data () {
    return {
      ...
    }
  },
  computed: {
    ...mapGetters([
      'fullScreen',
      'playing',
      'currentIndex'
    ])
  },
  methods: {
    ...mapMutations({
      setFullScreen: 'SET_FULL_SCREEN'
    }),
    ...mapActions([
      'savePlayHistory'
    ])
}

2.5 node服务器端反向代理解决跨越问题

在webpack.dev.conf.js

/********后端api接口代理*********/
var app = express()
var apiRoutes = express.Router()
app.use('/api', apiRoutes)


const devWebpackConfig = merge(baseWebpackConfig, {
  ...
  // these devServer options should be customized in /config/index.js
  devServer: {
    ...,
    before(app){
      app.get('/api/getDiscList', function (req, res) {
        var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
        axios.get(url, {
          headers: {
            referer: 'https://c.y.qq.com/',
            host: 'c.y.qq.com'
          },
          params: req.query
        }).then((response) => {
          res.json(response.data)
        }).catch((e) => {
          console.log(e)
        })
      })
    }
})

参考文献

三、总结

通过miumiu音乐，通过这个完整的开发部署流程，加强了自己对vue的运用能力。学习到了使用vue router进行路由跳转，学习到了路由懒加载；学习到了vuex进行状态管理。