ElementUI安装与使用指南

Element官网-安装指南

提醒一下:下面实例讲解是在Mac系统演示的;

一、开发环境配置

电脑需要先安装好node.js和vue2或者vue3

  1. 安装Node.js

Node.js 中文网
安装node.js命令:brew install node
在这里插入图片描述
node.js安装完后,输入:node -v , npm -v 查看对应的版本
在这里插入图片描述

  1. 安装vue.js

vue.js官网
vue2
Vue CLI官网 , Vue CLI是 Vue.js 开发的标准工具
提醒:Vue CLI 现已处于维护模式!
安装vue.js命令:npm install -g @vue/cli
在这里插入图片描述
vue 安装完后,输入:vue -V 或 vue --version 查看版本
在这里插入图片描述

二、vue创建工程

方式一:终端切换到自己电脑里保存工程的文件夹目录里, 然后输入:vue create 工程名称
在这里插入图片描述
方式二:终端里输入:vue ui
在这里插入图片描述
在浏览器里输入http://localhost:8000/project/select,打开Vue 项目管理器
在这里插入图片描述
点击在此创建新项目
在这里插入图片描述
点击下一步
在这里插入图片描述
点击下一步
在这里插入图片描述
点击创建项目
在这里插入图片描述
在这里插入图片描述

三、安装 element

终端里切换到工程目录,输入
在这里插入图片描述

四、查看element是否安装成功

方式一: 使用 Intellij IDEA 打开learnelementuispringboot
查看package.json
在这里插入图片描述
查看node_modules
在这里插入图片描述
方式二:使用HBuilderX打开learnelementuispringboot
查看package.json
在这里插入图片描述
查看node_modules
在这里插入图片描述
说明 element-ui已经安装好了

运行项目

方式一:Intellij IDEA
在这里插入图片描述
或者 Intellij IDEA 终端里输入:npm run serve
在这里插入图片描述

方式二:HBuilderX
在这里插入图片描述
项目启动成功页面:
在这里插入图片描述

点击下载learnelementuispringboot项目源码

learnelementuispringboot项目源码里有elementui使用实例
在这里插入图片描述

使用指南博客

  • ElementUI 组件:Layout布局(el-row、el-col)
  • ElementUI组件:Button 按钮
  • ElementUI Form:Radio 单选框
  • ElementUI组件:Link 文字链接

以上就是ElementUI安装与使用指南的全部内容讲解。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/248569.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JS基础 - 遍历对象方法(6种)

