程序员经验分享-hwhale

vue2引入Element UI组件去创建新页面的详细步骤--项目阶段2

2023-11-12

目录

一、Element UI介绍

Element UI的特点：

二、下载配置Element UI

（零）创建vue项目

（一）下载Element UI依赖  

（二）全局文件main.js中引入Element UI

三、删除多余的东西 

（一）删除App.vue多余的 

（二）删除多余的页面 

（三）删除router路由多余的 

四、新建vue页面

（一）新建一个vue的文件

（二）复制组件到vue文件中 

五、把新建vue文件添加进去路由中 

六、运行访问

读者手册（必读）_csdn文章评分怎么看_云边的快乐猫的博客-CSDN博客

一、Element UI介绍

Element UI是一个基于Vue.js的组件库，提供了一套丰富、美观、易用的UI组件，包括表单、弹窗、导航、布局、数据展示等各种常用组件。Element UI旨在帮助开发者快速构建高质量的Web应用程序，使得前端开发更加高效和便捷。

Element UI的特点：

1.丰富的组件库：Element UI提供了大量的UI组件，覆盖了常用的各种组件需求，包括表单、按钮、菜单、对话框、表格、分页、图片等。

2.简洁美观的设计：Element UI的设计风格简洁、现代、美观，使得应用程序的界面更加美观、易用和专业。

3.易于使用：Element UI的组件易于使用，文档详细，提供了示例和在线演示，使得开发者可以更快地上手和使用。

4.可定制性：Element UI的组件支持自定义主题和样式，可以根据应用程序的需要自定义风格和样式。

5.国际化支持：Element UI支持多种语言，包括中文、英文、日文、韩文等，方便全球化应用程序的开发。

总的来说，Element UI是一个非常优秀的Vue.js组件库，可以帮助开发者快速构建高质量的Web应用程序，提高前端开发的效率和质量。

额外：vue3引入Element plus的文章：

vue3引入Element plus的详细步骤_云边的快乐猫的博客-CSDN博客

二、下载配置Element UI

（零）创建vue项目

vue3和vue2的介绍和两种创建方式（cli和vite）_云边的快乐猫的博客-CSDN博客

（一）下载Element UI依赖  

1.项目终端命令下载Element UI的命令

ps：终端执行注意要cd切换到当前的项目路径里面，就是打开src的上一层 

npm i element-ui -S --legacy-peer-deps

（二）全局文件main.js中引入Element UI

2.Element UI官网快速上手引用原生组件和样式到main.js文件中

ps：就是把

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端知识

软件操作

Element UI

vue2

路由注册

