前端大屏页面布局经验(1)

布局

---

第三一个，布局。这个是大屏开发中最烦的事情，尽管是根据固定的分辨率开发调试，但是毕竟实际情况可能根据电脑不同需要稍微的适配，保证在近似的分辨率下展示效果是正常的，不至于很错版。

在开发的时候建议哈，仅仅是建议，建议使用弹性布局、使用百分比设置宽高之类的属性值，尽可能的减少px的使用，因为像素不一样，px的大小也不一样，极容易出现错版的问题，但是可以使用rem、em之类的，推荐rem。

还有一点，我们在开发大屏的时候如果用到echarts，它里面的一些东西比如说字体大小设置的数值就是px，默认就是px，这个就不太好搞，我们需要定义一个方法，然后把px转成rem对应的值，效果会好一些，这些代码不需要自己写，网上百度就可以，案例有很多，只要看得懂，会用就行，当然用了之后研究一下更好，不过话又说回来，能用起来其实已经会了。

模块化

---

因为我是用vue开发的大屏，模块化是必不可少的，不要在一个文件里面填充太多的东西，我们可以把每一小部分单独拆出来，封装好，然后引用到对应的位置，不要把一个页面填充到上千行，不方便阅读，也不容易维护，那句话怎么说的来着，“我写的代码，只有我和浏览器能看懂，但是一星期以后，只有浏览器能看懂。” 不要出现这么尴尬的局面，该加注释的地方加注释，文件命名易懂又好区分。模块化之后第一个原因是方便维护，第二一个原因是可以组件复用，比如说echarts，页面上有好多相同的柱形图，一摸一样，只是渲染的数据不一样，那就可以封装一个柱形图组件，组件复用就可以，就是类似的道理。

样式

---

样式的话很简单，尽可能的减少内联样式，不要直接写在标签里面，那样多了的话，会疯！可以抽成一个文件，如果页面多了，样式有近乎相同，那就可以样式复用。样式不要乱，管理好，具体使用什么样的写法，根据自己的兴趣来，自己觉得好就可以，但是不要因为省事就不管后期维护和修改了。

插件和文档分项

---

在这里总结一下做大屏可能会用到的一些资料吧，不知道会不会用到，也不确定是不是就是最好的，记录一下，希望有用。

Echart官网

Echart配置项地址

Echarts示例地址

个性化图表

Element组件库

Ant-d 组件库

Vue 大屏数据展示组件库 Data-V

Flex 布局

阿里巴巴矢量图

基于vue.js的无缝滚动插件

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…

算法

1. 冒泡排序
2. 选择排序
3. 快速排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
    …
    

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

…(img-7JdTlr4I-1718856808729)]

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666