音乐App开发流程I（初始化、路由配置）

图像.png

1.需求分析

推荐页面->列表详细信息页面

歌手页面->歌手详细信息页面

排名页面->列表详细信息页面

搜索页面->搜索详细信息页面

播放器核心->播放列表

2.Vue cli脚手架初始化项目

npm安装-g vue cli

vue init网络包vue音乐

npm安装

npm运行开发

3.项目目录

插件分析

Babel运行时：只有es6的语法会被转换，而不是新的api。

babel polyfill：要转换新的api，您需要引入babel聚填充

Fastclick--解决移动点击事件的300毫秒延迟问题

4.收割台组件开发

引用组件时，如果您想从文件夹开始而不是使用相对路径，则需要在build/webpack.base.config.js中设置别名

App.vue公司

=》

构建/webpack.base.config.js

5.路线配置和顶部导航栏组件开发

路由配置：router/index.js

从“Vue”导入Vue

从“vue路由器”导入路由器-----引入vue路由器

从“组件/等级/等级”导入等级

从“组件/推荐/推荐”导入推荐

从“组件/搜索/搜索”导入搜索

从“组件/歌手/歌手”导入歌手

从“组件/歌手细节/歌手细节”导入歌手细节

Vue。use（路由器）//一定要使用！！！

导出默认新路由器({

路线：[

{

路径：“/”，

重定向：“/推荐”//重定向

},

{

路径：“/推荐”，

组件：推荐

},

{

路径：“/rank”，

组件：等级

},

{

路径：“/singer”，

组件：Singer，

儿童：[

{

路径：“：id”，

组件：SingerDetail，

}

]

},

{

路径：“/search”，

组件：搜索

},

]

})

在条目文件main中使用<。js；路由器视图><；/路由器视图>

主.js

在App中使用<。vue；路由器视图>

App.vue公司

在导航栏组件tab.vue中使用<；路由器链接=“/推荐”><；/路由器链接>

tab.vue标签