Vue--网易云音乐移动端项目复盘

项目接口

本项目采用的后端接口：网易云音乐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，在导入模块时候，变量名前后不一致，主要是里面有些大小写不一致，导致定义的函数执行错误。