深入解析与实践：基于VUE-cli的Element-UI应用指南

news2025/2/22 9:13:15

一、前言

​ 本文介绍 Element-UI快速入门，基于vue-cli构建的基础项目。关于 vue-cli 构建项目的详细流程，可参考博文：
使用vue脚手架构建项目

二、简介

element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建。

Element-UI官方站点： https://element.eleme.cn/#/zh-CN

三、Element-UI使用

1、命令行方式安装库

  1. 创建一个新项目 element-ui-project

    在这里插入图片描述

  2. 当前项目下打开终端, 安装依赖包 ,执行命令npm i element-ui -s,等待安装完成后，打开package.json，可以看到

    在这里插入图片描述

  3. 打开 main.js , 导入Element-UI 相关资源.

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

Vue.config.productionTip = false

//导入组件库
import ElementUI from 'element-ui'

//导入组件库相关样式
import "element-ui/lib/theme-chalk/index.css"

//配置vue插件，将EI安装到vue上
Vue.use(ElementUI)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

  4. 测试

    • 打开Element-UI官网，找到Element-UI的样式按钮

      在这里插入图片描述

    • 复制到app.vue的template下

      <template>
  <div id="app">
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row> 

    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

    • 打开页面，测试

      在这里插入图片描述

2、工程改造

  1. 删除components 目录下的 HelloWord.vue组件

  2. 删除App.vue中的部分内容，修改为如下

    <template>
  <div id="app">
  </div>
</template>

<style>
</style>

  3. 删除router文件下的路由文件 index.js部分内容，修改为如下

    import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = []

const router = new VueRouter({
 routes
})

export default router

  4. 删除views目录下的 About.vue 与 Home.vue

  5. 最终呈现为空界面

    在这里插入图片描述

3、安装axios

  1. 终端停止项目，使用 ctrl + c，出现下面提示：

    在这里插入图片描述

    输入y，回车

  2. npm安装：使用npm下载axios包，终端输入指令npm i axios

    在这里插入图片描述

  3. 在main.js文件中导入axios 相关资源

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

Vue.config.productionTip = false

//导入组件库
import ElementUI from 'element-ui'

//导入组件库相关样式
import "element-ui/lib/theme-chalk/index.css"

//引入axios
import axios from 'axios'

//配置vue插件，将EI安装到vue上
Vue.use(ElementUI)

//vue使用axios，需要配置属性
Vue.prototype.axios = axios;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

四、简单案例

1、需求

通过Dialog制作一个登陆弹窗，包含：

  • 输入框：用户名、密码
  • 登录按钮

如下图所示：

在这里插入图片描述

2、代码演示

  1. Dialog对话框组件

    在官网找到对应的 组件位置

    在这里插入图片描述

  2. 创建Login.vue组件

    • 在components下创建Login.vue

    • 添加三大模块（template、script、style），并将官网组件的代码复制进来，修改为自己想要的样式

    <template>
<el-dialog title="登录" :show-close="false" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="用户名" :label-width="formLabelWidth">
        <el-input autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogFormVisible = false">登录</el-button>
    </div>
  </el-dialog>
</template>

  
  <script>
    export default {
      data() {
        return {
          dialogFormVisible: true,
          formLabelWidth: '120px'
        };
      }
    };
  </script>

  <style scoped></style>

  3. 配置路由，修改index.js

    import Vue from 'vue'
import VueRouter from 'vue-router'

import Login from "@/components/Login.vue"

Vue.use(VueRouter)

const routes = [
  //访问 /，也跳转到login
  {
    path:'/',
    redirect: 'login' //重定向login
  },
  //登录
  {
    path:'/login',
    name:'login',
    component:Login
  }
]

const router = new VueRouter({
  routes
})

export default router

  4. 修改App.vue

    <template>
 <div id="app">
   <!-- router-view 的作用是根据访问的路径,渲染路径匹配到的视图组件 -->
   <router-view></router-view>
 </div>
</template>

