vue整合mui

步骤1：下载https://github.com/dcloudio/mui

步骤2：将下载来的包中的dist文件夹放到vue项目的assets中

步骤3：修改webpack配置

找到build下的webpack.base.conf.js

步骤4：修改.babelrc

步骤5：在main.js引入对应的js和css

步骤6：调用mui中的组件

<template>
<ul class="mui-table-view"> 
        <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#">面板1</a>
            <div class="mui-collapse-content">
                <p>面板1子内容</p>
            </div>
        </li>
    </ul>
</template>
 
<script>
 
 
export default {
  created() {
   mui.ajax('http://jsonplaceholder.typicode.com/users',{
    dataType:'json',//服务器返回json格式数据
    type:'get',//HTTP请求类型
    timeout:10000,//超时时间设置为10秒；
    headers:{'Content-Type':'application/json'},                  
    success:function(data){
        //服务器返回响应，根据响应结果，分析是否登录成功；
    console.log(data)
    },
    error:function(xhr,type,errorThrown){
        //异常处理；
        console.log(type);
    }
});
  },
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>