Element-UI 前端UI 组件库

个人博客地址：

Element-UI 前端UI 组件库

配置Element-UI 组件库

通过 UI 界面方式实现

step1. 打开仪表盘

step2. 选择插件

step3.

step4.

step5. 安装插件vue/cli-element

配置插件

选择按需导入

完成安装

遇到的问题

problemOne:

vue.runtime.esm.js?430a:619 [Vue warn]: Unknown custom element: <el-avatar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.found in---> <Home> at src/components/Home.vue<App> at src/App.vue<Root>

分析原因：使用的该组件没有被引入

UI组件的引入：

problemTwo

分析原因逻辑代码中，在对象结束部分存在多余的逗号之类的错误

problemThree

分析原因：在逻辑代码中没有去定义该属性或方法，就开始在组件中使用该属性或方法导致出错

定义即可：

problemFour

Failed to compile../src/plugins/element.js
Module Error (from ./node_modules/_eslint-loader@2.2.1@eslint-loader/index.js):F:\code\yijiupiyk_project\src\plugins\element.js60:23  error  Newline required at end of file but not found  eol-last✖ 1 problem (1 error, 0 warnings)1 error and 0 warnings potentially fixable with the `--fix` option.

分析原因：Eslint语法检测，要求文件末尾有一个空行，否则会报错

Question 5:

vue.runtime.esm.js?430a:619 [Vue warn]: Missing required prop: "action"found in---> <ElUpload> at packages/upload/src/index.vue<ElFormItem> at packages/form/src/form-item.vue<ElForm> at packages/form/src/form.vue<ElDialog> at packages/dialog/src/component.vue<ElContainer> at packages/container/src/main.vue<Home> at src/components/Home.vue<App> at src/App.vue<Root>
vue.runtime.esm.js?430a:619 [Vue warn]: Invalid prop: type check failed for prop "action". Expected String, got Undefined found in---> <Upload> at packages/upload/src/upload.vue<ElUpload> at packages/upload/src/index.vue<ElFormItem> at packages/form/src/form-item.vue<ElForm> at packages/form/src/form.vue<ElDialog> at packages/dialog/src/component.vue<ElContainer> at packages/container/src/main.vue<Home> at src/components/Home.vue<App> at src/App.vue<Root>

分析原因：该组件的必要属性没有设置，因此报错，添加该属性即可

Question 6:

分析原因: 通过确保代码块使用了大括号包裹以避免bug的发生，并且增加代码的清晰度

解决方法：修改配置文件.eslintrc.js

Question 7: 当一个页面需要通过状态动态为表单项添加校验属性prop 时，可能会出现，校验不生效的问题

解决方法：当不需要设置 prop属性时，可以置空，即 :prop="’ '"

Question 8: 当使用 Element-UI 组件时

Question 8: 当使用 Element-UI 组件时，自定义校验方式

如果不指定 required: true 不会出现 * 号

函数传参（组件事件，保有默认参数，并可以传入自定义参数）

@callbackData="reBackSubData($event, scope.$index)  的使用   $event  --- 默认参数   ，第二个开发者传入的参数

第二种传参方式：回调函数

@callbackData="((data) => { reBackSubData(data, scope.$index) })"

Element-UI 前端UI 组件库相关推荐

30组常用前端开发组件库，前端组件收集整理列表
0. 前端自动化前端构建工具 gulp – The streaming build system grunt – the JavaScript Task Runner 前端模块管理器 Bower – ...
js ui 前端UI框架
http://fineui.com/ http://www.layui.com/ js ui 前端UI框架
前端流程图组件库大对比
前端流程图组件库框架对比框架技术核心是否开源是否使用过背景备注 GoJS canvas 和svg 核心代码进行了混淆融合系统使用过国外商业公司功能强大,图的种类极多,灵活,商业版本 ...
Element UI（桌面组件库）之三大灵魂拷问
1. 什么是Element UI 概述 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供 ...
vue,uni-app 移动端UI框架（组件库）
一.Vant UI 轻量.可靠的移动端 Vue 组件库 https://youzan.github.io/vant/#/zh-CN/intro 二.uView(推荐): 多平台快速开发的UI框架. 介 ...
GitChat · 前端 | Vue 组件库实践和设计
来自 GitChat 作者:周志祥更多IT技术分享,尽在微信公众号:GitChat技术杂谈前言现在前端的快速发展,已经让组件这个模式变的格外重要.对于市面上的组件库,虽然能满足大部分的项目,但是 ...
ChatUI - 阿里出品的客服对话领域的前端开源组件库
专为智能对话客服设计的组件库和开发套件,大厂出品,质量保证,还免费开源. 关于 ChatUI ChatUI 专门是为智能对话领域的产品需求而生的设计和开发解决方案,由阿里云达摩院下的阿里小蜜团队出品并 ...
html中怎么用js把表格清空_一款简洁非常好用的前端表格组件库
大家好,我是你们的章鱼猫. 今天给大家推荐一个非常好用的表格前端组件库,Grid.js:支持所有主流的浏览器和前端框架,有如下特点: 实现上简单且轻量化,库只有 12kb 大小依赖简单,Grid.j ...
前端可视化组件库-Apache ECharts简单介绍vue框架使用eCharts例子
eCharts是一个基于 JavaScript 的开源可视化图表库. 实现集成了前端可视化的多种手段. 官网链接:ECharts官网初学者建议去官网看看起步的内容,另外博主也是今天刚学的噢,写得不好 ...
Google Earth Engine APP——gee-ui geetemp 前端团队组件库
通过本地python端的安装实现gee ui在本地的使用 Getting started 安装 git clone git@git.i.com:gee-lab/gee-ui.git cd gee-ui ...

Element-UI 前端UI 组件库

目录

Element-UI 前端UI 组件库

配置Element-UI 组件库

通过 UI 界面方式实现

配置插件

遇到的问题

Element-UI 前端UI 组件库相关推荐

最新文章

热门文章