Element快速入门

最新推荐文章于 2024-04-17 21:43:14 发布
最新推荐文章于 2024-04-17 21:43:14 发布
阅读量156 收藏
点赞数
分类专栏： 前端 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y_k_j_c/article/details/132060043
版权

文章目录


本人主攻后端，前端的文章基本就用来记一下的
写的文章基本没什么内容，还望看的多包含

Element

简介

Element是一套基于Vue2.0（需要在vue工程下使用）的组件库
你可以认为就是帮我们快速搭建网页的组件库
可以直接用他定义好的按钮和表单等等，有不同的效果，可以制作出比较精美的网页
element官网

在这里插入图片描述

快速入门

在这里插入图片描述
1.集成终端打开
然后进行安装
在这里插入图片描述
在这里插入图片描述
2.在main.js中引入elementUI组件库
在原有基础上添加注释后面那两条
在这里插入图片描述
3.接下来
在views文件夹建一个element文件夹
然后再element文件夹下建一个ElementView的vue文件
写一下对应的基础格式
在这里插入图片描述

然后我们访问官网
准备cv
我们主要演示一下button组件
就里面有不同的样式，你要想用哪种你就直接点击显示代码
然后将里面的内容复制下来
在这里插入图片描述
然后把对应的代码复制到vue文件中
这里不是复杂数据，所以没有数据模型
在这里插入图片描述
然后
在App.Vue引用一下直接在div中加入

<element-view></element-view>

即可
在这里插入图片描述

常见组件

讲一下常用组件
还是cv

表格组件

很多不同类型的表格
想要什么复制什么代码
在这里插入图片描述
比如这个带边框的
你直接复制，然后可以新建一个vue文件放进去
或者在原来的文件加
它对应展现出来的效果就是你在网页上看的效果
你想更改的话就改对应的标题名什么的，或者数据
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Pagination分页

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

Dialog对话框

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
还是如果我们想要达到我们想要显示的数据
需要更改对应的数据和名字
还有不同属性

Form表单

在这里插入图片描述

在这里插入图片描述
还需要输入对应数据
在这里插入图片描述
在这里插入图片描述

案例

基本页面布局

在这里插入图片描述
在这里插入图片描述
可以自己定义页面布局的容器
在这里插入图片描述
也可以找常用的页面布局
在这里插入图片描述
对代码进行一定的修改达到自己想要的样式
在这里插入图片描述
在这里插入图片描述

页面组件实现

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

axios异步加载数据

在这里插入图片描述
然后编写钩子方法
在这里插入图片描述
不太行

在这里插入图片描述
男女和图片进行修改
在这里插入图片描述

在这里插入图片描述

vue路由

就是点击不同的功能
对应的url发生变化，展现不同效果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

打包部署

先打包再部署在nginx上
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

