vue+ele 使用及demo

vue+ele+axios demo

项目配置、前后端交互、组件申明使用、路由

1>项目目录

2>安装axios

cnpm install axios

完成后，main.js引用

3>选择布局

官方布局 https://element.eleme.cn/#/zh-CN/component/container 

page下index.vue

<template>
  <div class="home">
    <el-container style="height: 100%;">
      <!-- 以下为左侧菜单栏 -->
      <el-aside width="200px">
        <Left></Left>    //使用组件
      </el-aside>
      <!-- 以下为内容区域 -->
      <el-container >
        <!-- 头部 -->
        <el-header>
          <Top></Top>    //使用组件
        </el-header>

        <!-- 页面主体 -->
        <el-main>
          <router-view></router-view>    //路由视图
        </el-main>
        <!-- 页脚 -->
        <el-footer style="height:20px">by.QA</el-footer>

      </el-container>
    </el-container>
  </div>
</template>

<script>
  import Top from '@/components/Top'    //引入组件
  import Left from '@/components/Menu'    //引入组件
  export default {
    name:'app',
    components:{ 
      Top,    //声明
      Left    //声明
    }
  } 
</script>

<style >
  html,
  body,
  #app,
  .home,
  .el-container {
    padding:0px;
    margin:0px; 
    height:100%;
  }
  .el-header {
    /*background-color: #B3C0D1;*/
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 300px;
  }

  .el-footer {
    background-color: #B3C0D1;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

</style>



<!-- Add "scoped" attribute to limit CSS to this component only -->

 4>element组件使用

在ele官网找个心仪的组件，然后在components目录下新建.vue文件，如test.vue

找了个加载的组件：https://element.eleme.cn/#/zh-CN/component/loading ，直接粘贴进test.vue里。

在引用的页面中，如index.vue ,引入并使用

启动 npm run dev 前台展示“加载”组件

5>路由

router/index.js 绑定路由

下图'/'根目录绑定了index.vue，二级路由绑定了weekly_index、ci，ci下绑定了三级路由ci/appreport。

6>get、post 请求

get

<template>
  <div class="menu-left">
    <div style="height:80px" href="http://www.360che.com/#pvareaid=1010101" target="_blank">
    </div>
    <el-menu router 
      class="el-menu-vertical-demo"

      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      >
      <div v-for="(v, k, s) in menu"
      :key="s">
        <el-submenu :index="s+''">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span >{{ k }}</span>
          </template>
            <el-menu-item v-for="(url, name, i) in v" :key="i" :index="url" >{{ name }}</el-menu-item>
        </el-submenu>
      </div>
    </el-menu>
  </div>
</template>

<script>
  export default {
    name: 'menu-left',
    data () {
        return {
            menu: this.menu
        }
    },
    mounted () {
        this.getData()
    },
    methods: {
        getData () {
            this.$axios.get('/api/menu')
            .then(response => ( this.menu = response.data.menu))
            , response => { console.log('error')
            }
        },
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        }
      }
    }
</script>

post

<template>
  <el-row>
	  <el-button round @click="home">回首页
	  </el-button>
	  <el-button type="primary" round @click="postdata">主要按钮</el-button>
	  <el-button type="success" round>成功按钮</el-button>
	  <el-button type="info" round>信息按钮</el-button>
	  <el-button type="warning" round>警告按钮</el-button>
	  <el-button type="danger" round>危险按钮</el-button>
	  <div class="haha">{{ info }}</div>
  </el-row>
</template>
<script>
  export default {
	data() {
	      return {  
	      info: this.info
	      }
	    },
	    methods: {
	      home() {
	        this.$router.push('/')
	      },
	      postdata(){
	      	this.$axios.post('/api/testpost', {firstName: 'Fred', lastName: 'Flintstone'})
	      	.then(response => ( this.info = response.data))
	      	.catch(function (error) {console.log(error)});
	      }
	    }
	  }

</script>

7>跨域问题

config/index.js 中proxyTable 下增加：

    proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:5000/',//接口域名、端口号
        changeOrigin: true,//允许跨域
        pathRewrite: {
          '^/api': '' //api就意味着，所有该域名下的接口目录第一级都要加个/api
        }
      }
    }

如，接口为：127.0.0.1:5000/testpost。则请求地址前加上/api

 

demo：https://github.com/olaheihei/QA_P_demo