vue 使用mint-ui遇到的坑

1.按需引入：文档上写

将 .babelrc 修改为：

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

实际操作项目报错，应该改为：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", 
      "transform-runtime",
      ["component", [
        {
          "libraryName": "mint-ui",
          "style": true
        }
    ]]
  ]
}

引入组件报错

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Cell)
 */

 发现使用Vue.use(Button) 报错

解决方案：还是使用Vue.component(Button)

2，Header组件的返回问题

1.将router-link to置空；2.用@click正常处理

3，cell的click不起作用

 解决方法：v-on:click.native="showSelect()"

原因：

4，mintUI中indicator报错

 

1、在main.js中引入mint-ui框架。我用的是按需引用。

import { Indicator } from 'mint-ui'

好了，已经引入了。但是当我发起请求时，显示indicator is not defined！呵呵……fuck脸。
百度也没有什么具体的因果。但是还好本人也用了mint-ui的日期模板。所以就瞎模仿……哈哈哈，上代码。

2、你得把这个东西绑定给vue，然后才能用！！！！

Vue.prototype.$Indicator = Indicator

 

3、然后加上官网的写法，变通一下。

this.$Indicator.open({
	text: 'Loading...',
	spinnerType: 'fading-circle'
});