程序员经验分享-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 的相关文章

  • vue中收集input[type=“checkbox”]的值

    文章目录 input type checkbox 勾选or不勾选 v model checked input type checkbox 多个时 哪些被选中 相关链接 input type checkbox 勾选or不勾选 要控制input

  • Vue开发技巧总结

    1 路由参数解耦 通常在组件中使用路由参数 大多数人会做以下事情 export default methods getParamsId return this route params id 在组件中使用 route 会导致与其相应路由的高

  • 【解决】TypeError: this.$refs.treeRefs.xxx is not a function

    问题 使用refs触发子组件内方法时报 TypeError this refs treeRefs xxx is not a function 解决 经查看 发现子组件被放在了v for循环体内 示例代码如下

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

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

  • vue源码解析---AST抽象语法树

    目录 首先AST是什么 指针思想 递归深入 斐波那契数列 递归深入 形式转换 栈结构 AST语法树 首先AST是什么 在计算机科学中 抽象 语法树 abstract syntax tree或者缩写为AST 或者语法树 syntax tree

  • js设置全屏显示和取消全屏显示，实现F11功能

    点击后

  • 阿里云图标使用 (symbol 引用方式)

    阿里云图标网址 https www iconfont cn 一 登录注册 这个简单 就不说了 二 给当前项目找图库 2 1 添加项目 2 2 寻找图标添加入库 添加入库 2 3 打开入库 的图标添加到指定项目 添加到当前项目 1 2 三 项

  • vue增加数据导出excel（vue-json-excel）

    1 下载安装vue json excel 相当于命令npm install save vue json excel 或者命令npm install vue json excel S 2 创建js文件引入并全局注册标签 import Vue

  • vue 使用MD5加密

    概念 MD5是一种信息摘要算法 对称加密 一种被广泛使用的密码散列函数 可以产生出一个128位 16字节 的散列值 用来确保信息传输完整一致性 它可以计算任意长度的输入字符串 得到固定长度的输出 而且这个算法是不可逆的 即使得到了加密的密文

  • 【Vue介绍】

    Vue js是一套构建用户界面的渐进式框架 Vue 只关注视图层 采用自底向上增量开发的设计 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 Vue js 使用了基于 HTML 的模板语法 允许声明式地将 DO

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

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

  • 【vue2】计算属性(computed)与侦听器(watch)详解

    博 主 初映CY的前说 前端领域 个人信条 想要变成得到 中间还有做到 本文核心 计算属性与侦听属性的用法 目录 文末有给大家准备好的Xmind思维导图 一 计算属性computed 默认get 方法 仅是获取值 不仅仅是获取值 还具有修改

  • 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

  • Vue实例挂载的过程

    一 思考与分析 我们都听过知其然知其所以然这句话 那么不知道是否思考过new Vue 这个过程中究竟做了些什么 过程中是如何完成数据的绑定 又是如何将数据渲染到视图的等等 首先找到vue的构造函数 源码位置 src core instanc

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

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

  • vue 实时往数组里追加数据

    使用Vue set 以下来解读一下 Vue set this tableDatas this selected obj 1 this tableDatas是我们声明好的数组 以下是自定义数据 tableDatas id 1 caseName

  • 关于element UI 中输入框禁止输入空格的实现

    关于element UI 中输入框禁止输入空格的实现 在项目开发过程中会遇到输入框禁止输入空格或者特殊字符之类的需求 其中禁止输入空格的实现方法如下所示 1 使用vue框架中的 trim修饰符

  • Vue.observable的理解

    一 Observable 是什么 Observable 翻译过来我们可以理解成可观察的 先来看其在Vue中的定义 Vue observable 让一个对象变成响应式数据 Vue 内部会用它来处理 data 函数返回的对象 返回的对象可以直接

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

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

随机推荐

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

    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

热门标签