vue+elementUI

最新推荐文章于 2024-05-11 15:49:58 发布
最新推荐文章于 2024-05-11 15:49:58 发布
阅读量1.6k 收藏 8
点赞数 1
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guowaner37/article/details/130827535
版权

一、安装

  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
郭努力
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue基础（九）——ElementUI
pro1822的博客
09-01 3300
Vue基础（九）——ElementUI
使用vue3+element-ui plus 快速构建后台管理模板
m0_63622279的博客
10-12 9100
使用vue3+element-ui plus 快速构建后台管理模板，分为侧边栏，顶部栏和内容区域三个块，前两个抽离为组件，内容区域使用routerview跳转即可，组件通信使用父子组件的通信方式。element ui plus 主要使用了 container布局容器以及icon图标。
2024年Web前端最全附实战全过程！2024最强VUE+ElementUI管理项目来了！，2024年最新携程 前端面试
最新发布
2401_84412357的博客
05-11 412
资料过多，篇幅有限开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。[外链图片转存中…(img-ADZo1PR7-1715413774825)]资料过多，篇幅有限开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
从0-1创建Vue项目,整合ElementUI
m0_55627541的博客
04-22 3701
从0-1创建Vue2.0项目
Vue+Element UI
偷往事的人
03-25 129
Vue集成Element UI Element UI 后台管理系统主要的标签： el-container：构建整个页面框架 el-aside：构建左侧菜单 el-menu：左侧菜单内容，常用属性： :default-opened...
vue+element项目创建步骤
努力、拼搏、奋进
09-22 1104
vue+element项目创建步骤
基于Spring Boot+Vue+ElementUI的人力资源管理系统源码+项目说明+数据库+文档.zip
03-05
基于Spring Boot+Vue+ElementUI的人力资源管理系统源码+项目说明+数据库+文档.zip高分通过项目，已获老师指导。本项目是一套基于SpringBoot的人力资源管理系统，主要针对计算机相关专业的正在做毕设的学生和需要项目...
vue+elementui+tinymce
03-27
vue2+elementUI引入tinymce组件，富文本组件。tinymce文件夹放在public下，在使用页面引入组件即可。弹窗二次打开无法获取焦点问题，在标签加v-if，让富文本组件在弹窗关闭时销毁（原因由于el-dialog弹窗销毁为key...
简单了解Vue + ElementUI后台管理模板
10-15
ElementUI是基于Vue.js开发的一套优雅的组件库，它提供了丰富的UI组件，如表格、按钮、提示、下拉菜单等，用于快速构建中后台管理界面。在"Vue + ElementUI后台管理模板"中，这两个工具被结合起来，帮助开发者高效地...
基于vue + elementUI的管理系统模板
02-22
基于vue + elementUI的管理系统模板
基于SSM+vue+elementui婚纱摄影网站JAVA源码含论文答辩PPT
05-30
这是一款基于web的前后端分离JAVA+SSM和vue.js源码 基于B/S开发,包含毕业论文和答辩ppt,开发工具idea支持eclipse,MySQL,适合作为毕业设计使用，感兴趣的朋友可以下载看看. 功能包括管理员：首页、个人中心、用户管理...
vue实战入门进阶篇三：vue+elementui实现网站后台-系统框架搭建
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
03-17 1050
vue实战入门进阶篇四：vue+elementui实现网站后台-主页框架实现
Vue简单使用及整合elementui
Persistence___的博客
07-11 1165
在vue工程目录下下载离线vue引入工程中测试。
Vue -- vue+elementUI开发示例
天行健 君子以自强不息，地势坤 君子以厚德载物。
05-22 2211
1. Vue--vue+elementUI开发示例 elementUI官网 1.1 创建工程 1、创建一个名为 vue-ele-ui 的工程 vue init webpack vue-ele-ui 2、安装依赖， 我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件 #进入工程目录 cd vue-ele-ui #安装vue-routern npm install vue-router --save-dev #安装element-ui npm i
VUE+ElementUI搭建框架-4
weixin_43859439的博客
04-14 545
上一篇（VUE+ElementUI搭建框架-3）文章完善了登录页面功能，主页面搭建基本完成，接下来开始完成左侧菜单、头部菜单和菜单页区域。注：之后的功能需要用到vuex，想了解的朋友可以先去看一看有个初步的了解。
推荐6款Vue管理后台框架，收藏好，留备用
web前端开发
11-04 2456
作者：jeffrey_hjf来源 |https://www.jianshu.com/p/0f41bfe211a8Vue.js 是一个目前比较流行的前端框架，在业界也算很...
Element Plus 实例详解（二）___Button 按钮
热门推荐
逆境清醒的博客
03-25 1万+
Element Plus Basic 基础组件里Button 按钮，是常用的操作按钮，提供了Button 按钮的基础用法、Button 按钮禁用状态、链接按钮、文字按钮、图标按钮、按钮组等功能，本篇里我们一起来试用一下Element Plus的 Button 按钮组件。可以自定义按钮颜色。系统将自动计算 hover 和 active 颜色。实现效果：
Vue开发实例目录总索引
编程界明世隐的博客
12-20 1万+
Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ >即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！
Vue + ElementUI 制作后台管理类项目
Ljj9889的博客
04-17 5630
历时2周左右，我终于完成了我的毕业项目。虽说页面不是特别美观，但是对于一个后端开发人员来说，我觉得已经是很不错了。今天主要分享前端页面的实现，以及如何对接后端的接口，先看项目效果。 一、页面展示 登录界面 管理界面 数据操作 二、代码展示 登录页代码 <template> <div class="login_page"> <div class="logo"> <div class="txt">九江</d
VUE+elementui
05-23
Vue一个流行的JavaScript框架，用于构建用户界面。而Element UI是一个Vue组件库，提供了丰富的UI组件和工具，可以帮助我们快速构建美观、易用的Web应用程序。 使用Vue和Element UI可以让我们更快速地搭建Web应用程序，因为Element UI提供了大量的基础组件，如按钮、表单、弹框等，可以直接拿来使用，而不需要手写复杂的HTML和CSS。同时，Element UI还提供了许多实用的工具和插件，如表格、分页、日期选择器等，可以让我们快速实现各种常见的功能。 总之，Vue和Element UI是非常实用的Web开发工具，可以让我们更高效地开发出高质量的Web应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值