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)

猜你喜欢

转载自www.cnblogs.com/snowstorm22/p/10460380.html