UI框架

UI框架

1、什么是UI框架

页面中其实有很多用到很多次的组件，这时候我们会想到把这些具有共性的东西抽离出来，变成通用的组件。这样再写页面的时候，只要引入这些通用的组件，就不用在页面里重复写这些内容了。经过不断的提炼，就形成了UI库或UI框架。

2、使用UI框架的好处

（1）标准化。UI 设计师应该有统一的设计标准的，当我们制作出一套前端框架的时候，就可以把设计标准转化成开发标准。如果设计师那边出的设计图并没有什么标准，比如同样功能同样位置的按钮，有的用50px高度，有的用55px高度，这时候前端同学就有义务去和UI设计师沟通下，把设计标准确定下来，保证同类组件有统一的尺寸和样式。

（2）提高开发效率。使用了UI框架以后，所有通用的组件的开发量就省下来了，开发人员只需要做每个页面里那些没有共性部分的开发。

（3）方便扩展。在使用了通用的框架后，我们具有共性的内容都集中在了一起。所以当我们要对产品做样式改造或扩展的时候，只需要对框架进行升级就可以了。不会像原始的那种开发方式中，哪怕改个按钮颜色，也要去每个页面里都改一遍。

（4）提高页面加载速度。这个优点其实是被动的，当抽离出 UI 组件后，就会少了很多冗余代码，这样总体文件体积会变小。同时抽离出来的通用组件通过做缓存，加载速度还会进一步提高。但说这个优点是被动的，是因为这并不是我们做 UI 框架的初衷，通常不会为了提高加载速度而做一个 UI框架。

3、 Element-Ul

是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 。一经面世，就收获大量程序员的芳心。在 github 上更是高达48.1k的star早已说明一切。用于开发PC端的页面还是绰绰有余的。

4、安装Element Plus 框架

（1）首先打开Webstorm，点击“文件”，点击“新建项目”，选择vue.js框架，由此创建出新的项目，之后等待安装成功。

（2）安装完成之后，点击“src”，寻找main.js进行修改，所需修改代码如下：

// main.js文件
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

（3）修改完成之后，将鼠标悬停到'element-plus'会出现安装字样，点击进行安装，Element Plus框架就安装成功了。

（4）Element Plus框架就安装成功之后 就可以进行表单、表格项目的实现。