mint-ui----mint-ui的基本使用

mint-ui的使用：
一、安裝cnpm i mint-ui -S
或直接使用如下的cdn託管：
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
二、安裝後導入文件：
import MintUI from 'mint-ui'

import 'mint-ui/lib/style.css'
三、注意：自定義組件綁定原生事件必須使用 .native 修飾符，只有button組件能夠直接使用@click時不用native修飾符
四、若選擇全局引入：在vue的main.js文件中引入：
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)
五、若選擇局部引入：按需引入
　　先安裝babel-plugin-component：

　　cnpm install babel-plugin-component -D
　　而後將 .babelrc 文件增長如下2個配置：

{
"presets": [
        ["es2015", { "modules": false }]
    ],
    "plugins": [["component", [
        {
            "libraryName": "mint-ui",
            "style": true
        }
    ]]]
}                

 

六、安裝：cnpm install babel-preset-es2015 --dev

七、最後在vue的main.js文件中引入所需組件：例如：

import { Button, Cell } from 'mint-ui'

//組件掛載到Vue中:
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell) //或寫爲：
//Vue.use(Button);
//Vue.use(Cell)