vue中使用 mint-ui

全局引入及使用

• 引用：在main.js文件中写入

import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(Mint);

• 使用：举两个示例
  *此处有疑问，我在vue中打印this，根本没有mint里面的这些方法，最后经过同事指导，才明白这些方法都在原型链上，我们需要打印 Object.getPrototypeOf(this) ，在它里面的__proto__中才可以看到这些方法，注意使用这些方法的时候所有的名称都是小写哦，一定要写对了~~ *

 	this.$toast({
		message: '提示语句',
		position: 'middle',
		duration: 5000
	})
	this.$messagebox.confirm('确定吗提交吗','提示')

局部引用及使用

• 引用： 此处根据官网的引用方式引入就可以，个别的方法需要配置到vue原型上面，以便在组件中直接使用。

import { Toast,MessageBox,Indicator,Loadmore } from 'mint-ui';
Vue.prototype.$MessageBox = MessageBox;
Vue.prototype.$toast = Toast;
Vue.prototype.$indicator = Indicator;
Vue.component(Loadmore.name, Loadmore);

• 使用：

this.$MessageBox.alert('修改成功')
this.$toast({
		message: '请选择出生日期',
	    position: 'middle',
	    duration: 3000
 });

坎坷的问题~

• 全局引入css缺少loader，安装：
  npm install css-loader style-loader --save-dev
  然后在build的config中配置css loader，module.rules下面添加一项

  {
          test: /\.css$/,
          loader:"style-loader!css-loader"
  }
  

• 引入css报错原因：
  npm install babel-plugin-component --save
  npm install babel-preset-es2015

• 在.babelrc 里面添加代码

"plugins": [
        "transform-vue-jsx",
        "transform-runtime",
        [
            "component",
            [
                {
                    "libraryName": "mint-ui",
                    "style": true
                }
            ]
        ]
    ]