kunyashaw博客主页 关注kunyashaw新博客 关于kunyashaw 转到底部

vue整合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>

  

 

 

posted @ 2019-01-22 13:52 kunyashaw 阅读(...) 评论(...) 编辑 收藏
回到顶部