【已解决】引入 element 组件无法使用编译错误 ERROR Failed to compile with 1 error

如果大家使用这个vue 配合 element 框架不熟练,当你顺利按照文档安装好 vue 和 element 的时候想要使用element 的组件时候确无法展示出来,甚至报错。不妨看看是不是这个问题,

1.首先使用element 的时候,前提是把必须要的 element 组件通过 yarm 或者 npm 安装一下。
2.安装的命令是 npm -i element --save (针对 vue2) | npm -i element-plus --save(vue3).
3.安装的时候会比较漫长,安装好后 会告诉你花费多少秒,安装了多少个包的提示,如图。

在这里插入图片描述
4.安装好后就可以导入这个组建了,在 main.js或者 main.ts里一定要导入

import ElementPlus from 'element-plus' //全局引入
import 'element-plus/dist/index.css' 

这俩,一个是组件,一个是样式缺一不可,在 main 里安装是全局引用,对懒人比较 友好,我比较喜欢,也有按需应用, 自己找找教程吧!!

5.然后在 app.vue或者自己创建一个组件,然后去使用这个官网文档里的组件 直接复制代码即可。
比如代码:

<template><el-button>我是 ElButton</el-button>
</template>
<script>import { ElButton } from 'element-plus'export default {components: { ElButton },}
</script>

在这里插入图片描述
到这就结束了如何使用 element 组件了,一定要按着这个步骤,否则就会有编译错误 ERROR Failed to compile with 1 error 或者是不显示组件样式等等。。

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

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

相关文章

TCGAbiolinks包学习

TCGAbiolinks 写在前面学习目的GDCquery GDCdownload GDC prepare中间遇到的报错下载蛋白质数据 写在前面 由于别人提醒我TCGA的数据可以利用TCGAbiolinks下载并处理&#xff0c;所以我决定阅读该包手册&#xff0c;主要是该包应该是有更新的&#xff0c;我看手册进行更新了&…

法国恐脱欧、陷金融危机!股指本周跌6.2%,创三年多最大跌幅

内容提要 法国财政部长警告称&#xff0c;左翼政党联盟若上台可能导致法国脱欧&#xff0c;而且无论极右翼还是左翼上台&#xff0c;都可能导致法国爆发金融危机。由于政坛风险高企&#xff0c;法国股市周五延续跌势&#xff0c;本周已经抹掉2100亿美元市值&#xff0c;几乎回…

[C++] 小游戏 斗破苍穹 2.11.6 版本 zty出品

大家好&#xff0c;今天zty带来的是斗破苍穹的 2.11.6 版本&#xff0c;这个版本主要更新了&#xff1a;1、背包 2、将退出游戏改到了设置里面 3、如果不逃跑不会停止战斗。废话不多说&#xff0c; 先赞后看 养成习惯 code #include<stdio.h> #include<iostrea…

MySQL学习——创建MySQL Workbench中的Connections

在MySQL Workbench中&#xff0c;Connections&#xff08;连接&#xff09;是用户与MySQL数据库进行交互的桥梁。 本文将添加一个新连接&#xff0c;该连接可以是初始连接&#xff0c;也可以是附加连接。在开始之前&#xff0c;必须安装、启动MySQL服务器的实例&#xff0c;并…

Web前端开发UL:探索与解构列表的奥秘

Web前端开发UL&#xff1a;探索与解构列表的奥秘 在Web前端开发的广阔领域中&#xff0c;UL&#xff08;Unordered List&#xff0c;无序列表&#xff09;元素扮演着至关重要的角色。它不仅是页面布局的基础构件&#xff0c;更是提升用户体验和增强信息可读性的关键所在。今天…

LLM时代中的AI推理

问题与挑战 毫无疑问&#xff0c;AI是当下最热的话题之一&#xff0c;而大模型又是当前AI的主角。几年前&#xff0c;正当深度学习进入瓶颈时&#xff0c;以GPT为首的LLM的横空出世让之似乎又找到了“第二增长曲线”。当模型规模大到一定程度时&#xff0c;它所表现出来的涌现…

【单片机毕业设计选题24007】-基于STM32和阿里云的家庭健康数据监测系统

系统功能: 本课题设计是基于STM32单片机作为控制主体&#xff0c;通过HX711称重模块&#xff0c;HC-SR04超声波测距模块&#xff0c;红外测温&#xff0c;心率传感器等模块通过I2C或SPI接口与STM32进行通信&#xff0c;并读取传感器输出的身高&#xff0c;体重&#xff0c;心率…

KaTex在博客中显示数学公式

使用KaTeX在博客中显示数学公式 KaTeX 是一个快速的数学排版库&#xff0c;它允许你在网页上美观且高效地展示数学公式。本文将介绍如何在博客中使用 KaTeX&#xff0c;并提供一些代码示例&#xff0c;帮助你快速上手。 什么是KaTeX&#xff1f; KaTeX 是由 Khan Academy 开…

29、matlab向量和矩阵算数运算汇总2:加、减、乘、除、幂、四舍五入

