element-ui需要打开服务器

Posted 2023-04-09

是的，Element-UI是一个基于Vue.js开发的UI组件库，需要在服务器上运行。如果您想在本地开发调试，可以通过搭建本地服务器进行访问。另外，Element-UI也可以通过CDN引入，但使用CDN会有一定的限制，如无法本地开发调试等。因此，在实际项目中，建议使用服务器部署Element-UI。 参考技术A 使用element-ui需要使用服务端来实现，特别是在使用数据交互时。服务端的访问资源可以有效的保证前端的数据安全性，同时也可以让element-ui后台数据动态更新。另外，从用户体验的角度考虑，由于element-ui需要从服务端取数据，所以需要打开服务端与前端进行连接，以便前端以正常的速度访问后端资源，从而让用户体验更好。

Element-UI库使用

　　UI库的良好使用可以大大提高开发的效率，这里记录一下对Element-UI的学习过程

 

开发前准备

　　Element-UI的官网打开（地址），之后可以用npm在开发的文件根目录下安装（npm i element-ui -S）

　　安装好就可以引入组件使用，官方文档中提及了完整引入、按需引入（需要哪个组件引入哪个组件）两种方法，都是在main.js中按说明配置即可

　　另外还有一个全局配置（设置组件尺寸和弹框的初始z-index），配置在main.js中Vue.use(ElementUI)里即可

 

下面就是对各个组件的一个学习和个人小结，实时更新

 

Layout布局

　　这里是单行的布局方式，可以理解成一行中的多个小单元格的布局

基础布局

　　el-row配置行，el-col配置列，像是一个个单行的表格

　　其中el-col上绑定的span属性控制每一个小单元格大小，默认值和最大值都是24

　　一行总数超出24时，会把原本该在一行的显示在多行

分栏间隔

　　el-row上的属性gutter，默认值为0，可以设置大于0的任意数字

　　在PC端，设置的这个gutter值为该单元格左右的padding之和

　　例如下图，gutter为40，则左右padding都是20px

　　

　　

混合布局

　　其实就是自己设置el-col的span以及el-row的gutter，没太多好说的

分栏偏移

　　el-col的offset属性，设置某个el-col元素左侧空多少份的位置，默认为0

　　如果其offset和span之和大于24，则该行剩余元素移到下一行，同时这个元素只显示一部分

　　例如下面第一个hello，offset和span之和为25，该元素只显示7份的量

　　

　　

对齐方式（响应式布局）

　　el-row里的type属性设置为flex即可，其中子元素（el-col）就变成flex布局

　　这时候左侧的offset是根据行整体来计算的，而剩余部分则不再是24份，按照span值来进行比例划分

　　例如下图，第一个元素offset是4，即左侧空出一行的4份的量（也就是一行的1/6），然后剩下的分隔，总份数为8+8+8+16=40份，则其中前三个都是剩余40份中的8，最后一个为40份里的16

　　

　　

 

 　　当el-col不设置offset，且一行的span不满24时，可以设置不同的justify属性值