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>