vue2引入Element UI组件去创建新页面的详细步骤--项目阶段2 的相关文章

  • vscode下载和安装教程和配置中文插件（超详细）

    目录 前言必读 一 下载步骤 二 安装步骤 vscode安装设置完成 三 安装中文插件 额外的 四 设置vue高亮代码 额外的 前言必读 读者手册 必读 云边的快乐猫的博客 CSDN博客 前言 vscode主要是用于前端的编程工具 其他编程

  • ant-vue table换页以后选中的数据无法记住前一页已勾选的数据

    ant vue table换页以后选中的数据无法记住前一页已勾选的数据 解决方法 使用组件自带的onSelect事件和onSelectAll事件来记录 HTML Markup

  • SSR是什么？Vue中怎么实现？

    一 是什么 Server Side Rendering 称其为SSR 意为服务端渲染 指由服务侧完成页面的 HTML 结构拼接的页面处理技术 发送到浏览器 然后为其绑定状态与事件 成为完全可交互页面的过程 先来看看Web3个阶段的发展史 传

  • 解决element ui select下拉框不回显数据问题

    最近在做一个项目 项目的后端是地址 https github com wangyuanjun008 wyj springboot security git 前端地址是 https github com wangyuanjun008 wyj

  • URL 链接中 井号#、问号?、连接符& 分别有什么作用？

    井号 表示网页中的一个位置 被称之为锚点 常用于某个网页间不同位置的跳转 简单的说就是在一个网页中 URL 不变的情况下 通过添加 buy 的字符在 URL 最后可以跳转到当前网页中已经定义好的锚点 id buy 位置 同样 的改变也会增加

  • Vite的原理

    背景 这里的背景介绍会从与Vite紧密相关的两个概念的发展史说起 一个是JavaScript的模块化标准 另一个是前端构建工具 共存的模块化标准 为什么JavaScript会有多种共存的模块化标准 因为js在设计之初并没有模块化的概念 随着

  • 传统后端程序不使用Node.JS依然要搞Element UI

    概述 作为一个Java重度使用患者 后端程序员掌握一些前端知识是必备技能 Html CSS JS三大语言后端玩起来也得是溜得很 不过现在前端技术发展的速度简直做上了飞机 后端程序员自己首先要保障后端技术不被拉下 再想回头学学前端技术 没想到

  • Vue项目中怎么配置在src文件下@别名

    方法一 在实际项目中 我们通常可以将src目录设置为 目录 这样引入文件时候可以一目了然而且使用起来非常方便 可以提高我们的开发效率 代表的是src文件夹 这样将来文件过多 找的时候也方便 而且也还有提示 本文介绍如何在实际项目中使用 作为

  • vue回车事件

    一 需求 需求 登录页面在输入密码后 按回车键 Enter 触发登录 二 实现 部分代码 重点事件 keyup enter native 指的是回车监听事件 举例 keyup enter native submitForm ruleForm

  • 前端常用工具库方法整理

    欢迎点击领取 前端面试题进阶指南 前端登顶之巅 最全面的前端知识点梳理总结 前言 在闲余的时间整理一份我们可能用到的前端工具库方法 依赖库 名称 cropperjs 图片裁剪 exif js lrz 图片旋转问题 html2canvas d

  • Vue2开发插件并发布到npm

    Vue3 TS Vite开发插件并发布到npm 目标 创建vue amazing selector下拉框组件 并发布到npm 效果如下图 默认时样式 禁用时样式 创建vue项目 vue create vue amazing selector

  • element ui表单验证失效原因分析

    1 model 和 v model 需要区分开 model是element ui中的一个属性 而v model才是双向绑定 多表单验证时 model form 中的值不一样 2 prop

  • Element ui中menu组件(el-menu/el-menu-item/el-submenu/template) 层级结构和用法

    此篇文章写下的时间是2020年 所以如今Element UI都更新了不知道多少版了 肯定会有些许变化 请勿完全照搬照抄 虽然可能这部分代码没什么大的变动 但还是要以官方文档为准 此文仅仅是借鉴 理解具体思路 然后再按照官方的例子来应用到自己

  • el-table列筛选filter-method多次调用问题

    filter method filter method 数据过滤使用的方法 如果是多选的筛选项 对每一条数据会执行多次 任意一次返回 true 就会显示

  • vue从入门到入土--------综合案例

    目录 vue cli 组件库 axios 拦截器 proxy 跨域代理 用户列表案例 总结 vue cli 1 什么是 vue cli vue cli 俗称 vue 脚手架 是 vue 官方提供的 快速生成 vue 工程化项目的工具 vue

  • vue2的了解

    目录 前言 一 性能优化 二 vue 1 keep live 2 vuex 3 v once 4 mixin 5 v if和v show 6 防抖和节流 7 promise 8 freez冻结数据 9 http状态码 10 重绘和回流 11

  • element ui 对话框el-dialog关闭事件,清空填写的数据

    原文链接 https blog csdn net rickiyeat article details 76595390 通常会有需求 在关闭弹框后需要清空填写的数据 这时候就需要关闭事件了

  • element ui backTop源码解析-逐行逐析

    backTop 回到顶部 组件简介 基础概念 返回页面顶部的操作按钮 代码

  • vue项目日期处理day.js

    dayjs安装 1 npm 安装 npm install dayjs save 2 项目使用 import dayjs from dayjs ES 2015 dayjs format 使用介绍 1 秒 获取或设置秒 接受0到59的数字 如果

  • 前端push.js桌面通知库

    push js 官网 https pushjs org 安装 1 npm 安装方式 npm install push js save 2 script引入方式 使用 1 获取用户许可 用户需要先授予权限才能发送通知 Push Permiss

