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使用<router-view></router-view>
main.js
在App.vue中使用<router-view>
App.vue
在导航栏组件tab.vue中使用
<router-link to="/recommend"></router-link>
tab.vue