<style>
</style>

  5. 编写登录功能，修改Login.vue

    • 双向数据绑定

    • data中定义数据，修改script部分

        <script>
    export default {
      data() {
        return {
          dialogFormVisible: true,
          formLabelWidth: '120px',
          user:{username:"", password:""},
        };
      }
    };
  </script>

    • v-model绑定视图和模型，修改template部分，并把登录按钮的点击事件修改为login方法

      <template>
<el-dialog title="登录" :show-close="false" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="用户名" v-model="user.username" :label-width="formLabelWidth">
        <el-input autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" v-model="user.password" :label-width="formLabelWidth">
        <el-input autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="login">登录</el-button>
    </div>
  </el-dialog>
</template>

    • 编写login方法，使用axios的get发送请求

      • 找到axios对应的方法部分

        在这里插入图片描述

      • 编写代码

  <script>
  export default {
    data() {
      return {
        dialogFormVisible: true,
        formLabelWidth: "120px",
        user: { username: "", password: "" },
      };
    },
    methods: {
      //登录的方法
      login() {
        //定义常量保存url
        const url = "";
  
        //发送请求
        this.axios.get(url, {
          //携带的参数
          params: {
            username: this.user.username,
            password: this.user.password,
          },
        })
          .then((resp) => {
            console.log(resp);
            alert("登录成功");
            //成功 关闭对话框
            this.dialogFormVisible = false;
  
            //进行页面跳转,跳转到首页,在前端进行页面跳转 必须使用路由.
            this.$router.push('index'); 
          })
          .catch((error) => {
            //登录失败 提供消息提示
            this.$message.error("对不起!登录失败!");
          });
      },
    },
  };
  </script>

3、使用postman搭建mockserver

  1. 创建mockserver

    在这里插入图片描述

  2. 创建伪服务

    在这里插入图片描述
    点击创建，即可完成创建过程。

  3. 找到自动生成的url复制

在这里插入图片描述

  1. 修改上面组件中请求的url

    <template>
    <el-dialog
      :show-close="false"
      title="用户登录"
      :visible.sync="dialogFormVisible"
    >
      <el-form>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="user.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="user.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
  
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="login">登 录</el-button>
      </div>
    </el-dialog>
  </template>
  
  <script>
  export default {
    data() {
      return {
        dialogFormVisible: true,
        formLabelWidth: "120px",
        user: { username: "", password: "" },
      };
    },
    methods: {
      //登录的方法
      login() {
        //定义常量保存url
        const url = "https://b8f48957-0c66-4905-89b8-69e270594660.mock.pstmn.io/login";
  
        //发送请求
        this.axios(url, {
          //携带的参数
          params: {
            username: this.user.username,
            password: this.user.password,
          },
        })
          .then((resp) => {
            console.log(resp);
            alert("登录成功");
            //成功 关闭对话框
            this.dialogFormVisible = false;
  
            //进行页面跳转,跳转到首页,在前端进行页面跳转 必须使用路由.
            this.$router.push('index'); 
          })
          .catch((error) => {
            //登录失败 提供消息提示
            this.$message.error("对不起!登录失败!");
          });
      },
    },
  };
  </script>
  
  <style scoped></style>

    注意：这里需要修改为你自己mockserver生成的url

4、测试

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1434429.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

车位检测，YOLOV8,OPENCV调用

车位检测，YOLOV8,OPENCV调用

车位检测YOLOV8NANO,opencv调用 车位检测&#xff0c;YOLOV8NANO&#xff0c;训练得到PT模型&#xff0c;然后转换成ONNX&#xff0c;OPENCV的DNN调用&#xff0c;支持C,PYTHON,ANDROID
阅读更多...
asqlcell，一个超强的 Python 库！

asqlcell，一个超强的 Python 库！

前言 大家好&#xff0c;今天为大家分享一个超强的 Python 库 - asqlcell。 Github地址&#xff1a;https://github.com/datarho/asqlcell Python asqlcell 是一个用于执行异步数据库操作的开源库&#xff0c;它允许开发者通过异步的方式与数据库进行交互&#xff0c;提高了数…
阅读更多...
【数据分享】1929-2023年全球站点的逐年平均能见度（Shp\Excel\免费获取）

