Vue3——阶段练习（composition api的综合实战）

求一键三连

希望大家看完觉得有用的话点赞、关注和收藏，感谢！！！

这里面最重要的就是组件化抽取思想

前言

真实的开发中，用到的的细节的知识很少，因为实际应用场景用到的就只有那些东西。

出错首先看有没有拼错，再去检查你的逻辑

前期配置

assets（素材）
assets 代表 js、css、模板、图片、flash 等等资源文件，就是资源的意思，一般存放开发过程中自己写的静态资源

reset.css 是重置的css（写好之后要在main.js导入）

抽取组件

1.先完成页面

一开始没有抽取的思想，所以我们就按照一个vue文件的写法，先把这个页面给实现了，之后再进行抽取

先搭HTML框架，分为header，list，list采用v-for循环来实现，先大致的把整个页面实现出来，样式不用调试，最后再调

遍历和v-if判断都用template ，循环绑定key ，绑定一般都是id，因为是唯一的

一下子写不下列表，就是先写一个小的，然后看看能不能看到列表和数据，再去写里面的东西

最主要的时候先把框架全部写好，然后逻辑结构没有问题，最后再慢慢去搞里面的东西

2.开始抽取

抽取思路：整个组件可以抽成一个模块，因为这个组件也就是网页一个部分而已
RoomArea：AreaHeader+AreaItem
在RoomArea实现v-for循环，item就是一个小的模块
组件树

3.细节调整

同样的返回逻辑可以放在一起，返回一个对象，这样操作起来更方便，查看代码也更方便
所以这些比较多的，统一采用computed函数来写，记住语法


这样就可以根据服务器里面的数据来设置样式

开发最多的事情就是抽取组件，然后封装使用

模拟网络请求

样式css调整

样式对齐：

margin：0px -8px 如果没有对齐，加个-就OK了
宽度很有意思，都是33.333%，这样三个就刚好一样了，对齐了
在item里面还嵌套了一个inner-item，再加一个margin，这样最后内容之间就是有间距的（负值是拉长宽度的）

less（CSS预处理语言）

之前自己没有学这一块，在掘金上看了一篇文章
学习Less-看这篇就够了

在vue CLI项目里面使用less 要在里面npm install less-loader -D
还要花时间学习一下less。
真正的花时间的可能还是在css调试上，css还要花时间学一学，自己掌握的并不够好，复习！