音乐App开发流程I（初始化、路由配置）
APP开发
浏览：637 次
图像.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标签
