导入Element ui插件

npm i element-ui -S

配置Element UI

在src文件夹下的main.js的配置如下

代码为：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
Vue.use(ElementUI)

然后在组件中使用Element UI

具体的使用方法大家到Element UI官网中进行选择，官网地址为

https://element.eleme.cn/#/zh-CN

大家根据需要选择组件

这是我根据B站的视频仿出来的一个布局

代码如下：

<template>
  <div>
    <el-container>
      <el-header>车载物联网无线通信滑移门运行数据回传系统</el-header>
      <el-main>
        <div id="car-speed" class="car-speed"></div>
        <div class="car-position"></div>
        <div class="show-other"></div>
        <div class="car-count"></div>
        <div class="car-status"></div>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>



<script>
export default {
  mounted() {
    this.setChar()
  },

  name: 'Data',
  components: {
    //组件
  },

  methods: {
    setChar() {
    let myChart = this.$echarts.init(document.getElementById('car-speed'), 'white')
      var option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
          },
        ],
      }
      // 绘制图表
      myChart.setOption(option);
    },
  },
}
</script>

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

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

.car-speed {
  margin-left: 5px;
  width: 500px;
  height: 300px;
  background-color: black;
  border-radius: 15px 15px 0 0;
}

.car-position {
  position: absolute;
  margin-top: 20px;
  margin-left: 5px;
  width: 500px;
  height: 250px;
  background-color: burlywood;
  border-radius: 15px 15px 15px 15px;
}

.car-count {
  position: absolute;
  margin-top: 20px;
  margin-left: 1000px;
  width: 500px;
  height: 250px;
  background-color: black;
  border-radius: 15px 15px 15px 15px;
}

.car-status {
  position: absolute;
  margin-top: -300px;
  margin-left: 1000px;
  width: 500px;
  height: 300px;
  background-color: #b3c0d1;
  border-radius: 15px 15px 15px 15px;
}

.show-other {
  position: absolute;
  margin-top: -300px;
  margin-left: 510px;
  width: 480px;
  height: 570px;
  background-color: #b3c0d1;
  border-radius: 15px 15px 15px 15px;
}
</style>

需要注意的就是它的CSS了，我写的这个CSS比较拉跨，建议大家自行编写。（CSS永远的痛）

下面是我使用Element UI编写的一个登录界面，看起来好丑（哈哈哈哈）。不过功能还是不错的。

具体实现代码如下：

<template>
  <div class="login-container">
    <div class="login-body">
      欢迎来到车载物联网系统
      <!-- 登录界面头部 -->
      <div class="login-header">用户登录</div>
      <!-- 登录界面表单 -->
      <!-- ref:得到表单实例对象 :model  :相当于v-bind   -->
      <el-form ref="loginFormRef" :model="loginForm" :rules="rules" class="login-form">
        <el-form-item prop="useruame" label="用户名">
          <el-input v-model="loginForm.useruame" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>

        <!-- 登录界面按钮 -->
        <el-form-item class="btn">
          <el-button type="primary" @click="onLogin('loginFormRef')">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 登录界面其他选项 -->
      <div class="other-option">
        <span @click="onRegister">注册账户</span>
        <span style="margin: 0 30px">|</span>
        <span>找回密码</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //登录表单的数据绑定对象,记得加上:
      loginForm: {
        input: '',
        useruame: '',
        password: '',
      },
      //登录表单的验证规则对象，规则名字要和loginForm的一样
      rules: {
        // 用户名规则
        useruame: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        // 密码规则
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' },
        ],
      },
    }
  },

  methods: {
    onLogin(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const result = this.$http.post('login', this.loginForm)
          console.log(result)
          var useruame1 = localStorage.userName
          var password1 = localStorage.passWord
          console.log('获得用户名' + useruame1)
          console.log('获得密码' + password1)
          if (useruame1 === this.loginForm.useruame && password1 === this.loginForm.password) {
            this.$alert('', '登录成功', {
              showClose:true,
              showConfirmButton:true,
              callback: (action) => {
                this.$message({
                  type: 'info',
                  message: `action: ${action}`,
                })
              },
            })
            this.$router.replace('/Data')
          } else {
            this.$alert('用户名或密码错误！', '登录失败', {
              confirmButtonText: '确定',
              callback: (action) => {
                this.$message({
                  type: 'info',
                  message: `action: ${action}`,
                })
              },
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
      console.log(this.loginForm.useruame)
    },
    // 清空表单值
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields()
    },
    //跳转至注册页面
    onRegister() {
      console.log('点击注册用户')
      this.$router.replace('/Register') //默认全局配置$router属性
    },
  },
}
</script>

// scoped只在当前组件生效
<style lang="scss" scoped>
.login-container {
  height: 500px;
  width: 500px;
  background-color: #fff5ee;
  background-image: url('../assets/login.png');
  position: absolute;
  top: 50%;
  left: 50%;
  // 设置div的中心点在我们想要的位置
  transform: translate(-50%, -50%);

  .login-header {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .login-form {
    color: #3d7ef9;
    width: 300px;
    height: 300px;
    border-radius: 15px 15px 0 0;
    background-color: #fff;
    margin-top: 20px;
    margin-left: 20%;
    padding: 0px 10px; //输入框与登录框两侧的距离
  }
}

.btn {
  display: flex; //弹性布局
  justify-content: center; //置中
}

.other-option {
  display: flex; //弹性布局
  justify-content: center; //置中
  background-color: #fff;
  width: 320px;
  margin-left: 20%;
  margin-bottom: 30x;
}
</style>

如何导入并使用Echars插件

安装与配置基本与Element UI的一样，Echars的官网地址为

https://echarts.apache.org/zh/index.html

安装插件

npm install echarts --save

配置插件（src文件下的main.js）

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

使用插件

1 定义界面框的大小

2 编写具体的图形参数

3 效果如下