vue--elementUI

已于 2023-06-13 16:29:24 修改
阅读量1.2k 收藏
点赞数
分类专栏： vue 文章标签： vue
于 2022-01-23 11:19:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43470725/article/details/122648795
版权

官网：https://element.eleme.io/#/zh-CN/component/installation
https://element-plus.org/zh-CN/guide/installation.html#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8
安装vue项目：https://blog.csdn.net/qq_43470725/article/details/122637567
在这里插入图片描述

cnpm install vue-router --save-dev
npm i element-ui -S
cnpm install
cnpm install sass-loader node-sass --save-dev

在这里插入图片描述

若是下载后运行报错，原因可能是saas版本太高了：
在这里插入图片描述
改版本后
在这里插入图片描述
重新cnpm install

使用elementUI写vue网页 代码演示

在这里插入图片描述

首先创建views包用于存视图组件

main.vue视图

<template>
  <h1>首页</h1>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

login.vue视图

<template>
  <div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" 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>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    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();
          }
        }
      }, 1000);
    };
    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.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: '',
        checkPass: '',
        age: ''
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        age: [
          { validator: checkAge, trigger: 'blur' }
        ]
      },

    };
  },
  methods: {
    submitForm(formName) {
      //表单验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //使用vue-router 路由到指定页面，该方式称之为编程式导航
          // alert('submit!');
          this.$router.push("/main");
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>

</style>

对login.vue视图分析

<template>
  <div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" 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>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

这一堆代码表示的是html的绘图，全部复制与element-ui官网：
https://element.eleme.io/#/zh-CN/component/form

在这里插入图片描述

然后这两句有事件绑定，会在script里面有方法对应

<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>

然后下面这整个也是复制过来的：

<script>
export default {
  name: "Login",
  data() {
    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();
          }
        }
      }, 1000);
    };
    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.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: '',
        checkPass: '',
        age: ''
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        age: [
          { validator: checkAge, trigger: 'blur' }
        ]
      },

    };
  },
  methods: {
    submitForm(formName) {
      //表单验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //使用vue-router 路由到指定页面，该方式称之为编程式导航
          // alert('submit!');
          this.$router.push("/main");
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

分析这里的data()方法：返回表单里面的值

data() {
    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();
          }
        }
      }, 1000);
    };
    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.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: '',
        checkPass: '',
        age: ''
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        age: [
          { validator: checkAge, trigger: 'blur' }
        ]
      },

    };
  },

看到这三个方法就是前端验证方法，会在后面被return里面的rules里面的属性调用：
在这里插入图片描述
在这里插入图片描述

最后看这里的methods,是验证表单是否有效，和上面视图层绑定的方法submitForm

