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>