【Vue基础】element快速入门

已于 2023-04-17 16:07:18 修改
阅读量502 收藏 2
点赞数 1
文章标签： 前端 element vue
于 2023-04-17 16:06:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42294095/article/details/130201851
版权

一、知识点整理

1、安装Element UI组件库，在当前目录下，在命令行执行指令：

npm install element -ui@2.15.3

如果无法安装，执行以下指令：

npm install --legacy-peer-deps element-ui --save

2、引入Element组件库

 3、访问官网，复制代码，调整代码

 新建element目录和vue文件

 4、运行效果

修改App.vue的<div>内容

此时浏览器页面显示出需要得效果：

二、参考链接

1、element组件库

https://element.eleme.cn/#/zh-CN/component/installation

2、element快速入门视频教程

https://www.bilibili.com/video/BV1m84y1w7Tb?p=40&spm_id_from=pageDriver&vd_source=841fee104972680a6cac4dbdbf144b50

3、

林月明
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
UI素材|最全面的移动端 UI KIT 模板
awayaya1的博客
10-07 953
什么是UI组件 UI 设计组件（UI KIT），直译过来就是用户界面成套元件，是界面设计常用控件或元件，「组」是设计元素的组合方式，「件」由不同的元件组成。 组件的优势 1、保证一致性 Consistency 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 2、反馈用户 Feedback 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变
vue-element-admin快速入门课程
06-29
vue-element-admin是一款后台前端解决方案，使用该框架可以很轻松地帮我们完成后台前端的工作。本课程主要带领同学们完成该框架的入门学习。 本课程首先会对框架的安装，代码目录说明，路由配置项的含义这些基础知识...
怎么安装Element组件库？
专心创作，专心学习
12-06 655
到这里很多人会发现自己没有NPM脚本这个女选项，这时候我们要点击package.json他才会出来。到这里安装已经结束了！，更详细的可以查看官方的文档，安装不上的，可以先清除upm缓存，再安装。到此，就已经创建好了！
Element介绍&使用
最新发布
rch041126的博客
03-23 1386
文章目录Element概述一、Element快速入门二、Element布局三、Element常用组件 Element概述 一、Element快速入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">
Element组件库的用法步骤
YY的博客
12-07 858
Element组件库的用法步骤
新手使用组件库——Element
Web_Lvz的博客
05-30 430
PC端组件库参考: https://www.jianshu.com/p/669d3e41dca6。element 官网 https://element.eleme.cn/#/zh-CN。在balbel.config.js文件中添加plugins字段。下载安装插件 babel-plugin-component。完整引入: 在main.js文件中引入如下三句代码。在main.js中按需导入需要的组件。在组件中直接使用组件标签即可。注意: 有几个特殊的使用如下。1, 下载安装组件库。
vue2引入Element UI组件去创建新页面的详细步骤--项目阶段2
快乐学习
04-17 9674
本文中教学如何从创建vue项目到从Element UI官网引用组件来创建一个新的vue页面，包括路由注册这些都有详细的说明介绍Element UI是一个基于Vue.js的组件库，提供了一套丰富、美观、易用的UI组件，包括表单、弹窗、导航、布局、数据展示等各种常用组件。 Element UI旨在帮助开发者快速构建高质量的Web应用程序，使得前端开发更加高效和便捷。
非常棒的 Vue3 Element 系统解决方案 vue3快速入门、vue3实用入门到熟练实例
08-26
非常棒的 Vue3 Element 统解决方案 vue3快速入门、vue3实用入门到熟练实例 学习了vue3官网、看了视频好像感觉知道了，但实际又不会建项目。这个项目就是上你从入门到熟练的实例。 该方案作为一套多功能的后台框架...
HelloAbp:ABP vNext + vue-element-admin入门级项目实战
04-13
HelloAbpABP vNext + vue-element-admin入门级项目实战运行环境：.netcore 3.1、sqlserver、nodejs、npm修改Xhznl.HelloAbp.HttpApi.Host、Xhznl.HelloAbp.DbMigrator项目的数据库连接字符串运行/run/db-migrator....
VUE3+Element-Plus入门代码
12-27
VueDemo_boot为前端代码，api为后端代码
Vue.js快速入门实例教程
01-19
什么是vue vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。...否则会报错： [Vue warn]: Cannot find element: #app--> app.js代码： new Vue
十一（完结篇）、VUE&Element快速入门
电脑高级开关机工程师的博客
03-13 537
JavaWeb教程十一（完结篇）、VUE&Element快速入门
网页制作神器—ElementUI（小白入门超详细）
热门推荐
白白白鲤鱼的博客
08-13 1万+
快速上手网页制作神器——ElementUI
ElementUI组件库安装与基本使用
qq_52463974的博客
07-05 1487
在App.vue根组件中使用标签引用Element。其他组件也类似，至此你已经是一个合格的cv工程师。2.在入口函数引入ElementUI组件库。按ctrl+s保存后的效果。1.安装：在命令行执行。3.构建vue基本框架。
Element快速入门
ccz80的博客
07-12 872
目录一、Element快速入门1. 引入Element 的css、js文件 和 Vue.js（将其copy至webapp下）2. 创建Vue核心对象官网：Element官网如图： 鼠标放上去看看导入成功没 crtl+右键 完整代码如下： 效果：如下 从官网里copy的...
Spring Boot + vue-element 开发个人博客项目实战教程（八、用户中心功能实现）
码上言
11-06 5691
文章目录前言一、引入Lombok1、为什么要用Lombok2、引入相应的maven包3、添加IDE工具对Lombok的支持4、Lombok注解的使用二、用户功能实现增删改查1、添加实体类2、添加业务接口3、添加业务接口实现类4、数据库查询接口实现5、编写数据库xml6、编写接口层 前言 经历了那么多天的基础项目的搭建，终于把基本的项目配置、项目日志、项目管理以及数据库建立起来了。可能会遇到很多的问题，遇到问题首先想的是怎么去解决，而不是想着太难了就算了。我是希望能给大家带来一点帮助。最近可能会更新的比较慢，
1-element-ui创建项目
chencaw的专栏
05-11 1118
1、element-ui创建项目 vue create chenelementdemo 2、测试是否安装好 npm run serve
网站快速成型工具-Element UI
weixin_48143996的博客
12-06 5948
Element UIElement UI1 什么是Element UI？？？？2 搭建环境2.1 创建vue项目2.2 安装 element-ui组件2.3 Element UI 引入3 布局3.1 布局3.2 reset.css3.3 满屏填充4 导航条4.1 需求4.2 导航条4.3 路由4.4 页面刷新导航选中问题5 表格：查询列表5.1 测试页面5.2 基本表格5.3 表格修饰5.4 多选![在这里插入图片描述](https://img-blog.csdnimg.cn/87a16b32f4a447e
Vue和Element
06-09
Vue是一种轻量级、高效的前端框架，用于构建单页面应用程序...同时，Element具有良好的文档和社区支持，可以帮助开发者快速入门和解决问题。因此，Vue和Element通常会一起使用，以提高前端开发效率和用户界面的美观度。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

林月明

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

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

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

打赏作者

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

抵扣说明：

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

余额充值