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 }
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文为2016年11月9日,『前端之巅』微信群在线分享活动总结整理而成,转载请在文章开头处注明来自『前端之巅』公众...
    尾尾阅读 10,662评论 3 32
  • 目录 Vue 2.0的项目扩展1.如何舒服地使用Atom安装插件配置皮肤颜色2.Vue项目引入组件库引入方式支持E...
    百丈冰OG阅读 10,560评论 8 5
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,074评论 0 29
  • 这周把郭子鹰的《最美的时光在路上》重读了一遍,本来打算五天读完,没想到用四天的上午读完了,每天上午沐浴着冬日暖阳,...
    心境如花阅读 504评论 0 0
  • LeNet 较早期的神经网络,用于识别数字,当年美国大多数银行就是用它来识别支票上面的手写数字的。链接:http:...
    安大FA飞阅读 252评论 0 0