Mint-ui（基於 Vue.js 的移動端組件庫）的使用 以及 Mui的使用

官網： http://mint-ui.github.io/#!/zh-cn

1.安裝包 npm install mint-ui -S

2.導包

import Vue from 'vue'
import MintUi from 'mint-ui' // 導入全部組件
import 'mint-ui/lib/style.css'
Vue.use(MintUi)

3.css類mint-ui組建的使用

<template>
 <div>
  <mt-button type="default">default</mt-button>   // (直接使用)
 </div>
</template>

4.js類mint-ui組建的使用

按需再導入一次，再使用

<template>
 <div>
  <mt-button type="default" @click='show'>default</mt-button>
 </div>
</template>

<script>
 import { Toast } from 'mint-ui';
 export default {
  methods: {
   show: function () {
    Toast({
     message: '提示信息'
    })
   }
  }
 }
</script>

5，按需導入

import { Button } from 'mint-ui'
Vue.component('mt-button', Button)

6.按需導入mint-ui時.babelrc文件的配置

{
　　　"presets": ["@babel/preset-env"],
　　　"plugins": [
  "@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties",
  ["component",
   
     {
        "libraryName": "mint-ui",
        "style": true
     }
    
  ]
 ]
　}

 

 

Mui的使用：

1.手動在GitHub上下載MUI的壓縮包

2.解壓包，在mui-master\examples\hello-mui\examples路徑下查找自己需要的組件模型，找到后，拷貝代碼段到自己的項目里面

3.將壓縮包下里面的dist目錄完整的拷貝到自己項目的lib目錄下

4.導入第三步拷貝的樣式文件（import './lib/mui/css/mui.min.css'）