Mint-UI中按需导入配置方式-MUI

版权声明:未经同意,不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/83443590

注意:MUI 中的一些 class 可能会有和 Mint-UI 相冲突,只能把相冲的一些样式用新样式代替

使用 MUI 代码片段

注意:MUI 不同于 Mint-UI,MUI 只是开发出来的一套好用的代码片段,里面提供了配套的样式、配套的 HTML 代码片段,类似于 bootstrap;而 Mint-UI,是真正的组件库,是使用 Vue 技术封装出来的成套组件,可以无缝的和 VUE 项目进行集成开发;
因此,从体验上来说,Mint-UI 体验更好,因为这是别人帮我们开发好的现成的 Vue 组件;
从体验上来说,MUI 和 Bootstrap 类似;理论上,任何项目都可以使用 MUI 或 Bootstrap ,但是,Mint-UI 只适用于 Vue 项目;

注意:MUI 并不能使用 npm 去下载,需要自己手动从 github 上,下载现成的包:mui,自己解压出来,然后手动拷贝 dist文件(之后可以自己命名为mui) 到项目的 src>lib 中使用(lib 是指手动拷贝的包)
在这里插入图片描述

导入 MUI

// 导入 MUI 的样式表,和 bootstrap 用法没有差别
import './lib/mui/css/mui.min.css'

应用

之后可以在安装包的 D:\mui-master\examples\hello-mui\examples 下面找需要的组件,如 button:
在这里插入图片描述

再检查相应的源码

在这里插入图片描述

拷贝需要的代码放进项目中:

在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/lucky541788/article/details/83443590
今日推荐