mint-ui：基于Vue.js的移动组件库

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
  感谢浏览，欢迎评论指正，相互学习，转载请标明出处。