MintUI 组件和Mui

MintUI 组件

安装Mint UI
npm install --save mint-ui

导入所有MintUI组件：

import MintUI from 'mint-ui'

导入样式表：这里可以省略 node_modules 这一层目录

import 'mint-ui/lib/style.css'

在 vue 中使用 MintUI：把所有的组件，注册为全局的组件

Vue.use(MintUI)

使用的例子：
css组件

<mt-button type="primary" size="large">primary</mt-button>

js组件

<script>
// 按需导入 Toast 组件
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      // 文档里 Toast()函数有一个默认返回值（含有close方法），放在data中的toastInstanse里。
      toastInstanse: null
    };
  },
  //组件被创建之后，就调用这个函数
  created() {
    this.getList();
  },
  methods: {
    getList() {
      // 模拟获取列表的 一个 AJax 方法
      // 在获取数据之前，立即 弹出 Toast 提示用户，正在加载数据
      this.show();
      // 不用setTimeout(function()原因如下：
      //setTimeout传入的这个方法内部的this会被改写指向window
      //箭头函数会改变this的指向，箭头函数内部的this会指向声明箭头函数时所在作用域的this
      setTimeout(() => {
        // 让某个方法延迟执行， 当 3 秒过后，数据获取回来了，要把 Toast 移除
        this.toastInstanse.close();
      }, 3000);
    },
    show() {
      this.toastInstanse = Toast({
        message: "这是提示消息--正在加载数据",
        duration: -1, // 如果是 -1 则弹出之后不消失
        position: "top",

        // 设置 图标的类,图标从bootstrap找
        // 导入bootstrap样式 import 'bootstrap/dist/css/bootstrap.css'
        iconClass: "glyphicon glyphicon-heart", 

        // 自定义Toast的样式，需要自己提供一个类名
        // import './css/app.css'
        // 类里面  .mytoast i{color:red !important;}   //若只让图标有样式，图标默认被包裹在i里
        className: "mytoast" 
      });
    }
  }
};
</script>

按需导入MintUI 组件

安装babel-plugin-component：
npm install babel-plugin-component -D
将.babelrc修改为：

{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime", ["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

import { Button } from 'mint-ui'
Vue.component(Button.name, Button)
// Button.name的值是mt-button

使用 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文件放在项目里src中的lib 中，并改名为mui。
查找样式。mui-master包中–>examples–>hello-mui—>examples—>找到需要的样式复制代码,或者在文档里找

import '../lib/mui/css/mui.min.css'

在webpack.config.js中添加新的loader规则：


{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }

根据官方提供的文档和example，尝试使用相关的组件

北岭有燕

发布了59 篇原创文章 · 获赞 11 · 访问量 1万+

私信关注

MintUI 组件

按需导入MintUI 组件

使用 MUI 组件

猜你喜欢