mint-ui 是饿了么公司的前端技术团队基于 Vue.js 实现的精致移动端组件库。很赞，组件挺多，基本场景够用了，感谢开源！
- 首先创建一个vue项目
vue init webpack my-project
cd my-project
npm install
- 安装mint-ui
npm install mint-ui -S
- 引入方式1：全部引入
一般在入口文件main.js中：
import Vue from 'vue'
import MintUI from 'mint-ui' // 一般直接放在这个位置
import 'mint-ui/lib/style.css' // 样式文件需要单独引用
Vue.use(MintUI)
全部引入了后就相当于全局注册了，直接用就可以了。不需要在每个.vue文件中import { … }（局部引用），以及components{ … }局部注册了。
- 引入方式2：按需引入
借助babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
npm install babel-plugin-component -D
然后配置下这个插件，修改 .babelrc：(添加到plugins中去)
{
"presets": [
["es2015", { "modules": false }] // 需要es2015就自行安装
],
"plugins": [
["transform-runtime"],
["component", [
{ "libraryName": "mint-ui", "style": true }
]]
]
}
如果你只希望引入部分组件，比如 Button 和 Cell，那么需要在 main.js 中写入以下内容：
import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import App from './App.vue'
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或写为
* Vue.use(Button)
* Vue.use(Cell)
*/
至此，一个基于 Vue 和 Mint UI 的开发环境已经搭建完毕，现在就可以编写代码了
- 示例
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>This app is desigined by mint-ui producted by elem company.</h2>
<mt-button @click.native="handleClick()" type="primary">按钮</mt-button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
msg: 'Welcome to Your Vue.js App',
};
},
methods: {
handleClick() {
this.$toast('Hello world!');
},
},
};
</script>
<style scoped>
……
</style>
- 运行看看效果吧：
npm run dev
hello.png
clicked.png
- 参考官方文档
- 饿了么团队基于Vue.js的pc端组件库 Element-UI
感谢浏览，欢迎评论指正，相互学习，转载请标明出处。
