MintUI 组件和Mui

MintUI 组件

Github 仓储地址
Mint-UI官方文档

安装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会指向声明箭头函数时所在作用域的thissetTimeout(() => {// 让某个方法延迟执行， 当 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，尝试使用相关的组件

MintUI 组件和Mui相关推荐

MintUI 组件和MUI组件
使用饿了么的 MintUI 组件和MUI组件 MintUI组件文档链接地址: Github 仓储地址 Mint-UI官方文档导入所有MintUI组件: import MintUI from 'm ...
vue-cli安装、node-sass安装、mintUI组件库安装
其实vue里面很多插件的安装和使用都是类似的,所以这里抛砖引玉,拿出几个案例出来理解一下就好. 1.使用淘宝npm镜像很多安装失败的原因就是因为国内网络限制因素,所以使用淘宝镜像有利于解决这方面问题 ...
Mint-UI组件 MessageBox为prompt 添加判断条件
Mint-UI 的Message Box 是prompt类型时,可以添加正则判断或者function判断条件.具体可以查看Mint-UI源码. 添加正则判断条件: MessageBox({$type: ...
vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画
自定义指令: vue中通过directive方法自定义指令,如:自定义一个v-focus指令: <script>Vue.directive('focus', {//通过directive( ...
Vue学习7-MinUI组件与项目托管到码云上
上一篇 Vue学习6-(webpack发布策略) 下一篇 Vue学习8-项目实战一:完成header.tabbar区域.路由组件切换与轮播图功能 MinUI组件与码云一.使用render函数渲染组件 ...
VUE_UI.UI组件和CLI脚手架
VUE_UI 1 vue ui 组件 1.1 mint-ui安装与使用 1.2 mint-ui组件分类 1.3 mint-ui组件 1.3.1 Toast提示框 1.3.2 lazyLoad懒加载 1 ...
ajax插件库,03.vue-ajax、vue UI 组件库
vue-ajax vue 项目中常用的 2 个 ajax 库 vue-resource: vue 插件, 非官方库, vue1.x 使用广泛 axios: 通用的 ajax 请求库, 官方推荐, vu ...
js - 让 git 上 Mint-UI 的例子跑起来 - 方法大全
快速入门Mint-ui+项目开发,让Git 上 mint-ui 的例子跑起来! 授人以鱼不如授人以渔! 通过两种方法讲解一个案例,并以此作为组件的通用方法参考! 一. 注意: 我们以Mint-ui框架 ...
Mint-UI 报错提示缺少“raf.js / vue-lazyload / vue-popup” - 解决办法
Vue项目运行mint-ui组件,报错提示缺少"vue-popup" ,如何解决? 有时候还会报错提示:··· (比如 raf.js / vue-lazyload / vue-po ...

MintUI 组件和Mui

MintUI 组件

按需导入MintUI 组件

使用 MUI 组件

MintUI 组件和Mui相关推荐

最新文章

热门文章