小袁拒绝摆烂
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Eclipse插件Java element view
11-09
最新版eclipse4.2插件java element view
CSS之文档视图(DocumentView)和元素视图(ElementView)方法
tian361zyc的博客
06-07 567
css
Web前端-Vue组件库Element
最新发布
weixin_43866613的博客
04-17 850
Element：是饿了么团队研发的，一套为开发者、设计师和产品经理之魂被的基于Vue2.0的桌面端组件库组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等官网：https://element.eleme.cn/#/zh-CNListener。
初学Vue+Element——Element使用
m0_62780794的博客
03-11 817
Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。如下图所示就是我们开发的页面和ElementUI提供的效果对比：可以发现ElementUI提供的各式各样好看的按钮ElementUI的学习方式和我们之前的学习方式不太一样，对于ElementUI，我们作为一个后台开发者，只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中，并且做一些修改即可。
【Vue基础】Element案例学习-智能学习辅助系统
qq_42294095的博客
05-17 759
Element案例、vue基础
Javaweb之Vue组件库Element案例的详细解析
qq_69748833的博客
11-29 273
因为我们没有拷贝官方提供的css样式，所以和官方案例的效果不太一样，但是我们需要的布局格式已经有，具体内容我们有自己的安排。首先我们来到VS Code中，在views目录下创建 tlias/EmpView.vue这个vue组件，并且编写组件的基本模板代码，其效果如下图所示：其中模板代码在之前的案例中已经提供，此处不再赘述。从官网提供的示例，我们发现由现成的满足我们需求的布局，所以我们只需要做一位代码搬运工即可。通过观察数据，我们发现返回的json数据的data属性中，才是返回的人员列表信息。
Javaweb之Vue组件库Element的详细解析
qq_69748833的博客
11-25 648
不知道同学们还否记得我们之前讲解的前端开发模式MVVM，我们之前学习的vue是侧重于VM开发的，主要用于数据绑定到视图的，那么接下来我们学习的ElementUI就是一款侧重于V开发的前端框架，主要用于开发美观的页面的。Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。
【前端Vue】Element UI：一站式前端组件库的简单入门指南
橘足轻重的博客
06-27 3437
Element UI是一个基于Vue.js的前端组件库，它提供了丰富的UI组件和工具，用于构建现代化的Web应用程序。Element UI的设计理念注重简洁、易用和美观，让开发者能够轻松构建出优雅的用户界面。它的特点包括：大量可定制的UI组件：Element UI提供了众多常用的UI组件，如按钮、表格、表单、弹窗等，每个组件都具有丰富的选项和样式定制能力。响应式布局系统：Element UI内置了灵活的响应式布局系统，可适应不同屏幕尺寸和设备。
【项目实战】 改造原前端ViewUI框架，使其支持ElementUI 与 Avue
本本本添哥
01-11 1080
因为原来前端的同事习惯用，ViewUI框架，于是基线版本的项目，都是使用的ViewUI框架搭建的。 但是，这个ViewUI的表格，是引用的第三方的vux的框架，在网上很少人使用，所以遇到问题，基本上没有人解答。 只能请教原前端同事作者，反正就是对我们这种半吊子前端开发者非常之不友好 于是，在了解了ElementUI和Avue框架之后，就坚定了要改造的信念，于是便有了下面这篇文章~
Element-UI快速入门
12-31
Element-UI快速入门，快速制作精美网页 。
vue-element-admin快速入门课程
06-29
vue-element-admin是一款后台前端解决方案，使用该框架可以很轻松地帮我们完成后台前端的工作。本课程主要带领同学们完成该框架的入门学习。 本课程首先会对框架的安装，代码目录说明，路由配置项的含义这些基础知识...
非常棒的 Vue3 Element 系统解决方案 vue3快速入门、vue3实用入门到熟练实例
08-26
非常棒的 Vue3 Element 统解决方案 vue3快速入门、vue3实用入门到熟练实例 学习了vue3官网、看了视频好像感觉知道了，但实际又不会建项目。这个项目就是上你从入门到熟练的实例。 该方案作为一套多功能的后台框架...
vue-element-quick-start:Vue2，Vuex 3，Vue路由器3，Element-ui和Typescript SPA项目快速入门套件（Vue element ui快速开始脚手架）
03-07
Vue Element UI快速入门项目设置yarn install$ yarn global add pm2编译和热重装以进行开发yarn run serve编译并最小化生产yarn run build运行测试yarn run test整理和修复文件yarn run lint运行端到端测试yarn run ...
ExtJS快速入门指南.pdf
01-15
十五、理解Html DOM、Ext Element 及Component............................................................ 36 十六、Ext 类中的get 方法简介....................................................................
Springboot vue-element 快速开发，全开源,java 流程开发、前端后分离，小程序，适合入门及企业内部
03-21
Springboot vue-element 快速开发，全开源,java 流程开发、前端后分离，小程序，适合入门及企业内部 前端采用 vue-element-admin 。 后端采用 Spring Boot、MySQL + MyBatis Plus、Redis + Redisson。 权限认证使用 ...
Vue.js快速入门实例教程
01-19
什么是vue vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。...否则会报错： [Vue warn]: Cannot find element: #app--> app.js代码： new Vue
【JavaWeb学习-第四章（3）】Vue组件库Element & Vue实际应用
weixin_44883789的博客
12-28 1011
文章目录1. Element介绍2. 快速入门3. Element组件3.1. Table表格3.1.1. 组件演示3.2. Pagination分页3.2.1. 组件演示3.2.2. 组件属性详解3.2.3. 组件事件详解3.3. Dialog对话框3.3.1. 组件演示3.3.2. 组件属性详解3.4. Form表单3.4.1. 组件演示4. 案例4.1. 案例需求4.3. 代码实现4.3.1. 环境搭建4.3.2. 整体布局4.3.3. 顶部标题4.3.4. 左侧导航栏4.3.5. 右侧核心内容4.
Vue两个很好用的UI库ElementUI ViewUI
sunzhibin的博客
08-14 2588
Element UI开发文档 npm 安装 npm i element-ui -S 引入 Element 完整引入 在 main.js 中写入以下内容： import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import App from './App.vue' Vue.use(ElementUI) new Vue({ el: '#app',
Vue路由入门,用Vue路由来实现不同页面的渲染
weixin_44463218的博客
04-21 1473
Vue路由的配置，用路由功能实现不同页面的渲染
element-ui快速入门
04-28
为了快速入门element-ui，我们需要掌握以下几个步骤。 第一步是安装element-ui。我们可以使用npm或者yarn等包管理工具来安装element-ui，也可以直接在html文件中引入相关的CDN链接。在引入后，我们就可以在项目中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小袁拒绝摆烂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值