Vue组件库Mint UI

安装:

npm i mint-ui -S

关于事件绑定
在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 .native 修饰符：

<my-component @click.native="handleClick">Click Me</my-component>

从易用性的角度出发，我们对 Button 组件进行了处理，使它可以监听 click 事件：

<mt-button @click="handleButtonClick">Click Me</mt-button>

但是对于其他组件，还是需要添加 .native 修饰符。

• 按需引入

npm i mint-ui --save      //安装Mint UI组件库

// 按需引入
npm i babel-plugin-component -D

//.babelrc配置
"presets" : 不用修改
"plugins": ["transform-runtime",["component",[
         {"libraryName":"mint-ui","style":true}
     ]]],
"env": {
   "test": {
     "presets": ["env", "stage-2"],
     "plugins": ["istanbul"]
   }
 }
//main.js 引入
import { Header } from 'mint-ui';
Vue.component(Header.name, Header);

• 完整引入

//main.js
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'  //样式文件需要单独引入
import App from './App.vue'

Vue.use(MintUI)

new Vue({
  el: '#app',
  components: { App }
})