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)