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

mint-ui的使用：
1、安装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>
2、安装后导入文件：
import MintUI from 'mint-ui'

import 'mint-ui/lib/style.css'
3、注意：自定义组件绑定原生事件必须使用 .native 修饰符，只有button组件可以直接使用@click时不用native修饰符
4、若选择全局引入：在vue的main.js文件中引入：
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)
5、若选择局部引入：按需引入
　　先安装babel-plugin-component：

　　cnpm install babel-plugin-component -D
　　然后将 .babelrc 文件增加以下2个配置：

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

 

6、安装：cnpm install babel-preset-es2015 --dev

7、最后在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)