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的样式。

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完成引入。

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)

4.App.vue修改toast的引入

5.运行，成功。

toast的使用

引入Toast，编辑Toast的相关参数，绑定在按钮上，点击按钮时即可实现。

tabbar的使用

1.自定义组件tabbar，在模板中引入官网的 tab-container 组件
（官网：http://mint-ui.github.io/docs/#/zh-cn2/tabbar）
2.向外暴露组件，并定义selected

3.App.vue引入组件并注册。

4.main.js按需引入