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>

在这里插入图片描述

整体布局就这样了。

Logo

前往低代码交流专区

更多推荐