ElementUI安装与使用指南

news2024/12/28 19:04:58

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.coloradmin.cn/o/1421992.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

界面控件DevExtreme v23.2新版亮点 - 全新的Fluent主题

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac&#xff0c…

[力扣 Hot100]Day18 矩阵置零

题目描述 给定一个 m x n 的矩阵,如果一个元素为 0 ,则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 出处 思路 在原数组上直接操作势必会出现“冗余”的0,即原本[i,j]处不是0,例如由于i行的其他位置有0导致[i,j]…

【深度学习每日小知识】Precision 精度

Precision 精度 精度是机器学习 (ML) 中分类器或预测器准确性的度量。它被定义为分类器做出的真正正预测数与分类器所做的正预测总数之比。换句话说,真正正确的是正面预测的比例。 精度是机器学习中的一个关键参数,因为它量化了…

Adobe Photoshop 2024 v25.4.0 - 专业的图片设计软件

Adobe Photoshop 2024 v25.4.0更新了,从照片编辑和合成到数字绘画、动画和图形设计,任何您能想象到的内容都能通过PS2024轻松实现。 利用人工智能技术进行快速编辑。学习新技能并与社区分享您的工作。借助我们的最新版本,做令人惊叹的事情从未…

Java中支持父类转子类,不支持子类转父类吗?

不,我的意思是正好相反。在 Java 中: 子类转父类(向上转型):这是自动的且总是安全的。子类是父类的一个特化,因此子类的对象可以被视为是父类的一个实例。例如,如果 ExamineApproveNode 是 Base…

【Tomcat与网络3】Tomcat的整体架构

目录 1.演进1:将连接和处理服务分开 2演进2:Container的演进 3 再论Tomcat的容器结构 4 Tomcat处理请求的过程 5 请求的处理过程与Pipeline-Valve管道 在前面我们介绍了Servlet的基本原理,本文我们结合Tomcat来分析一下如何设计一个大型…

小程序真机调试websocket错误码1006

有心跳机制 模拟器上都没问题连接稳定 一到真机就30秒断连 怎么解决救救我T_T

Flink CEP实现10秒内连续登录失败用户分析

1、什么是CEP? Flink CEP即 Flink Complex Event Processing,是基于DataStream流式数据提供的一套复杂事件处理编程模型。你可以把他理解为基于无界流的一套正则匹配模型,即对于无界流中的各种数据(称为事件),提供一种组合匹配的…

C#,欧拉数(Eulerian Number)的算法与源代码

1 欧拉数 欧拉数特指 Eulerian Number,不同于 Euler numbers,Eulers number 哦。 组合数学中,欧拉数(Eulerian Number)是从1到n中正好满足m个元素大于前一个元素(具有m个“上升”的排列)条件的…

C++ 之LeetCode刷题记录(二十三)

😄😊😆😃😄😊😆😃 开始cpp刷题之旅。 目标:执行用时击败90%以上使用 C 的用户。 118. 杨辉三角 给定一个非负整数 numRows,生成「杨辉三角」的前 numRows …

力扣hot100 括号生成 递归回溯 超简洁版

Problem: 22. 括号生成 Code 使用 static 会被复用 class Solution {List<String> ans new ArrayList<>();public List<String> generateParenthesis(int n){dfs(n, n, "");return ans;}/*** param l 左括号待补个数* param r 右括号待补个数*…

flask+django基于python的网上美食订餐系统_3lyq1

设计旨在提高顾客就餐效率、优化餐厅管理、提高订单准确性和客户的满意度。本系统采用 Python 语言作为开发语言&#xff0c;采用Django框架及其第三方库和第三方工具来进行开发。该方案分为管理员功能模块&#xff0c;商家功能模块以及用户前后功能模块三部分。开发前期根据用…

方法阻塞的解决方案之一

1、简单使用 一个h一个cpp文件 #pragma once #include <iostream> #include <thread> #include <atomic> #include <chrono> #include <string>class Person {public:struct dog {std::string name;int age;};public:void a(std::atomic<bo…

系统架构设计师-22年-下午题目

系统架构设计师-22年-下午题目 更多软考知识请访问 https://ruankao.blog.csdn.net/ 试题一必答&#xff0c;二、三、四、五题中任选两题作答 试题一 (25分) 说明 某电子商务公司拟升级其会员与促销管理系统&#xff0c;向用户提供个性化服务&#xff0c;提高用户的粘性。…

在线版XD,免费使用,功能全面,设计神器!

Adobe XD是什么软件&#xff1f; Adobe XD软件是一个结合设计和建立原型功能的一站式UX/UI设计平台。在XD软件中&#xff0c;数字团队可以进行移动应用、网页设计和原型制作。与此同时&#xff0c;Adobe XD软件也是一种跨平台设计产品&#xff0c;结合设计和建立原型功能&…

探索世界的奇妙之旅——Google Earth Pro(谷歌地球)软件介绍

Google Earth Pro&#xff08;谷歌地球&#xff09;是一款由谷歌公司开发的地图浏览和虚拟地球软件&#xff0c;为用户提供了全球范围内精确的地理浏览和探索功能。该软件整合了卫星图像、地图、地形、建筑物和3D视图等多种信息&#xff0c;让用户可以深入了解世界各地的地理特…

SQL注入:宽字节注入

SQL注入系列文章&#xff1a; 初识SQL注入-CSDN博客 SQL注入&#xff1a;联合查询的三个绕过技巧-CSDN博客 SQL注入&#xff1a;报错注入-CSDN博客 SQL注入&#xff1a;盲注-CSDN博客 SQL注入&#xff1a;二次注入-CSDN博客 ​SQL注入&#xff1a;order by注入-CSDN博客 …

nacos启动成功,程序连接失败

问题&#xff1a;nacos服务器启动成功后可以访问&#xff0c;但是程序连接却超时 解决&#xff1a;检查端口&#xff0c;2.0以上的版本需要开放的端口一共是三个&#xff01;&#xff01; 8848 9848 9849 找了很久是因为后面两个端口没有开放&#xff0c;原因是因为2.0以上…

STM32F407移植OpenHarmony笔记3

接上一篇&#xff0c;搭建完环境&#xff0c;找个DEMO能跑&#xff0c;现在我准备尝试从0开始搬砖。 首先把/device和/vendor之前的代码全删除&#xff0c;这个时候用hb set命令看不到任何项目了。 /device目录是硬件设备目录&#xff0c;包括soc芯片厂商和board板级支持代码…