mintUI中文2.0网址:
http://mint-ui.github.io/docs/#/zh-cn2
1.新建项目
vue create mintuidemo1
2.安装mintUI
cnpm install mint-ui --save
3.main.js完整引入mintUI和css
import Mint from 'mini-ui'
import 'mint-ui/lib/style.css'
Vue.use(Mint)
4.删除App.vue中的logo和helloworld。
5.mt-button的使用
div内定义button
<button @click="minttest">测试2</button>
<mt-button @click.native="minttest">测试2</mt-button>
<mt-button @click="minttest">测试</mt-button>
script内定义显示方法
methods: {
minttest: function() {
this.$toast("hello world")
}
}
预览,可查看到使用了mintUI的样式。
6.mt-header的使用,结合了返回小组件
<mt-header fixed title='固定到顶部'>
<router-link to="/" slot="left">
<!-- history.go(-1) -->
<mt-button icon="back">返回</mt-button>
</router-link>
</mt-header>
7.预览效果参考上图。
8.在使用router标签时,要先安装vue-router,否则会报错哦。
cnpm install vue-router --save
并定义router目录和index.js文件,再在main.js完成引入。
1.安装babel组件
cnpm install babel-plugin-component -D
2.添加. babelrc(中间有空格)文件,内容如下:
(注意:删掉了一行内容,和官网提供的相比)
{
"presets": [
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
3.main.js注释掉完整引入,引入组件。
import {Button, Header} from 'mint-ui'
Vue.component(Button.name, Button)
Vue.component(Header.name, Header)
引入Toast,编辑Toast的相关参数,绑定在按钮上,点击按钮时即可实现。
1.自定义组件tabbar,在模板中引入官网的 tab-container 组件
(官网:http://mint-ui.github.io/docs/#/zh-cn2/tabbar)
2.向外暴露组件,并定义selected
3.App.vue引入组件并注册。
4.main.js按需引入