vue.js学习笔记三十三—— MUI
1. 简介
MUI 不同于 Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于 Bootstrap； 而 Mint-UI，是真正的组件库，是使用 Vue 技术封装出来的 成套的组件，可以无缝的和 VUE项目进行集成开发；
因此，从体验上来说， Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件；
从体验上来说， MUI和Bootstrap类似；
理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只适用于Vue项目
注意：
MUI 并不能使用 npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来，然后手动拷贝到项目中使用；
2. 下载地址
[官网首页](http://dev.dcloud.net.cn/mui/)
[文档地址](http://dev.dcloud.net.cn/mui/ui/)
3. MUI的使用
3.1 下载MUI
在GitHub上下载mui-master，解压缩，其中有一个dist目录，其中存放着js、font、css，将dist目录拷贝
3.2 项目中引入MUI
在src目录下新建一个lib文件夹，用于存放项目中手动引入的三方包（node_modules中存放的是webpack生成的三方包），然后，将拷贝的dist目录，粘贴到lib目录，并将dist改名为MUI
3.3 项目中引入MUI控件
打开mui-master解压缩文件，有一个examples文件夹，进入其中，可以看到一个hello-mui，其中存放的是一些基本的MUI案例，进入该文件夹，又可以看到一个examples文件夹，进去，可以看到很多HTML用例，这里，我们想在项目中引入MUI的button控件，在example中，我们可以找到一个buttons.html的文件，打开该文件，可以发现有很多button样式
右键鼠标，查看源码（跟引入bootstrap的方式一样），找到需要的样式的button，复制代码，粘贴到app.vue
打包运行，发现，按钮是有了，但是没有样式，原来是我们没在main.js中引入MUI文件
在main.js中引入lib中的css、fonts与js文件
// 引入MUI
import './lib/mui/css/mui.css';
import './lib/mui/fonts/mui.ttf';
import './lib/mui/js/mui.js';重新打包运行，发现，控制台报错了，错误信息是
ERROR in ./src/lib/mui/fonts/mui.ttf 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)@ ./src/main.js 41:0-33缺少loader加载器，原因是，我们在main.js中引入了ttf字体文件，需要在webpack.confg.js中配置loader
配置处理字体文件的loader
{ test:/\.(ttf|woff2|eot|svg|woff)$/,use:'url-loader' } // 处理字体文件再次打包运行，发现可以了。
MUI其他控件用法雷同
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！