项目接口
本项目采用的后端接口:网易云音乐API
项目初始化
第一步:初始化工程(vue create 项目名称)
第二步:下载依赖(axios vant vue-router)
第三步:下载vant自动按需引入插件(babel-plugin-import)并配置babel.config.js文件,查看vant文档
第四步:引入初始化reset.css,flexible.js到main.js中使用
项目需求分析
项目所涉及技术栈
跳转路由向下一页传递参数:
name+params或者path+query方式
下一页接受上一页面传递参数:
$route.params.变量名
$route.query.变量名
切换设备vant组件库适配
vant组件采用px单位,本项目采用rem单位,vant组件库无法很好的适配。
引入postcss技术-----配合webpack翻译css代码,
以及引入postcss-pxtorem插件-----配合webpack,自动把px转成rem
第一步:下载postcss postcss-pxtorem这两个包
第二步:新建postcss.config.js文件,配置相关参数
第三步:修改配置文件后,一定要重启服务器才能观察到效果改变
module.exports = {
plugins: {
"postcss-pxtorem": {
rootValue: 37.5, //转换px的准值,就是本项目rem的html-fontsize
propList: ["*"], //指定那些属性进行转换,*表示所有。
},
},
};
这里容易出现postcss-pxtorem 与脚手架版本不匹配问题。postcss-pxtorem@5.1.1;Vue脚手架@4.5.0
项目中踩过的坑
Bug01:
路由配置错误,导致路由视图不显示。routes为定义路由传递对象时的默认参数。所以通常定义路由组,用roures来作为变量名保存路由组,这样在传递路由对象时可以简写。
Bug02:
报错:Object(…) is not a function,在导入模块时候,变量名前后不一致,主要是里面有些大小写不一致,导致定义的函数执行错误。