【数据分享】1929-2023年全球站点的逐年平均能见度（Shp\Excel\免费获取）

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、能见度等指标&#xff0c;说到气象数据&#xff0c;最详细的气象数据是具体到气象监测站点的数据&#xff01; 之前我们分享过1929-2023年全球气象站点的逐年平均气温数据、逐年最高气温数据…
阅读更多...
医学答案怎么查找？3个受欢迎的搜题分享了 #其他#职场发展#职场发展

医学答案怎么查找？3个受欢迎的搜题分享了 #其他#职场发展#职场发展

学习工具是我们的得力助手&#xff0c;帮助我们更好地组织学习内容和时间。 1.南北题库 这是一个网站 完全免费,主要的特点就是题库全面丰富,涵盖计算机、外语、论文撰写、注册会计师等。并且后续还会继续扩展题库,题目分类非常详细,体界面清晰简洁。 有举一反三功能,搜一道…
阅读更多...
【芯片设计- RTL 数字逻辑设计入门 6 -- 带同步复位的D触发器 RTL实现及testbench 验证】】

【芯片设计- RTL 数字逻辑设计入门 6 -- 带同步复位的D触发器 RTL实现及testbench 验证】】

文章目录 带同步复位的D触发器Verilog 代码testbench 代码编译及仿真问题小结带同步复位的D触发器 同步复位 ：复位只能发生在在clk信号的上升沿，若clk信号出现问题，则无法进行复位。 Verilog 代码 // timescale ins/1nsmodule flopr (input rstn,input clk,input[3:0]…
阅读更多...
Linux--- vim详解

Linux--- vim详解

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 “学如逆水行舟&#xff0…
阅读更多...
C#监听QQ消息自动回复-QQ自动化

C#监听QQ消息自动回复-QQ自动化

整理 | 小耕家的喵大仙 出品 | CSDN&#xff08;ID&#xff1a;lichao19897314&#xff09; Q Q | 978124155 关于项目背景和微信自动化学习介绍 因为前面写了很多关于微信自动化的文章&#xff0c;网上有一位网友说他是做培训行业的&#xff0c;有时候除了微信对接客户还需要…
阅读更多...
在Vue中如何动态绑定class和style属性

在Vue中如何动态绑定class和style属性

在Vue中&#xff0c;动态绑定class和style属性是我们经常遇到的需求。这个功能允许我们根据不同的条件来动态改变元素的样式&#xff0c;让我们的应用更加灵活和富有交互性。在本篇博客文章中&#xff0c;我将带你深入探索在Vue中如何实现这一功能。 首先&#xff0c;让我们了…
阅读更多...
C语言内存函数：memcpy、memcat、memmove介绍和模拟实现（实用性高，建议三连收藏）

C语言内存函数：memcpy、memcat、memmove介绍和模拟实现（实用性高，建议三连收藏）

