Home 组件1. 创建新 Home2. 创建 Home 相关组件3. 编写组件代码
Home 组件
1. 创建新 Home
在 views 文件夹中新建 Home 文件夹用来存放主页的视图，将原本的 Home.vue 文件改名为 index.vue，并放入新建的 Home 文件夹中
注意两点
修改完 views 中的文件路径或者进行重新分类后，记得在 router 文件夹的 index.js 文件中修改文件对应的路由Home 组件的路径变为“../views/Home”，而 Home 文件夹中的文件不能大写，大写就报错，而且好像文件名不能改，改了也错
2. 创建 Home 相关组件
组件可以分为两种：
智能组件用于获取和存放数据木偶组件用于渲染视图
因此 Home 文件夹中新建两个文件：MusicList.vue 和 MusicListView.vue
3. 编写组件代码
几点细节：
CSS 中!important可以增加样式的权重，避免其被覆盖style 标签后要加scoped，目的是让当前 style 模块只作用于当前组件，也就是 DOM 树中 style 节点的父节点和子节点，与兄弟子侄节点无关，不污染全局写完 MusicListView 后要在 index.vue 中引用这个组件，components 对象中也要加上 MusicListView ，最后在 template 中使用这个组件
<!-- --><template><div class="home"><MusicListView /></div></template><script>import MusicListView from "./MusicListView";export default {name: "Index",components: {MusicListView,},};</script>
VScode 中 按Ctrl + F可以在当前文档内搜索，按Ctrl + Shift + F可以全局搜索
如果觉得《Vue项目 音乐播放器 学习笔记 列表数据 Ⅱ》对你有帮助，请点赞、收藏，并留下你的观点哦！
