音乐app开发流程一（初始化，路由配置）

image.png

1、 需求分析

• 推荐页 -> 歌单详情页
• 歌手页 -> 歌手详情页
• 排行页 -> 榜单详情页
• 搜索页 -> 搜索详情页
• 播放器内核 -> 播放列表

2、 vue-cli脚手架初始化项目

npm install -g vue-cli
vue init webpack vue-music
npm install
npm run dev

3、 项目目录

插件分析

babel-runtime ： 只会对es6的语法进行转换，而不会对新api进行转换。
babel-polyfill ： 转换新api，就要引入babel-polyfill
fastclick -- 解决移动端点击事件300ms延迟问题 https://www.jianshu.com/p/6f85e957a725

4、 header组件开发

• 引用组件时，想不使用相对路径，而是直接以文件夹开头，需要在build/webpack.base.config.js里设置别名

  
  
  

  App.vue

  =》

  
  
  

  build/webpack.base.config.js

5. 路由配置与顶部导航栏组件开发

路由配置：router/index.js

import Vue from 'vue'
import Router from 'vue-router'         -----引入vue-router
import Rank from 'components/rank/rank' 
import Recommend from 'components/recommend/recommend'
import Search from 'components/search/search'
import Singer from 'components/singer/singer'
import SingerDetail from 'components/singer-detail/singer-detail'
Vue.use(Router)          //一定要use!!!
export default new Router({
  routes: [
    {
        path:'/',
        redirect: '/recommend'    //重定向
    },
    {
      path: '/recommend',
      component: Recommend
    },
    {
        path: '/rank',
        component: Rank
    },
    {
        path: '/singer',
        component: Singer,
        children: [
            {
                path: ':id',
                component: SingerDetail,
            }
        ]
    },
    {
        path: '/search',
        component: Search
    },
  ]
})

在入口文件main.js使用

main.js

在App.vue中使用

App.vue

在导航栏组件tab.vue中使用

tab.vue