Vue脚手架中安装ElementUi

news2024/11/23 11:33:35

目录

ElementUi简介: 

ElementUi下载:

npm 安装:

引入ElementUi:

测试是否引入成功:


Element-ui官网:组件 | Element

ElementUi简介: 

ElementUi,是由国内的饿了么团队开发并开源的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

简单的说ElementUi是一个基于Vue的Ui框架,适用于PC端,是当今最流行、最常用的ui。

ElementUi下载:

下载的前提要有node.js,之前那章博客发过。

先以管理员方式打开《命令提示符》,就是win+R,填cmd那个东西。

npm 安装:

使用vue-cli-plugin-element插件。此插件可以按需安装,也可以全部安装。

// 在项目的根目录下,执行命令
vue add element

 输入完之后会有出现这些命令:

第一个选择:

我们选择第一个

 第二个选择:

我们输入n

第三个选择:

我们选择第一个

判断是否成功安装上:

如果你目录中多了此目录,并且有个element.js文件就证明安装上了。

引入ElementUi:

在工程中的src目录下的main.js中引入ElementUi。

 

在main.js中引入代码:

下面代码中有些代码是自带的,可以直接复制这个代码,直接覆盖你的代码。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import './plugins/element.js'

Vue.config.productionTip = false

Vue.use(ElementUI)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

测试是否引入成功:

随便在目录中找一个组件,添加个element-ui的样式,试一下能不能出来

这里我是添加了一个最基础的按钮样式,测试成功。 

 

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

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

相关文章

美五代机装备激光武器可行性分析

源自:北京蓝德信息科技有限公司 一、SHiELD项目研究进展分析 图表:SHiELD项目主要情况 二、机载激光武器面临的技术挑战分析 三、五代机装备激光武器的可行性 声明:公众号转载的文章及图片出于非商业性的教育和科研目的供大家参考和探讨,并不…

三维模型OBJ格式轻量化压缩处理效率提高的技术方法探讨

三维模型OBJ格式轻量化压缩处理效率提高的技术方法探讨 要提高三维模型OBJ格式轻量化压缩处理的效率,可以采取以下方法: 1、优化算法选择:选择合适的优化算法对模型进行轻量化处理。不同的优化算法有不同的时间复杂度和效果。一些常用的优化…

软件测试用例经典方法 | 因果图法及案例

典型的黑盒测试用例设计方法包括等价类划分法、边界值分析法、决策表法、因果图法等。 如果程序的输入条件之间相互存在联系,那么就会使情况变得复杂,因为要检查输入条件的组合情况并不是一件容易的事情,即使把所有输入条件划分为等价类,它们之间的组合情况也相当多,难以分析。…

【Go 基础篇】深入探索:Go语言中的二维数组

在计算机编程中,数组是一种基本的数据结构,用于存储相同类型的元素。而二维数组作为数组的一种扩展,允许我们以类似表格的方式存储和处理数据。在Go语言中,二维数组是一个重要的概念,本文将深入探讨Go语言中的二维数组…

兄弟,王者荣耀的段位排行榜是通过Redis实现的?

目录 一、排行榜设计方案1、数据库直接排序2、王者荣耀好友排行 二、Redis实现计数器1、什么是计数器功能?2、Redis实现计数器的原理(1)使用INCR命令实现计数器(2)使用INCRBY命令实现计数器 三、通过Redis实现“王者荣…

基于知识引入的情感分析研究综述

1.引文 情感分析知识 当training数据不足以覆盖inference阶段遇到的特征时,是标注更多的数据还是利用现有外部知识充当监督信号? 基于机器学习、深度学习的情感分析方法,经常会遇到有标注数据不足,在实际应用过程中泛化能力差的局…

C语言巧用联合体union判定数据的存储格式(大小端)

联合体大家可能比较陌生,但是大家对结构体稍微熟悉一点吧。其实它们二个类似,只不过结构体成员占用不同的地址,而联合体所有成员占用相同地址。利用这个特性我们就能判断在当前编译器下存储的数据的格式。那么如何确定呢? 我这里…

FPGA GTX全网最细讲解,aurora 8b/10b协议,OV5640板对板视频传输,提供2套工程源码和技术支持

目录 1、前言免责声明 2、我这里已有的 GT 高速接口解决方案3、GTX 全网最细解读GTX 基本结构GTX 发送和接收处理流程GTX 的参考时钟GTX 发送接口GTX 接收接口GTX IP核调用和使用 4、设计思路框架视频源选择OV5640摄像头配置及采集动态彩条视频数据组包GTX aurora 8b/10b数据对…

