Mint-UI

Mint-UI是基于Vue.js的移动端组件库

Mint-UI是Vue组件库，是使用Vue技术封装出来的成套的组件，可以无缝地和Vue项目进行集成开发

Mint UI官网

不同版本的安装

 

导入有两种方式 

---

 完整引入

入口文件main.js

import Vue from 'vue'
import index from './index.vue'
import Mint from 'mint-ui' //导入Mint-UI,把所有组件都导入进来
import 'mint-ui/lib/style.css' //样式，可以省略node_modules这层目录的书写

Vue.use(Mint) //将MintUI安装到Vue中，把所有组件注册为全局组件

var vm = new Vue({
    el:'#app',
    render:function (creatElement) {
        return creatElement(index)
    }
})

然后就可以在我们的vue模板文件中直接使用需要的组件，Mint-UI将组件分为JS Component、CSS Component和Form Component，需要哪个组件就直接选中复制粘贴过来使用

使用组件前要进行全局或私有组件的定义，显然Mint-UI已经帮我们定义好了，所以能直接拿来用

 

使用JS Component

<template>
    <div>
        <!--点击按钮触发自定义的show方法，show方法中调用Toast-->
        <mt-button type="primary" @click="show">primary</mt-button>
    </div>
</template>
<script>
    import { Toast } from 'mint-ui' //使用前要导包
    export default  {
        data:function () {
            return { }
        },
        methods:{
            show(){
                Toast({
                    message:'快乐崇拜',
                    position:'bottom',
                    duration:-1,
                    iconClass:'glyphicon glyphicon-ok-sign' 
                })
            }
        }
    }
</script>
<style scoped>
</style>

---

按需引入

官方文档说到，按需引入需要先安装babel-plugin-component插件

npm install babel-plugin-component -D

再将.babelrc修改为

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

babel是帮webpack处理高级语法的，这里既然需要使用babel，那就按老套路执行两套命令安装两套包来实现babel相关功能

npm i babel-core babel-loader babel-plugin-transform-runtime -D    //babel的转换工具
npm i babel-preset-env babel-preset-stage-0 -D   //babel的语法，babel-preset-env语法插件包含目前所有ES相关的语法

然后在webpack.config中module节点下rules数组内添加新匹配规则

//在配置babel的loader规则时必须把node_modules目录通过exclude选项排除掉
{test: /.js$/,use: 'babel-loader', exclude: /node_modules/}

最后根目录下新建.babelrc的babel配置文件（json格式），结合Mint-UI文档的修改要求后，为

{
  "presets": ["env","stage-0"],
  "plugins": ["transform-runtime",["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

然后在入口文件main中引入就可使用了

import Vue from 'vue'
import index from './index.vue'
import 'mint-ui/lib/style.css'  //样式一定别忘了引入

import { Button } from 'mint-ui' //按需导入，按钮组件

Vue.component(Button.name,Button) //组件注册

var vm = new Vue({
    el:'#app',
    render:function (creatElement) {
        return creatElement(index)
    }
})

途中报错

ERROR in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

按其说的，安装babel-loader@7 后，问题解决

---

总结

回想自己创建组件的过程，模板对象原本是在入口文件中创建的，后来改使用vue文件来创建

模板创建好后在入口文件中 import 模板名 from ‘模板路径’，来导入经过webpack打包结合（template+script+style）的模板对象

之后使用Vue.component('自定义组件名'，模板对象)的方式来注册，之后就可使用该模板

也可以把模板对象给render方法或者路由构造里的component

现在有了Mint-UI这个强大的组件库，把里面已经构建好的组件直接拿来用即可