立即创建立即注册_vue+elementui">
devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue+elementUI

作者：我家自动化 | 2024-02-17 05:09:34

赞

踩

vue+elementui

一、安装

  1. 安装node.js

  2. 安装npm管理器

  3. 安装vue脚手架

    • npm install -g vue-cli

  4. vue ui进入图形界面创建vue项目

    • 注：可选择2.0版本和3.0版本

    • 添加element ui框架

  5. 打开idea导入项目，在插件中下载vue

  6. 在控制台运行npm run serve

  7. 输入http://localhost:8080/，出现vue界面即成功

二、配置路由

  1. 在项目选择router》index.js导入新建vue项目名

    import Logon from "@/views/Logon";
{
    path: '/logon',
    name: 'logon',
    component: Logon
  },

三、vue+element ui使用

<template>这是编写前端代码的标签，例如html中的body</template>
<script>这是编写js脚本的标签</script>
<style scoped>这是编写样式的标签，例如css等</style>

四、界面代码

4.1简洁登录界面

<template>
  <el-divider class="login">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="用户名：" >
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="密码：">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox-group v-model="form.resource">
          <el-checkbox label="记住密码" name="type"></el-checkbox>
          <el-checkbox label="自动登录" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.native="goUrl('http://localhost:8080/study')" target="_blank">立即创建</el-button>
      </el-form-item>
    </el-form>
  </el-divider>
</template>
​
<script>
export default {
  data() {
    return {
      form: {
        name: '',
        password:'',
        resource: []
      }
    }
  },
  methods: {
   goUrl(url){
     window.location.href = url
   }
​
​
  }
​
}
</script>
​
<style scoped>
.login{
  margin-top: 500px;
}
</style>

4.2 注册界面

<template>
  <el-divider class="logon">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <!-- 用户名 -->
      <el-form-item label="用户名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="ruleForm.age"></el-input>
      </el-form-item>
      <!-- 所在地 -->
      <el-form-item label="所在地" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择所在地">
          <el-option label="上海" value="shanghai"></el-option>
          <el-option label="北京" value="beijing"></el-option>
          <el-option label="广州" value="beijing"></el-option>
          <el-option label="深圳" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <!-- 出生年月 -->
      <el-form-item label="出生年月" required>
        <el-col :span="18">
          <el-form-item prop="date1">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
                            style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <!-- 性别 -->
      <el-form-item label="性别 " prop="sex">
        <el-col :span="11">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-col>
      </el-form-item>
      <!-- 兴趣爱好 -->
      <el-form-item label="兴趣爱好" prop="type">
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="阅读" name="type"></el-checkbox>
          <el-checkbox label="运动" name="type"></el-checkbox>
          <el-checkbox label="户外" name="type"></el-checkbox>
          <el-checkbox label="音乐" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- 交友方式 -->
      <el-form-item label="交友方式 " prop="resource">
        <el-radio-group v-model="ruleForm.resource">
          <el-radio label="线上交友"></el-radio>
          <el-radio label="线下交友"></el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 活动形式 -->
      <el-form-item label="活动形式" prop="desc">
        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.native="goUrl('http://localhost:8080/login')" target="_blank">立即注册</el-button>
        <el-button @click@click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-divider>
</template>
​
<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'));
          } else {
            callback();
          }
        }
      }, 500);
    };
    return {
      ruleForm: {
        name: '',
        password: '',
        checkPass: '',
        age: '',
        region: '',
        date1: '',
        sex: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      //必选规则
      rules: {
        name: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {required: true, validator: validatePass2, trigger: 'blur'}
        ],
        age: [
          {required: true, validator: checkAge, trigger: 'blur'}
        ],
        region: [
          {required: true, message: '请选择所在地', trigger: 'change'}
        ],
        date1: [
          {type: 'date', required: true, message: '请选择出生年月', trigger: 'change'}
        ],
        sex: [
          {required: true, message: '请选择性别', trigger: 'change'}
        ],
        type: [
          {type: 'array', required: true, message: '请至少选择一个兴趣爱好', trigger: 'change'}
        ],
        resource: [
          {required: true, message: '请选择交友方式', trigger: 'change'}
        ],
        desc: [
          {required: true, message: '请填写活动形式', trigger: 'blur'}
        ]
      }
    };
​
  },
  methods: {
    goUrl(url){
      window.location.href = url
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
​
<style scoped>
.logon {
  margin-top: 500px;
}
​
/*.demo-ruleForm{*/
/*  background: url("../assets/logo1.png");*/
/*  width: 500px;*/
/*  height: 500px;*/
/*  background-size:100% 100%;*/
/*}*/
</style>

4.3 主界面

<template>
    <el-container style="height: 800px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>导航三</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="3-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="3-4">
              <template slot="title">选项4</template>
              <el-menu-item index="3-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>
​
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        <el-link href="http://localhost:8080/index" target="_blank" :underline="false">王小虎</el-link>
        </el-header>
​
        <el-main>
          <el-table :data="tableData">
            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
​
</template>
​
<script>
export default {
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(20).fill(item)
    }
  }
};
​
</script>
​
<style scoped>
​
​
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
​
.el-aside {
  color: #333;
}
</style>

4.4 个人中心

<template>
  <el-container>
    <el-header>
      <el-image :src="require('@/assets/logo1.png')"></el-image>
      <el-button type="warning" plain icon="el-icon-switch-button" @click.native="goUrl('http://localhost:8080/login')" target="_blank"></el-button>
    </el-header>
    <el-main>
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="item in imgList" :key="item.id">
          <img style="height: 100%;width: 100%" :src="item.idView" class="el-image">
        </el-carousel-item>
      </el-carousel>
    </el-main>
  </el-container>
​
</template>
​
<script>
export default {
  name: "index",
  data() {
    return {
      imgList: [
        {id: 0, idView: require("@/assets/al.jpg")},
        {id: 1, idView: require("@/assets/lyf.jpg")},
        {id: 2, idView: require("@/assets/jks.jpg")},
        {id: 3, idView: require("@/assets/bw.jpg")}
      ],
      screenWidth: 0
    };
  },
  methods: {
    goUrl(url) {
      window.location.href = url
    }
  }
}
</script>
​
<style scoped>
.el-image{
  width: 60px;
  height: 60px;
  float: left;
}
.el-button__icon {
  font-size: 60px;
  float: left;
  margin-left: 90%;
}
.el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
​
}
.el-carousel__item{
  height: 540px;
  width: 960px;
}
.el-carousel{
  height: 540px;
}
.el-carousel__item img {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 30px;
  margin: 0;
  indicator-position:outside;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
​
.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>

五、一些标签常用参数

5.1 input输入框

maxlength //最大输入长度
minlength //最小输入长度
show-word-limit//显示最大可输入字数值

5.2 select下拉框

disabled //是否禁用该选项，默认false

5.3 Switch 开关

active-color //打开的后的颜色
inactive-color //关闭的颜色
active-text //打开后的文本
inactive-text //关闭的
npm install --registry=https://registry.npmmirror.com
npm run dev
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/100327
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号