本公众号日更该测开中台图文教程，文末扫码进群群公告有源码资源包哦~ 视频课(一句一句讲)在知识星球，培训大课程需要私聊v:qingwanjianhua咨询哦~
上节课我们对前端的主要区域进行了设计，最终选定了做成三位一体搜索框。
本节课，我们就来进行前端的开发吧。
首先，设计上呢，我们先做一个搜索框放在那，下面呢可以有三块结果的展示说明文案。等真的搜索出结果后，我们再用实际的结果列表去覆盖这个说明文案即可。
废话不多说，开始开发：
打开HomeMenu.vue
在这个小小的Main文案的位置，我们要写完这个搜索功能代码。我一点点写，一点点给大家截图。
先搞个搜索框：建议大家照着手敲，实在想省事就直接进群下载源码项目，需要用哪就复制哪即可。
上图中我大概说一下，设置了一个el-input输入框和el-button搜索按钮，但是具体关联的事件还没有做。下面的是三大结果展示区，这里之后的样式大概会继续优化。图文教程我没法说的太过详细，视频课程我是边敲边讲，所以敲到哪句讲哪句，基本就是一句一讲。很多我觉得很正常的常识也会顺口说一遍，没准就能解决你的疑惑。就比如这里的el-col组件的span值，为什么设置成8？因为这其实是网格布局，满的就是24，要做三块区域平分，那就是一块8。如果不是看视频课，无数个这种简单的常识知识点，就可能被你一眼带过，比如以后开发的时候自己尝试6和7不行，再试试8？这样，永远都不知道其实这个满的24这个知识点。所以在测试开发的面试中，如果你段位很高，这种基础问题确实不会被问到，面试官问的更多是你怎么设计，解决思路，交互和推广这种泛泛的概念，所以段位高的同学可以花点小钱来购买我的网课。但如果你是新手面低P测开，那么就很可能被问到这种小知识点，人家面试官几个小问题，就能知道你学的到底扎不扎实。这也是为啥视频课学员的实力要高于之前只看图文时候的自己的原因。
好，回归正文。
这里面设置了4个变量，所以要在下面声明好初始值。
然后就是具体的样式，我做了一个自定义样式：wqrf_box
下面在style中写好：注意前面加点.
看看效果吧？
嗯，这个样子还凑合，后面等做好了这个搜索功能，出现大批结果的时候，我们再调整样式即可。
这节课到此结束，下节课继续实现吧~
进粉丝群哦！速度，还有十几个空位这个火爆的技术讨论群就满200，就扫码进不去了哦~
知识星球：目前加入人数99+
