Mint-UI是基于Vue.js的移动端组件库
Mint-UI是Vue组件库,是使用Vue技术封装出来的成套的组件,可以无缝地和Vue项目进行集成开发
不同版本的安装
导入有两种方式
完整引入
入口文件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这个强大的组件库,把里面已经构建好的组件直接拿来用即可