ElementUI
一款基于 Vue 的桌面端 UI 框架,和bootstrap
一样对原生 html 标签进行了封装,便于美化
Let’s start!
在编译器中–安装该框架
1 | npm i element-ui -S |
在需要使用的 js 文件中
1 | import ElementUI from "element-ui"; //导入框架 |
然后将样式代码 copy 到组件或实例中即可
按需导入
默认饿了么 UI 会导入整个库(所有封装的组件)到项目中,这样会导致项目体积大,用户访问慢
我们可以–借助 babel 插件,只会将我们用到的组件打包
修改配置
找到项目中的babel.config.js
,修改为
1 | { |
导入用到的样式
1 | import {button ,switch} from "element-ui"; |
MintUI
另一个基于 Vue 的样式框架,也是出自饿了么
详见:MintUI 文档
同样,它也支持按需引入
与饿了么 UI 的两点区别
但与ElementUI
步骤不同的是–
最后不使用Vue.use
,作为替代–
1 | Vue.compoment(Button.name, Button); |
第二个区别:
它还需要按需导入 css 文件,而饿了么 UI 按需导入时不用,直接导入样式组件即可
不推荐在移动端开发中使用该框架,因为坑很多
评论