1、前言 矩阵向量的算数运算通常指的是矩阵和向量之间的加法、减法、标量乘法、矩阵乘以向量等操作。下面对矩阵向量的算术运算进行总结&#xff1a; 加法&#xff1a;矩阵和向量的加法是将矩阵的每一行分别与向量对应位置的元素进行相加&#xff0c;生成一个新的向量。 例如…

matlab-2-simulink-小白教程-如何绘制电路图进行电路仿真

以上述电路图为例&#xff1a;包含D触发器&#xff0c;时钟CLK,与非门 一、启动simulink的三种方式 方式1 在MATLAB的命令行窗口输入“Simulink”命令。 方式2 在MATLAB主窗口的“主页”选项卡中&#xff0c;单击“SIMULINK”命令组中的Simulink命令按钮。 方式3 从MATLAB…

FreeRTOS简单内核实现4 临界段

文章目录 0、思考与回答0.1、思考一0.2、思考二0.3、思考三 1、关中断1.1、带返回值1.2、不带返回值 2、开中断3、临界段4、应用 0、思考与回答 0.1、思考一 为什么需要临界段&#xff1f; 有时候我们需要部分代码一旦这开始执行&#xff0c;则不允许任何中断打断&#xff0…

『大模型笔记』Anthropic团队:什么是大模型的可解释性!

Anthropic团队:什么是大模型的可解释性! 文章目录 一. Anthropic团队:什么是大模型的可解释性!二. 参考文献我的小红书中英文双语视频:Anthropic团队:什么是大模型的可解释性!一. Anthropic团队:什么是大模型的可解释性! 我在Anthropic的可解释性团队工作。可解释性是…

【ArcGISProSDK】OpenItemDialog打开文件对话框

打开单个文件 效果 代码 public async void OpenFunction() {// 获取默认数据库var gdbPath Project.Current.DefaultGeodatabasePath;OpenItemDialog openItemDialog new OpenItemDialog() { Title "打开要素文件",InitialLocation gdbPath,Filter ItemFilte…

【LeetCode最详尽解答】271_编码和解码字符串 Encode-and-Decode-Strings

欢迎收藏Star我的Machine Learning Blog:https://github.com/purepisces/Wenqing-Machine_Learning_Blog。如果收藏star, 有问题可以随时与我交流, 谢谢大家&#xff01; 链接&#xff1a; 271_编码和解码字符串 直觉 我观看了 Neetnode 关于这个问题的视频。如果我们只是将…

解锁多线程新纪元:StampedLock源码深度剖析与实战应用

1. 引言 在Java的并发编程中,StampedLock是一个相对较新的锁机制,自Java 8起引入,旨在解决先前版本中如ReentrantReadWriteLock等锁实现所面临的问题,如锁饥饿等。StampedLock提供了一个灵活且高性能的并发控制机制,允许读者/写者锁、乐观读锁以及锁状态的精确控制。 2. …

花卉识别-python-pytorch-CNN深度学习含数据集+pyqt界面

代码下载地址&#xff1a; https://download.csdn.net/download/qq_34904125/89383063 本代码是基于python pytorch环境安装的。 下载本代码后&#xff0c;有个requirement.txt文本&#xff0c;里面介绍了如何安装环境&#xff0c;环境需要自行配置。 或可直接参考下面博文…

前端学习资源推荐

W3C 官网 网址: www.w3c.org简介: 万维网联盟&#xff08;World Wide Web Consortium&#xff09;的官方网站&#xff0c;提供最新的Web标准和规范。 W3School 网址: www.w3school.com.cn简介: 提供全面的Web开发教程&#xff0c;包括HTML, CSS, JavaScript等。 MDN Web Do…

qgis导入excel文件

arcgis有导入Excel的功能&#xff0c;只需要指定横纵坐标和坐标系即可。可是我对arcgis不熟悉&#xff0c;查了一下QGIS是否有导入Excel的功能。暂时没查到直接导入Excel的文档&#xff0c;只查到可以导入csv格式的数据。 2.1、将Excel另存为csv 略。wps、ms office Excel都能…

Stable Diffusion【应用篇】【艺术写真】:粘土风之后陶瓷风登场,来看看如何整合AI艺术写真吧

在国外的APP Remini引爆了粘土滤镜后&#xff0c;接着Remini又推出了瓷娃娃滤镜。相当粘土滤镜&#xff0c;个人更喜欢瓷娃娃滤镜&#xff0c;因为陶瓷工艺更符合东方艺术审美。 下面我们就来看看陶瓷特效在AI写真方面的应用。话不多说&#xff0c;我们直接开整。 关于粘土整…

Real3D:利用真实世界图像扩展3D重建模型

原理&#xff1a; 在3D重建领域&#xff0c;单视图重建任务由于其固有的不确定性而充满挑战。为了克服这一难题&#xff0c;研究者们一直在探索如何利用大型数据集训练模型以学习形状和纹理的通用先验知识。然而&#xff0c;现有训练方法依赖于合成数据或多视图捕获&#xff0c…