Mint UI

GitHub：https://github.com/ElemeFE/mint-ui

項目主頁：http://mint-ui.github.io/#!/zh-cn

Demo：http://elemefe.github.io/mint-ui/#!/

文檔：http://mint-ui.github.io/docs/#!/zh-cn

由餓了么前端團隊推出的 Mint UI 是一個基于 Vue.js 的移動端組件庫。自 6 月初開源以來，根據(jù)社區(qū)和團隊內(nèi)部的反饋，修復了一些 bug 并新增了部分組件，于本周發(fā)布了 0.2.0 版本。本文介紹如何從零開始構建一個使用 Mint UI 的 Vue 項目。

webpack + vue 使用mint-ui

自己從一個月之前正式的接觸vue.js這個框架，然后就瘋狂的迷戀上他，易上手我覺得是他最大的優(yōu)勢，之前我一直是使用Jquery的，大量的dom操作讓我有點力不從心，之前的我安于現(xiàn)狀不想去探索新的知識，直到我直到vue并且使用上他之后，自己的生產(chǎn)力仿佛得到了質(zhì)的飛躍，閑話少敘，進入今天的主題Mint-ui鏈接描述。

第一步

安裝mint-ui npm install mint-ui --save

第二步

在main.js里面引入mint-ui

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'//最嗨的是他這個直接引入的是一個css文件

Vue.use(MintUI);

第三步

因為webpack把需要的依賴都下載好了我只需要安裝下面的依賴就好啦
install babel-preset-es2015 --save-dev

第四步

配置你的babelrc文件

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}

第五步
下面重啟一下就可以直接在組件使用啦
需要注意的是，雖然是全局使用，但是在使用的過程中還是要在組件內(nèi)引用一下你需要使用的組件

<template>
  <div class="header">
    <div @click='test'>{{headerProps.title}}</div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {DatetimePicker, Button, Toast} from 'mint-ui';
  export default {
    props: {
      headerProps: Object
    },
    data(){
      return {}
    },
    methods:{
      test(){
        Toast('我是Tip');
      }
    }
  }

</script>
<style lang="scss">
  .header {
    /*position: fixed;*/
    z-index: 99;
    width: 100%;
    background: #f55947;
    height: 3rem;
    font: {
      size: 1.2rem;
      weight: 100;
    }
  ;
    div {
      text-align: center;
      line-height: 3rem;
      color: #fff;
      font: {
        weight: 300;
      }
    ;
    }
  }

</style>

從安裝到使用的過程就是這樣啦，我也是剛接觸vue這個框架，有問題的地方請大神指出呀，也希望能和大家一起學習進步~~~~