初始值: var obj {a: 1,b: 2,c: 3,d: 4,e: 5,}; 第一种:for in for (let key in obj) {console.log(key ":" obj[key]);} 第二种:Object.keys 获取key Object.keys(obj).forEach((key) > {console.log(key ":" …

干货 | 大模型在图数据分析、推荐系统和生物科学中的综合应用

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入! 图机器学习、推荐系统与大语言模型的融合正成为新的前沿热点。图机器学习通过利用图结构数据,能够有效地捕捉和分析复杂关系和模式。同时,推荐系统正逐步成为我们日常生活的一部分&#…

机器学习——绪论总结

目录 一、引入 二、基本术语 三、假设空间与归纳偏 四、模型选择 一、引入 机器学习:通过计算手段,得出具有能够自我修改、完善能力的模型,利用经验改善系统自身性能。算法使用数据得到模型的过程即称为学习,或训练 流程&…

vs 撤销本地 commit 并保留更改

没想到特别好的办法,我想的是用 vs 打开 git 命令行工具 然后通过 git 命令来撤销提交,尝试之前建议先建个分支实验,以免丢失代码, git 操作见 git 合并多个 commit / 修改上一次 commit

Kotlin快速入门系列9

Kotlin对象表达式和对象声明 对象表达式 有时,我们想要创建一个对当前类有些许修改的对象同时又不想重新声明一个子类。如果是Java,可以用匿名内部类的概念来解决这个问题。kotlin的对象表达式和对象声明就是为了实现这一点(创建一个对某个类做了轻微改…

【极数系列】Flink集成DataSource读取集合数据(07)

文章目录 01 引言02 简介概述03 基于集合读取数据3.1 集合创建数据流3.2 迭代器创建数据流3.3 给定对象创建数据流3.4 迭代并行器创建数据流3.5 基于时间间隔创建数据流3.6 自定义数据流 04 源码实战demo4.1 pom.xml依赖4.2 创建集合数据流作业4.3 运行结果日志 01 引言 源码地…

Flink实战四_TableAPISQL

接上文:Flink实战三_时间语义 1、Table API和SQL是什么? 接下来理解下Flink的整个客户端API体系,Flink为流式/批量处理应用程序提供了不同级别的抽象: 这四层API是一个依次向上支撑的关系。 Flink API 最底层的抽象就是有状态实…

海外云手机对于亚马逊卖家的作用

近年来,海外云手机作为一种新型模式迅速崭露头角,成为专业的出海SaaS平台软件。海外云手机在云端运行和存储数据,通过网页端操作,将手机芯片放置在机房,通过网络连接到服务器,为用户提供便捷的上网功能。因…

双通道音频功率放大电路——D2822M,交越失真,静态电流,外围元件少。开机和关机无冲击噪声

D2822M 用于便携式录音机和收音机作音频功率放大器。 D2822M 采用 DIP8 和 SOP8 封装形式。 特点:  电源电压降到 1.8V 时仍能正常工作  交越失真小  静态电流小  可作桥式或立体声式功放应用  外围元件少  通道分离度高  开机和关机…

【中关村开源生态论坛暨大模型智能应用技术大会】—— 探索AI和开源在未来的应用

🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​💫个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-9ttR7rpX3BzyF2C4 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

穷游网酒店数据采集与可视化分析与实现

摘 要 穷游网酒店数据采集与可视化分析大屏的背景是为了满足用户对酒店数据的需求以及提供数据洞察和决策支持。随着旅游业的快速发展,人们对酒店信息的需求日益增加,而穷游网作为一家专注于旅游信息的网站,拥有丰富的酒店数据资源。 这个大…

二维数组的学习

前言 在前面我们学习了一维数组,但是有的问题需要用二位数组来解决。 二维数组常称为矩阵,把二维数组写成行和列的排列形式,可以有助于形象化的理解二维数组的逻辑结构。 一、二维数组的定义 二维数组定义的一般格式: 数据类型 数…

百度智能小程序开发平台:SEO关键词推广优化 带完整的搭建教程

移动互联网的普及,小程序成为了众多企业和开发者关注的焦点。百度智能小程序开发平台为开发者提供了一站式的解决方案,帮助企业快速搭建并推广自己的小程序。本文将重点介绍百度智能小程序开发平台的SEO关键词推广优化功能,并带完整的搭建教程…

ElementUI Form:Radio 单选框

ElementUI安装与使用指南 Radio 单选框 点击下载learnelementuispringboot项目源码 效果图 el-radio.vue 页面效果图 项目里el-radio.vue代码 <script> export default {name: el_radio,data() {return {radio: 1,radio2: 2,radio3: 3,radio4: 上海,radio5: 上海,ra…

数据结构--堆排序(超详细!)

一、前言 堆排序与Top K问题是堆的两大应用&#xff0c;在我们日常也有很广泛的用处 我们已经上面已经说过了堆&#xff0c;这次来说堆的其中一个应用---堆排序。 二、堆排序 堆排序优势在哪里&#xff1f;有什么恐怖之处吗&#xff1f; 重点&#xff1a;拿一个举例&…

fiber学习

React原理&#xff1a;通俗易懂的 Fiber - 掘金

泰迪智能科技生成式人工智能(AIGC)实验室解决方案

AIGC&#xff08;Artificial Intelligence Generated Content&#xff0c;生成式人工智能&#xff09;是一种新的人工智能技术&#xff0c;指的是利用人工智能技术来生成内容。这种技术可以自动生成文本、图像、音频和视频等多种类型的内容&#xff0c;而且内容的质量较高&…

Qt Excel读写 - QXlsx的安装配置以及测试

Qt Excel读写 - QXlsx的安装配置以及测试 引言一、安装配置二、简单测试 引言 Qt无自带的库处理Excel 文件&#xff0c;但可通过QAxObject 借助COM接口进行Excel的读写1。亦可使用免费的开源第三方库&#xff1a;QXlsx&#xff0c;一个基于Qt库开发的用于读写Microsoft Excel文…

Security ❀ TCP异常报文详解

文章目录 1. TCP Out-Of-Order2. TCP Previous Segment Lost3. TCP Retransmission4. TCP Dup Ack XXX#X5. TCP Windows Update6. TCP Previous segment not captured7. 异常案例分析 TCP协议中seq和ack seq的联系&#xff1a; id4的http请求报文由客户端发向服务器&#xff0…

【Prometheus】Prometheus的PromQL语句

Prometheus promQL的语法&#xff1a; #时间序列 node_cpu_guest_seconds_total{cpu"0"} 监控&#xff08;指标数据&#xff09; {标签} node使用CPU的描述的统计&#xff0c;符合标签CPU0的时间序列的查询结果 指标标签生成时间序列 标签&#xff1a; __address…