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,697評論 3 32
  • 目錄 Vue 2.0的項目擴展1.如何舒服地使用Atom安裝插件配置皮膚顏色2.Vue項目引入組件庫引入方式支持E...
    百丈冰OG閱讀 10,575評論 8 5
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內容,還有我對于 Vue 1.0 印象不深的內容。關于...
    云之外閱讀 5,079評論 0 29
  • 這周把郭子鷹的《最美的時光在路上》重讀了一遍,本來打算五天讀完,沒想到用四天的上午讀完了,每天上午沐浴著冬日暖陽,...
    心境如花閱讀 504評論 0 0
  • LeNet 較早期的神經網絡,用于識別數字,當年美國大多數銀行就是用它來識別支票上面的手寫數字的。鏈接:http:...
    安大FA飛閱讀 252評論 0 0