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)