ElementUI & MintUI

3月 23 2021 Code 3 分钟读完 (约 407 字)

ElementUI

一款基于 Vue 的桌面端 UI 框架，和bootstrap一样对原生 html 标签进行了封装，便于美化

Let’s start！

在编译器中–安装该框架

1	npm i element-ui -S

在需要使用的 js 文件中

1
2
3

import ElementUI from "element-ui"; //导入框架
import "element-ui/lib/theme-chalk/index.css"; //导入样式文件
Vue.use(ElementUI); //告诉Vue，我们要使用该插件

然后将样式代码 copy 到组件或实例中即可

按需导入

默认饿了么 UI 会导入整个库(所有封装的组件)到项目中，这样会导致项目体积大，用户访问慢

我们可以–借助 babel 插件，只会将我们用到的组件打包

修改配置

找到项目中的babel.config.js，修改为

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      [
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
  ]
}

导入用到的样式

1
2
3

import {button ,switch} from "element-ui";
Vue.use(button)  // 分别Use
Vue.use(switch)

MintUI

另一个基于 Vue 的样式框架，也是出自饿了么

详见：MintUI 文档

同样，它也支持按需引入

与饿了么 UI 的两点区别

但与ElementUI步骤不同的是–

最后不使用Vue.use，作为替代–

1 2	Vue.compoment(Button.name, Button); Vue.compoment(Button.name, Switch);

第二个区别：
它还需要按需导入 css 文件，而饿了么 UI 按需导入时不用，直接导入样式组件即可

不推荐在移动端开发中使用该框架，因为坑很多

#ElementUI