用Vue整合Echarts做数据展示：整合ElementUI，实现布局

ElementUI官网

Element开发指南

1. 安装ElementUI

   【ctrl+`】打开终端 输入 npm i element-ui -S

2. 在main.js中为我们的项目引入ElementUI

   // The Vue build version to load with the `import` command
   // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
   import Vue from 'vue'
   import Echar from './echar'
   import router from './router'
   //以下三行是新增的内容
   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   Vue.use(ElementUI);
   
   Vue.config.productionTip = false
   
   /* eslint-disable no-new */
   new Vue({
     el: '#app',
     router,
     components: { Echar },
     template: '<Echar/>'
   })
   
   

3. 测试是否可用(修改我们的首页)。

   1. 直接复制ElementUI中Container 布局容器中的部分代码和全部css样式
      

      <template>
        <div class="main">
          <!-- 下面的都是直接复制过来的 -->
          <el-container>
            <el-header>Header</el-header>
            <el-container>
              <el-aside width="200px">Aside</el-aside>
              <el-container>
                <el-main>Main</el-main>
                <el-footer>Footer</el-footer>
              </el-container>
            </el-container>
          </el-container>
        </div>
      </template>
      
      <script>
      export default {
        name: 'HelloWorld',
        data () {
          return {
            msg: 'Welcome to Your Vue.js App'
          }
        }
      }
      </script>
      
      <!-- Add "scoped" attribute to limit CSS to this component only -->
      <style scoped>
      .el-header,
      .el-footer {
        background-color: #b3c0d1;
        color: #333;
        text-align: center;
        line-height: 60px;
      }
      
      .el-aside {
        background-color: #d3dce6;
        color: #333;
        text-align: center;
        line-height: 200px;
      }
      
      .el-main {
        background-color: #e9eef3;
        color: #333;
        text-align: center;
        line-height: 160px;
      }
      
      body > .el-container {
        margin-bottom: 40px;
      }
      
      .el-container:nth-child(5) .el-aside,
      .el-container:nth-child(6) .el-aside {
        line-height: 260px;
      }
      
      .el-container:nth-child(7) .el-aside {
        line-height: 320px;
      }
      </style>
      
      

   2. 删除主页面(我的是echar.vue，没改过的是App.vue)的<img src="./assets/logo.png">标签

   3. npm run dev 跑起来看看效果
      

差不多的都有了，更改下样式，再做一下调整。

echar.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'echar'
}
</script>

<style>
//修改以下部分
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #eeeeee;
}
#app {
  height: 100%;
}
</style>

HelloWord.vue

<template>
  <div class="main">
    <!-- 直接复制过来的 -->
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="10%">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <!-- <el-footer>Footer</el-footer> -->
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  display: flex;
  width: 100%;
  height: 100%;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 160px;
  height: 100%;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
</style>

整体布局就这样了。