Java“牵手”天猫图片识别商品信息API接口数据,图片搜索商品接口,天猫拍立淘API接口申请指南

天猫平台按图搜商品接口(拍立淘)是开放平台提供的一种API接口,通过调用API接口,开发者可以获取天猫商品的标题、价格、库存、月销量、总销量、库存、详情描述、图片、最低价、当前价格、价格信息等详细信息 。 获取拍立淘接口API…

Spring Boot Actuator的Env端点存在本地文件包含(LFI)漏洞CVE-2020-5421

文章目录 0.前言1.参考文档2.基础介绍3.漏洞利用原理3.解决方案1. 升级Spring Boot版本2. 限制端点的访问3. 禁用环境端点4. 不公开敏感的Actuator端点5. 开启安全审计 0.前言 背景: Spring Boot Actuator的Env端点存在本地文件包含(LFI)漏洞CVE-2020-5421。被扫描到…

软件工程(二十) 系统运行与软件维护

1、系统转换计划 1.1、遗留系统的演化策略 时至今日,你想去开发一个系统,想完全不涉及到已有的系统,基本是不可能的事情。但是对于已有系统我们有一个策略。 比如我们是淘汰掉已有系统,还是继承已有系统,或者集成已有系统,或者改造遗留的系统呢,都是不同的策略。 技术…

雪花假设:训练deep GNN 新思路

本文由中科大数据智能实验室联合阿卜杜拉国王科技大学(KSUST)、同济大学、新加坡国立大学、深圳科技大学、香港科技大学等多家院校联合提出了一种全新的训练深度GNN的策略—雪花假设,旨在帮助未来训练深度GNN并克服其中可能出现的over-smooth…

让敌人分兵,就能创造局部优势

让敌人分兵,就能创造局部优势 【安志强趣讲《孙子兵法》第22讲】 【原文】 故备前则后寡,备后则前寡,备左则右寡,备右则左寡,无所不备,则无所不寡。寡者,备人者也;众者,使…

软件工程(十八) 行为型设计模式(四)

1、状态模式 简要说明 允许一个对象在其内部改变时改变它的行为 速记关键字 状态变成类 类图如下 状态模式主要用来解决对象在多种状态转换时,需要对外输出不同的行为的问题。比如订单从待付款到待收货的咋黄台发生变化,执行的逻辑是不一样的。 所以我们将状态抽象为一…

软件工程(十七) 行为型设计模式(三)

1、观察者模式 简要说明 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并自动更新 速记关键字 联动,广播消息 类图如下 基于上面的类图,我们来实现一个监听器。类图中的Subject对应我们的被观察对象接口(IObservable),…

软件工程(十六) 行为型设计模式(二)

1、迭代器模式 简要说明 提供一种方法来顺序访问一个聚合对象中的各个元素,而不是暴露该对象的内部状态 速记关键字 数据集,迭代,循环 类图如下 其实迭代器模式在我们的不同语言中,均对其实现了,就是我们的各种集合,List,Set等都是迭代器模式的实现。 就是把一个集…

09 mysql fetchSize 所影响的服务器和客户端的交互

前言 这是一个 之前使用 spark 的时候 记一次 spark 读取大数据表 OOM OutOfMemoryError: GC overhead limit exceeded 因为一个 OOM 的问题, 当时使用了 fetchSize 的参数 应用服务 hang 住, 导致服务 503 Service Unavailable 在这个问题的地方, 出现了一个查询 32w 的数据…

【javaweb】学习日记Day6 - Mysql 数据库 DDL DML

之前学习过的SQL语句笔记总结戳这里→【数据库原理与应用 - 第六章】T-SQL 在SQL Server的使用_Roye_ack的博客-CSDN博客 目录 一、概述 1、如何安装及配置路径Mysql? 2、SQL分类 二、DDL 数据定义 1、数据库操作 2、IDEA内置数据库使用 (1&…

特征工程 – Feature Engineering

特征工程是机器学习工作流程中重要的组成部分,他是将原始数据「翻译」成模型可理解的形式。 特征工程的重要性 基于大量数据的简单模型优于基于少量数据的复杂模型。 更多的数据优于聪明的算法,而好的数据优于多的数据。 所以,如何基于给定数…

CSS中如何实现背景图片的平铺和定位?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 平铺背景图片⭐ 背景图片定位⭐ 同时设置平铺和定位⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是…