目录 1.memcpy函数 1.1函数介绍 1.2函数示范使用 1.3函数的模拟实现 1.4补充 2.memmove函数 2.1函数介绍 2.2函数的使用示范 2.3函数的模拟实现 3.memcmp(内存比较函数&#xff09; 3.1函数介绍 3.2函数的示范使用&#xff0c;有趣的例子 4.函数补充memset(内存…
阅读更多...
SpringSecurity（18）——OAuth2授权码管理

SpringSecurity（18）——OAuth2授权码管理

AuthorizationCodeServices public interface AuthorizationCodeServices {//为指定的身份验证创建授权代码。String createAuthorizationCode(OAuth2Authentication authentication);//使用授权码。OAuth2Authentication consumeAuthorizationCode(String code)throws Invali…
阅读更多...
探索设计模式的魅力：外观模式简化术-隐藏复杂性，提供简洁接口的设计秘密

探索设计模式的魅力：外观模式简化术-隐藏复杂性，提供简洁接口的设计秘密

设计模式专栏&#xff1a;http://t.csdnimg.cn/U54zu 目录 引言&#xff1a;探索简化之路 一、起源和演变 二、场景案例分析 2.1 不用模式实现&#xff1a;用一坨坨代码实现 2.2 问题 2.3 外观模式重构代码 定义 界面 接口 利用外观模式解决问题步骤 外观模式结构和说明 重构…
阅读更多...
C语言——Q/编译和链接

C语言——Q/编译和链接

目录 一、翻译环境和运⾏环境 二、翻译环境 1、预处理&#xff08;预编译&#xff09; 2、编译 2.2.1 词法分析&#xff1a; 2.2.2 语法分析 2.2.3 语义分析 3、汇编 4、链接 三、运行环境 一、翻译环境和运行环境 在ANSI C 的任何⼀种实现中&#xff0c;存在两个不…
阅读更多...
哪种安全数据交换系统，可以满足信创环境要求？

哪种安全数据交换系统，可以满足信创环境要求？

安全数据交换系统是一种专门设计用于在不同网络环境之间安全传输数据的技术解决方案。这类系统确保数据在传输过程中的完整性、机密性和可用性&#xff0c;同时遵守相关的数据保护法规和行业标准。 使用安全数据交换系统的原因主要包括以下几点&#xff1a; 1、数据保护&#…
阅读更多...
PHP安装后错误处理

PHP安装后错误处理

一&#xff1a;问题 安装PHP后提示错误如下 二&#xff1a;解决 1&#xff1a;Warning: Module mysqli already loaded in Unknown on line 0解决 原因&#xff1a;通过php.ini配置文件开启mysqli扩展的时候&#xff0c;开启了多次 解决&#xff1a;将php.ini配置文件中多个…
阅读更多...
Vue3开发环境搭建和工程结构(一)

Vue3开发环境搭建和工程结构(一)

一、NVM和Node.js安装 NVM 是 Node Version Manager&#xff08;Node 版本管理工具&#xff09;的缩写&#xff0c;是一个命令行工具&#xff0c;用于管理和切换到不同版本的 Node.js。 1、前往 nvm-windows 仓库&#xff0c;然后单击立即下载 2、下载最新版本 3 、按照安装向…
阅读更多...
MMLAB的实例分割算法mmsegmentation

MMLAB的实例分割算法mmsegmentation

当谈及实例分割时&#xff0c;人们往往只会提到一些早期的经典算法&#xff0c;比如 PSP-Net、DeepLabv3、DeepLabv3 和 U-Net。然而&#xff0c;实例分割领域已经在过去的五六年中蓬勃发展&#xff0c;涌现出许多新的算法。今天&#xff0c;让我们一起探索这个算法库&#xff…
阅读更多...
基于单片机的智能寻光小车设计

基于单片机的智能寻光小车设计

摘 要&#xff1a;随着物联网技术的飞速发展和逐渐成熟&#xff0c;以单片机为主的智能小车在巡查、仓储、探险及国防等领域得到广泛应用。本文设计了一种基于单片机的智能寻光小车&#xff0c;该小车以STC89C52RC 芯片为设计核心&#xff0c;结合光敏传感器和超声波传感器等多…
阅读更多...
jmeter-问题一：关于线程组，线程数，用户数详解

jmeter-问题一：关于线程组，线程数，用户数详解

文章目录 jmeter参数介绍1.线程数2.准备时长(Ramp-up)3.循环次数4.same user on each iteratio5.调度器 场景一&#xff1a;当你的线程组中线程数为1,循环为1场景二&#xff1a;当你的线程组中线程数为2&#xff0c;循环为1场景三&#xff1a;当你的线程组中线程数为1&#xff…
阅读更多...
springboot158基于springboot的医院资源管理系统

springboot158基于springboot的医院资源管理系统

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…
阅读更多...
ResizeObserver的使用

ResizeObserver的使用

这篇说下ResizeObserver API。ResizeObserver接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。 ResizeObserver避免了通过回调函数调整大小时&#xff0c;通常创建的无限回调循环和循环依赖项。它只能通过在后续的帧中处理 DOM 中更深层次的元素来做到这一点…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023