随机推荐

  • 支付宝支付回调，回调日志记录

    1 支付报支付回调方法 public function aliPayNotify try app PayService alipay collect app gt verify collectData collect gt all 获取支付

  • 【Zabbix实战之运维篇】Zabbix监控平台的简单性能调优

    Zabbix实战之运维篇 Zabbix监控平台的简单性能调优 一 Zabbix性能优化介绍 1 造成Zabbix服务器变慢原因 2 Zabbix性能调优的方法 二 检查Zabbix服务器的资源占用情况 1 检查Zabbix各组件容器的资源占

  • [转载]YUV格式纹理贴图的例子

    frameworks native opengl tests gl2 yuvtex gl2 yuvtex cpp 是Android提供的yuv格式纹理贴图的例子 前面先申请存放纹理数据的buffer yuvTexBuffer new Gra

  • 根据哈夫曼树构建哈夫曼编码

    实验题 构造哈夫曼树生成哈夫曼编码 编写一个程序 构造一棵哈夫曼树 输出对应的哈夫曼编码和平均查找长度 并对下表 所示的数据进行验证 单词及出现的频度 单词 The of a to and in that he is at on for H

  • Github下载任意版本的VsCode

    下载历史版本VsCode zip 下载链接由三部分组成 固定部分 commit id VSCode win32 x64 版本号 zip 固定部分 https vscode cdn azure cn stable Commit id 打开 v

  • 嵌入式linux通过systemd自启动一个python代码

    一直想实现一段自启动的代码 今天尝试了下 成功了 做个记录 首先 我用的是imx6ull处理器 嵌入式linux内核版本为4 9 88 然后 上位机用的虚拟机ubuntu22 04 01 先在ubuntu上面试了试 能够自启动 然后再下载到

  • linux系统调用(持续更新....)

    随着自己接触越来越多的linux的系统函数发现自己在linux系统调用方面有很多不足 每次遇到系统调用函数都要百度一遍看一下用法 所以我打算写一篇博客来记录在开发过程遇到的系统调用函数 方便自己查阅 本文持续更新 1 popen 函数 2

  • Unity-协同程序

    知识点一 Unity是否支持多线程 1 首先要明确一点Unity是支持多线程的 只是新开线程无法访问Unity相关对象的内容 Unity中的多线程 要记住关闭 Unity中去使用 如果说 我们一开始在Start内创建一个多线程 那么我们无法

  • 【算法】最近点对问题（暴力破解法）

    简单的画了一张图 通过暴力方式 进行一次比较获取两个点之间的最短距离 点对最近问题 暴力破解法 include

  • Maven Dependency设置，详解！

    come from http www javaeye com topic 240424 用了Maven 所需的JAR包就不能再像往常一样 自己找到并下载下来 用IDE导进去就完事了 Maven用了一个项目依赖 Dependency 的概念

  • 赶紧来修炼内功~字符串函数详解大全（二）

    目录 1 strncpy 重点 模拟实现 2 strncat 重点 模拟实现 3 strncmp 重点 模拟实现 写在最后 1 strncpy 该函数包含三个参数 前两个参数与上一篇文章中讲解的strcpy函数一样 一个目的地 一个源 第三

  • 【算法】分治、动态规划和贪心算法

    这三种算法非常相似 但是又有一些区别 理解如下 分治 把一个问题划分为若干子问题 求出子问题的最优解 再把子问题的最优解进行merge 最终得到原问题的最优解 动态规划 原问题的最优解包含子问题的最优解 即 拥有最优子结构 同时 求子问题的

  • React Router 从v3升级到v4的踩坑之旅

    React 应用很少不用react router这个包的 marknoteapp com之前一直用v3 看到v4出来后一直心痒 最近 抱着 用新不用旧 的理念 手贱升了一下级 这一升级 差不多2天功夫花掉啦 概述 和 Angular 那改朝

  • 通过java api提交自定义hadoop 作业

    通过API操作之前要先了解几个基本知识 一 hadoop的基本数据类型和java的基本数据类型是不一样的 但是都存在对应的关系 如下图 如果需要定义自己的数据类型 则必须实现Writable hadoop的数据类型可以通过get方法获得对应

  • 未来科技计算机作文600字,未来的科技作文600字

    未来的科技是什么样的呢 也许大家都很好奇 未来可能有像人一样的机器人 未来的汽车能在天上飞 电脑也会有思维会说话谈感情 现在让我们一起去畅想未来的世界吧 清晨 我正懒洋洋地睡在床上 蒙眬中听见一阵音乐把我给弄醒了 小主人 起床的时间到了 家

  • Elasticsearch 入门到精通-ES可视化查询工具kibana重启

    ps ef grep kibana ps ef grep 5601 都找不到 尝试 使用 fuser n tcp 5601 kill 9 端口 ps ef grep node 或 netstat anltp grep 5601 启动即可 k

  • LeetCode - 旋转数组类总结（二分法）

    搜索旋转排序数组 假设按照升序排序的数组在预先未知的某个点上进行了旋转 例如 数组 0 1 2 4 5 6 7 可能变为 4 5 6 7 0 1 2 搜索一个给定的目标值 如果数组中存在这个目标值 则返回它的索引 否则返回 1 你可以假设数

  • linux下解压命令大全

    tar 解包 tar xvf FileName tar打包 tar cvf FileName tar DirName 注 tar是打包 不是压缩 gz解压1 gunzip FileName gz解压2 gzip d FileName gz压

  • 前端中DOM是什么，怎样理解dom

    前端中DOM是什么 怎样理解 首先我们来说一下DOM是什么 文档对象模型 Document Object Model 简称DOM 我个人认为他就是将 通过浏览器的一些规则解析后 在渲染成我们能够看得见的页面 这整个过程就是DOM 它的过程分

  • vue2引入Element UI组件去创建新页面的详细步骤--项目阶段2

    目录 一 Element UI介绍 Element UI的特点 二 下载配置Element UI 零 创建vue项目 一 下载Element UI依赖 二 全局文件main js中引入Element UI 三 删除多余的东西 一 删除App

热门标签