vue中使用mintUI完整/按需引入& router-link报错解决

mintUI中文2.0网址:
http://mint-ui.github.io/docs/#/zh-cn2

Mint UI完整引入

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的样式。
vue中使用mintUI完整/按需引入& router-link报错解决_第1张图片
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>

vue中使用mintUI完整/按需引入& router-link报错解决_第2张图片
7.预览效果参考上图。
8.在使用router标签时,要先安装vue-router,否则会报错哦。

cnpm install vue-router --save

并定义router目录和index.js文件,再在main.js完成引入。
vue中使用mintUI完整/按需引入& router-link报错解决_第3张图片
vue中使用mintUI完整/按需引入& router-link报错解决_第4张图片

Mint UI按需引入

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)

vue中使用mintUI完整/按需引入& router-link报错解决_第5张图片
4.App.vue修改toast的引入
vue中使用mintUI完整/按需引入& router-link报错解决_第6张图片
5.运行,成功。

toast的使用

引入Toast,编辑Toast的相关参数,绑定在按钮上,点击按钮时即可实现。
vue中使用mintUI完整/按需引入& router-link报错解决_第7张图片

tabbar的使用

1.自定义组件tabbar,在模板中引入官网的 tab-container 组件
(官网:http://mint-ui.github.io/docs/#/zh-cn2/tabbar)
2.向外暴露组件,并定义selected
vue中使用mintUI完整/按需引入& router-link报错解决_第8张图片
3.App.vue引入组件并注册。
vue中使用mintUI完整/按需引入& router-link报错解决_第9张图片
4.main.js按需引入
vue中使用mintUI完整/按需引入& router-link报错解决_第10张图片

你可能感兴趣的:(vue)