这里使用this.$router.push(“/main”);跳转网页

  methods: {
    submitForm(formName) {
      //表单验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //使用vue-router 路由到指定页面，该方式称之为编程式导航
          // alert('submit!');
          this.$router.push("/main");
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}

路由js的配置

import Vue from 'vue'
import Router from 'vue-router'

import Main from "../views/Main"
import Login from "../views/Login"

Vue.use(Router);

export default new Router({
    routes: [
      {
        path: '/main',
        //注意component不要写成components了！！！！
        component: Main
      },
      {
        path: '/login',
        component: Login
      }
    ]
});

在路由里面将视图组件的网页路径配置好

main.js主入口js里面new出vue对象并绑定主入口App.vue组件然后引入路由和ElementUI

参考：https://element.eleme.io/#/zh-CN/component/quickstart
在这里插入图片描述

import Vue from 'vue'
import App from './App'

import router from './router'

//参考：https://element.eleme.io/#/zh-CN/component/quickstart
import ElementUI from 'element-ui'
//导入css，需要安装cnpm install sass-loader node-sass --save-dev
import 'element-ui/lib/theme-chalk/index.css'

// 安装路由
Vue.use(router);
Vue.use(ElementUI);

new Vue({
  el: '#app',
  router,
  render: h => h(App)//配置ElementUI参考：https://element.eleme.io/#/zh-CN/component/quickstart
})

App.vue组件主入口引出路由视图

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

<script>
export default {
  name: 'App',
}
</script>

这个就是路由视图的引出：

 <router-view></router-view>

测试：
运行

npm run dev

在这里插入图片描述
后点击提交，将跳转到首页！！！
在这里插入图片描述

快速上手 Vue 和 Element-UI 组件库
程序猿追的博客
12-19 5万+
vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架；Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。 Vue.js提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。 其目标是通过尽可能简单的API实现响应式的数据绑定和可组合的视图组件。
Vue与Element-UI
热门推荐
qq_42814867的博客
12-06 2万+
浅谈Vue.jsVue.jsVue.js诞生Vue.js三大核心MVVMMVVVM模型vue实现的MVVM模型组件化组件组件与数据虚拟DOM事件事件监听原生JS与 Vue.js实例实现效果代码对比事件过程Vue.js优点其他注意点Element-UIGUI 工具数据绑定消息相应 Vue.js Vue.js是一套用于构建用户界面的渐进式框架。 渐进式是指，它既可以作为一个库使用，又可以作为一个框架使用 ，两个之间自如选择。库是不具有侵略性，在原有项目可以引入作为第三方依赖使用；框架是具有侵入性的，整个项目是
Element UI 组件库详解【Vue】
最新发布
m0_52861684的博客
11-21 5291
Element UI 组件库，从安装到使用详解。
Vue-ElementUI
lihui61357457的博客
03-01 417
详情可见 1.什么是elementUI? ElementUI是饿了么前端团队推出的一款基于Vue的桌面端UI框架 大白话: 和Bootstrap一样对原生的HTML标签进行了封装, 进行了美化, 让我们能够专注于业务逻辑而不是UI界面 2.elementUI使用 https://element.eleme.cn/#/zh-CN/component/installation --> <!-- 1.elementUI优化 默认情况下无论我们有没有使用到某个组件, 在打包的时候都会将element
vue+elementui
我是泛滥
08-07 643
创建vue+elementui 项目之前开发环境： node.js #查看我博客node.js 安装 npm #安装npm install -g cnpm --registry=https://registry.npm.taobao.org` vue-cli #安装cnpm install vue-cli -g 创建vue-element-ui工程， 我们需要安装 vue-router 、element-ui 、sass-loader 、node-sass #初始化vue项目 vue init w
Vue进阶——Element Ui
秋书一叶的博客
12-07 3042
element ui 及 element plus的简单介绍及快速上手
【Vue】Vue集成Element-UI框架
颜颜yan_的博客
03-23 2435
点击进入Element-UI 是一套基于 Vue 2.0 的桌面端组件库，由饿了么前端团队推出并进行开源。它提供了丰富的 PC 端组件，简化了常用组件的封装，大大降低了开发难度，使开发人员能够轻松构建功能强大、风格统一的页面。Element-UI 与 Vue.js 集成非常紧密，开发者可以轻松地将 Element-UI 的组件嵌入到他们的 Vue.js 应用程序中。今日之学习篇章已然落笔，愿诸君有所收获。🤩倘若您对此深感兴趣，不妨关注此专栏，新知将持续涌现，与您共舞思维的华章。😎。
vue-nodejs-elementUI-mysql-express-demo::star:vue+nodejs前后端分离项目，学习使用，包含基本的入门操作。包括从开始创建项目到最后部署的实现过程及过程中遇到的一些问题整理
05-30
vue-nodejs-elementUI-mysql-express-demo vue+nodejs前后端分离项目，学习使用，包含基本的入门操作。包括从开始创建项目到最后部署的实现过程及过程中遇到的一些问题整理。 项目预览地址： 评论讨论地址： 数据库...
vue-elementUI后台管理系统 v1.0.zip
04-02
在这个“vue-elementUI后台管理系统 v1.0.zip”压缩包中，包含了两个主要文件：`说明.htm`和`vueproject`。`说明.htm`可能是一个包含系统介绍、安装指南或者使用教程的HTML文档，帮助用户更好地理解和使用这个后台...
vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件
05-29
Vue-Sku-Form 是一个专为电商领域设计的前端组件，它基于 Vue.js 框架和 ElementUI 组件库，旨在提供一个高度可配置的 SKU（Stock Keeping Unit，库存单位）表单生成器。在电商网站中，SKU 通常用于唯一标识商品的...
vue-elementui-admin
03-20
在这个"vue-elementui-admin"项目中，开发者可以利用Vue.js的生命周期钩子函数、计算属性、指令等功能，结合ElementUI的组件，快速构建出功能完备的后台管理界面。例如，使用`v-for`指令来循环渲染列表数据，使用`v-...
vue+elementUI
09-07
vue+elementUI 前端框架,感兴趣的可以下载下来看一下,要安装node.js,后端要安装 nginx
vue+elementUI 框架模板
05-06
该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli@3.2.3脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
VUE和ElementUI源码学习
01-24
这个是vue和elementui打造的element-Admin模板，适合web前端直接引用和学习
elementUI+vue项目搭建
12-10
elementUI+vue项目搭建 一条龙服务.
vue-el-calendar.zip Vue -ElementUI 日历控件
06-21
vue-el-calendar.zip Vue -ElementUI 日历控件 以vue为承载容器，使用elementUI为组件，css3搭配色彩，样式较为美观，满足基本需求，无第三方依赖环境，体积几百K 在vue+elementUI的项目中，丢入即可运行出来
前端开发模块VUE-Element UI学习笔记
旺仔Sec&blog
08-12 1万+
基于 Vue 的一套桌面端组件库，提前封装好的 UI 模板，方便开发者快速搭建一个网站前端界面。官网：https://element.eleme.cn/
vue和elementui是什么关系
苏杭
06-28 1万+
## vue简介 Vue 是一套用于构建用户界面的渐进式 JavaScript (主张最少)框架 ，开发者只需要关注视图层， 它不仅易于上手，还便于与第三方库或既有项目的整合。是基于MVVM（Model-View-ViewModel 即：视图层-视图模型层-模型层）设计思想。提供MVVM数据双向绑定的库，专注于UI层面。 渐进式框架：就是一开始不需要你完全掌握它的全部功能特性，可以后续逐步增加功能。没有多做职责之外的事情 ##Element-Ui简介 element是基于vue...
vue 使用elementUI
跑路羊崽丶的博客
02-16 176
cd到项目根目录下，或者 输入命令 cnpm install element-ui main.js 中引入 import Element from 'element-ui' import "element-ui/lib/theme-chalk/index.css" Vue.use(Element) 然后点这去官网看看需要什么组件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值