0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

Element UI的安装

汽车电子技术 来源:Java大联盟 作者:楠哥 2023-02-28 15:32 次阅读

Element UI简介


Element UI 是一套基于 Vue 的桌面端组件库,封装好了很多常用的 UI 组件,开发者可以使用 ElementUI 快速搭建一个网站。

官网:https://element.eleme.cn/

官网中有各个组件使用的详细教程,非常全面,楠哥写这篇教程的目的是帮助大家快速上手 Element UI 的使用,大家在实际开发中可以结合官网文档来完成具体业务代码的开发。

Element UI 安装

要使用 Element UI,首先确保你的电脑上已经成功安装了 Vue,这里不再介绍 Vue 的安装步骤,没有安装 Vue 的小伙伴可以自行查找教程进行安装。

1、创建 Vue 工程,命令如下。

vue ui

2、选择“创建”,设置工程存放路径,点击下方的“在此创建新项目”按钮。

poYBAGP9rYuAYSpjAAA0pkQSFvA462.png

3、输入工程名,点击下方的“下一步”按钮。


pYYBAGP9rZ2AIJQwAAFQzucFzhQ780.png


4、选择“手动配置项目”,点击“下一步”按钮。


poYBAGP9raeARC0UAACuUTNO7DM292.png

5、打开 Router、Vuex选项,关闭Linter / Formatter选项,点击“下一步”按钮。

poYBAGP9ra6AOMcVAADXWtb6jd8190.png

6、打开Use history mode for router选项,点击“下一步”按钮。

poYBAGP9rbaAApjLAAB2jQZz0d0752.png

7、点击“创建项目,不保存预设”,然后耐心等待,创建完成之后会跳转到主页面。

pYYBAGP9rb2AOBrwAABtYfOF6M0734.png

8、点击“添加插件”按钮。

pYYBAGP9rcaAWM7AAABZ6M5MnXk111.png

9、在搜索框输入“element”。


poYBAGP9rc2AdL2zAACdv9E4xgk902.png


10、选中第一个,点击“安装 vue-cli-plugin-element”,耐心等待即可。

pYYBAGP9rdKALZUuAAFFbxmZAhc522.png

11、打开项目,在 App.vue 中添加如下代码。

默认按钮

运行项目,如果能看到如下效果图,则说明 Element UI 已安装成功。

pYYBAGP9reGAT0qhAAAedb2PHUs924.png

以上就是 Element UI 安装的全部步骤,下一篇教程楠哥将带领大家正式开始学习 Element UI 具体组件的使用,如果你觉得这篇教程对你有帮助,就帮楠哥点个赞吧,我们下期教程再见。

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • ui
    ui
    +关注

    关注

    0

    文章

    204

    浏览量

    21339
  • Elements
    +关注

    关注

    0

    文章

    6

    浏览量

    5299
  • vue
    vue
    +关注

    关注

    0

    文章

    57

    浏览量

    7803
收藏 人收藏

    评论

    相关推荐

    element14推出全新版本element14专题Buck Boost

    element14日前宣布推出最新版element14专题Buck Boost!工程师可以通过Buck Boost获得品种繁多的无源和分立元件、全面的设计资源以及限量版的Escape Robot Kit。 element14所拥
    发表于 11-09 09:44 1997次阅读

    ADS是否支持RLGC中的hspice w-element

    嗨,ADS是否支持使用RLGC模型规范描述传输线的HSPICE'W-element'语句?如果我想将传输线的HSPICE模型导入ADS,使用w-element语句,ADS表示此元素类型无法识别。亲切
    发表于 07-29 13:38

    element-ui组件如何引入

    关于webpack引入element-ui组件优化问题
    发表于 06-11 17:03

    分享一下Element UI多选框组用法笔记

    今天继续给大家分享一下Element UI 多选框组用法笔记,直接上代码!1、HTML
    发表于 01-18 07:53

    【软通动力鸿湖万联扬帆系列“竞”开发板试用体验】基于JS UI框架的视频播放应用

    前言本Demo基于JS UI实现视频播放。可以通过video自带的控制栏进行播放、暂停等操作。过程从以下地址下载代码https://gitee.com/qinyunti
    发表于 10-30 15:29

    GStreamer-CRITICAL:gst_element_link_many:断言“GST_IS_ELEMENT (element_2)”失败怎么解决?

    **: 00:00:51.967: gst_element_link_many: assertion 'GST_IS_ELEMENT (element_2)' failed。谁能帮我解决这个问题?
    发表于 03-31 06:41

    A finite element analysis of f

    A finite element analysis of frequency–temperature relations of AT-cut quartz crystal resonators
    发表于 11-24 16:37 8次下载

    Show element on net, Total Etc

    Show element on net, Total Etch Length, Total Path Length, Total Manhattan Length 各代表什么意义1.
    发表于 09-06 12:07 0次下载

    湿敏元件moisture sensitive element

    湿敏元件moisture sensitive element     利用湿敏材料对水分子的吸附能力或对水分子产生物理效应的方法
    发表于 11-12 16:38 2406次阅读

    element14丰富XP Power电源解决方案库存

    首个融合电子商务与在线社区的电子元件分销商e络盟母公司element14近日宣布,将新增超过200种XP Power公司的产品,进一步丰富其在亚太区的130,000种产品库存。element14目前销售来自XP Pow
    发表于 10-09 09:20 2682次阅读

    element14公司的半导体产品概述

    element14公司的半导体产品组合来自包括Altera、LinearTechnologies、Vishay、OnSemi及NXP在内的全球供应商。通过element14公司的多渠道采购,客户可以
    发表于 09-11 14:18 8次下载

    LeetCode 215. Kth Largest Element in an Array

    LeetCode 215. Kth Largest Element in an ArrayDescription Find the kth largest element
    发表于 01-17 01:46 419次阅读

    网页UI设计与软件UI设计是一样的吗

    随着科技水平不断的发展,网站UI设计也越来越多地体现出“用”的功能,使得网站UI设计与软件UI设计在这方面的界限越来越不明显了。
    发表于 03-18 11:32 1915次阅读

    UI设计是什么?推荐的UI设计软件有哪些?

    在介绍这么文章在,我们先来来接一下UI。其实呢,UI就是User Interface(用户界面)的简称。我们常说的UI设计,其实是指对软件的人机交互、操作逻辑、界面美观的整体设计。一个好的UI
    的头像 发表于 06-24 14:19 1944次阅读
    <b class='flag-5'>UI</b>设计是什么?推荐的<b class='flag-5'>UI</b>设计软件有哪些?

    解析OneFlow Element-Wise算子实现方法

    虽然这种写法非常简单明了,但却存在明显的性能问题。所以这篇文章将基于OneFlow开源的Element-Wise CUDA算子方案来解释如何写一个高性能的Element-Wise CUDA算子。
    的头像 发表于 12-12 10:54 1505次阅读