了解一些常见的VUE组件库
移动终端（H5，小程序）
个人电脑
元素，为开发人员，设计师和产品经理准备的一组桌面组件库
官方地址：https：//element.eleme.cn/#/zh-cn
ElementPlus（VUE3.0版本）官方地址：https：// element-plus.org/zh-cn
使用Vue-CLI脚手架工具来创建项目，并在项目中介绍ElementUI组件库
使用vue create命令创建一个项目；根据Elementui官方网站上的说明安装和使用组件
vue创建找到合适的文件夹，打开CMD窗口，并使用VUE创建一个项目
注意：
CD项目名称启动了以前的订单来执行两件事：创建一个文件夹，将示例项目的代码下载到此文件夹中。为了运行项目，我们还需要输入项目目录并运行命令。相应的命令是：
查看效果http：// localhost：8080
请参阅官方网站文档，以全球方式分为两个步骤：
在项目中安装elementui
-s：Yes-Save的缩写，表明此软件包是生产依赖性的，表明该项目还需要使用此软件包。
-s：可以省略。
如果要安装开发依赖项，请添加-d。
main.js介绍并注册了官方网站以供参考
上面的写作是固定模式，您可以随时访问官方网站。
使用该组件的基本思想是在官方网站上执行简历操作。请在此处尝试最简单的按钮组件。
在中间
注意：
如果您打开浏览器预览，则没有效果，一切正常?
我们将要开放的人类资助的项目是基于Elementui的一组架构。我们从高频组件中学习，例如中间和高频使用组件中的背景管理系统，因此每个人都更容易接受业务的平稳进度。
在PC背景管理系统中，带有表单的数据是非常普遍的需求。
可以在官方网站的官方网站中显示表数据（文本数据）
从官方网站简历代码到项目；
了解相关属性的使用；
在官方演示中复制第一个基础演示，并首先运行我们的组件并运行
效果如下
数据源是由表组件的数据属性指定的（我们不需要使用V-For指令来发行自己）
prop =“ date”。此处的prop是从每个对象命名日期的属性的属性值。
在El-Table中使用数据属性
在El-Table-Mitem上使用道具属性
有时在我们的表单元格中，不仅要渲染文本，还可能呈现一些自定义内容：图片，操作按钮
掌握自定义列的使用情况可以在表单元格中显示自定义内容。
需求说明：我们想在最后一列中渲染删除按钮
官方网站：自定义列模板
我们需要使用标签将我们的自定义渲染内容包装在相应的列中。插槽的机制是实际的
自定义内容：
在后端返回的数据中，只有一个编码是指性别。为了促进用户查看，我们需要将1个转换为男性，而0则为女性。
数据如下：
使用域插槽获取数据（官方网站），然后使用该函数进行转换输出
来自行，列，$索引和存储的数据（表格管理表）
显示桌子中的图片
分页组件的官方网站地址：https：//element.eleme.cn/#/zh-component/pagination
掌握页面翻件组件的使用
阐明：
页面大小：默认情况下每页10片数据
当用户单击页面转动页面时，将触发当前变化事件
注意：
掌握表单组件的基本用途
在官方网站上，这是简历的最复杂示例，然后是相应的修改
了解表格格式的必要性和实施
在将请求呼叫接口发送到后端之前，我们需要验证要通过的参数，以扼杀用户在摇篮中的错误。
无法相信用户的任何输入！无法相信用户的任何输入！无法相信用户的任何输入！
在上面的形式中，要求：必须填写用户名
掌握元素-UI的使用
在数据中，补充定义规则。
格式：
模范
实用的代码
注意：
内容：
代码：
接受效果
当我们执行此步骤时，当用户输入的内容不符合表单规则的要求，并且某个输入框不焦点时，它将给出相应的提示。当我们进入会议的内容时
格式
阐明：
代码模板
添加参考以引用EL-Form组件。
代码
提交期间执行手动口袋验证。如果通过验证
步
根据我们的上一课进行操作。
定义规则
模板中的配置应用程序规则
以下三个位置中的属性名称必须相同
场景：
密码不允许是
掌握使用自定义检查规则的格式
规则中的自定义验证器
验证失败中将有一个红色提示文本。有时，我们需要清理执行一项操作后当前学校验证失败留下的痕迹并为下一次验证做准备。
此方法可以
了解树结构的数据；
了解树成分的基本用途
描述主要关系时必须使用树状数据，例如：我们的共同家庭成员关系地图，公司中的组织结构等。描述与之相对应的业务方案，我们必须将其提供给给它给它。树结构的数据
了解树结构和标签和儿童特性的数据
示例代码
我们已经完成了上面的基底树组件的渲染，依赖于数据属性，并将数据属性传递到树结构中
注意：
树成分渲染节点标题默认使用数据。默认属性用于识别子节点。我们尝试替换数据中的属性名称。
如果您必须自定义这两个关键字：标签和孩子，则需要使用道具属性。
如下：
当我们单击树状的子节点时，如何获取与节点相对应的当前数据？
监视时间：@node-click =“ handingenodeclick”
在下图中表达数据的内部数据，并通过树显示
参考代码
背面端接口返回的数据通常是扁平 - 贝贝的数组结构，而不是树结构，例如下面的潮汐阵列结构：
此类数据可以直接在表中使用，但不能直接在树组件中使用。我们需要进行一些转换。
代码
了解对话框炸弹框架组件的基本用途
炸弹框架组件中有两个状态。一个是打开一个要关闭。如果我们想在打开或关闭时自己做某事，我们可以听这两个事件。
[@close]（）弹跳框架关闭：可对话从真实到false
[@oopen]（）子弹盒打开：对话可视化从false到true的更改
SELECCT：@change，Ajax
用于页面布局
查看VUE项目中间路线的使用（嵌入式路线）；
了解背景管理系统的基本页面结构
要求描述：
在当前项目中，我们没有引入Vue-Router，因此让我们在此处单独安装。
src/router/index.js
src/main.js简介
定义App.Vue中的路由退出
src/app.vue
登录静态布局页面
src/views/login.vue
需要单独的组件来制作主页布局
src/views/layout.vue
容器组件布局菜单组件
访问路由地址以查看是否可以显示主页
src/views/layout.vue
src/views/layout.vue，设置索引和路由器
旋转器：是否使用Vue-Router模式，启用此模式在激活导航时将索引用作路径作为路径
表静态布局
描述：
选择其他菜单，刷新页面，并发现“自我默认”菜单是错误的！
解决
原始：https：//juejin.cn/post/7097558307568615454