【已解决】引入 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.xdnf.cn/news/1452092.html

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

相关文章

VictoriaMetrics的高可用二进制方式部署

参考文章实现&#xff1a;Prometheus联邦集群VictoriaMetrics集群搭建部署 1.基本信息 涉及机器列表&#xff0c;机器均为本地虚拟机 192.168.56.108 192.168.56.109方案实现如下 涉及模块介绍 vmstorage: 数据存储节点&#xff0c;负责存储时序数据vmselect: 数据查询节点…

upload-labs第九关教程

upload-labs第九关教程 一、源代码分析代码审计::$DATA介绍 二、绕过分析特殊字符::$data绕过上传eval.php使用burpsuite抓包进行修改放包&#xff0c;查看是否上传成功使用中国蚁剑进行连接 一、源代码分析 代码审计 $is_upload false; $msg null; if (isset($_POST[submi…

关闭kylin(麒麟)系统的安全认证(烦人的安全认证)

打开grub sudo vim /etc/default/grup修改安全认证选项 增加12行&#xff0c;把13行注释掉 保存更改, 然后执行下面的命令&#xff1a; sudo sync sudo reboot重启成功后&#xff0c;就关闭了安全认证了~~~~~。 总体来讲&#xff0c;kylin还是基于ubuntu的内核的&#xff0c;…

图解Transformer学习笔记

教程是来自https://github.com/datawhalechina/learn-nlp-with-transformers/blob/main/docs/ 图解Transformer Attention为RNN带来了优点&#xff0c;那么有没有一种神经网络结构直接基于Attention构造&#xff0c;而不再依赖RNN、LSTM或者CNN的结构&#xff0c;这就是Trans…

【网络编程】域名及网络地址

DNS(Domain Name System&#xff0c;域名系统)&#xff0c;是对IP地址和域名进行互相转换的系统&#xff0c;其核心是DNS服务器。 域名&#xff1a;提供网络服务的服务器端也是通过IP地址去份额&#xff0c;但IP地址难记&#xff0c;因此将容易记、易表述的域名分配并取代IP地…

186.二叉树:二叉搜索树中的插入操作(力扣)

代码解决 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(nullptr) {}* Tre…

PMS助力制造企业高效运营︱PMO大会

全国PMO专业人士年度盛会 北京易贝恩项目管理科技有限公司副总经理朱洪泽女士受邀为PMO评论主办的2024第十三届中国PMO大会演讲嘉宾&#xff0c;演讲议题为“PMS助力制造企业高效运营”。大会将于6月29-30日在北京举办&#xff0c;敬请关注&#xff01; 议题简要&#xff1a; …

音频处理软件adobe audition使用教程

基本操作 点击文件-》新建-》多轨会话&#xff1a; 编辑-》首选项&#xff0c;设置自动保存时间&#xff1a; 导入素材&#xff0c;文件-》导入素材&#xff0c;或者直接拖动进来文件&#xff01; 导出多轨混音&#xff1a; 更改为需要导出的格式wav,mp3等格式&#xff0c;码…

【触想智能】壁挂式工业一体机在智能制造行业上的应用分析

随着智能制造的兴起&#xff0c;壁挂式工业一体机成为了越来越多工厂的首选设备。壁挂式工业一体机是一种高性能的计算机&#xff0c;内置多种工业级传感器和执行器&#xff0c;可以实时获取工厂生产过程中的各种数据&#xff0c;并与其他设备进行无缝连接。 为了大家更深入的了…

一文读懂数字化转型三部曲:信息化-数字化-数智化

言简意赅&#xff0c;数字化就是把物理实体、业务流程和信息数据转换为数字形式&#xff0c;比如原本公司的账都记在纸质账本上&#xff0c;堆在仓库里&#xff0c;通过“数字化”&#xff0c;这些账本就被存入了线上的仓库里。而数智化则更加注重对数据的分析和利用&#xff0…

方案开发 2.4G儿童遥控漂移车 东莞酷得

电子方案开发定制&#xff0c;我们是专业的 东莞酷得智能单片机方案之2.4G遥控玩具童车具有以下比较有特色的特点&#xff1a; 1、内置充电电池&#xff1a;这款小车配备了可充电的电池&#xff0c;无需频繁更换电池&#xff0c;既环保又方便。充电方式可能为USB充电或者专用…

快速上手SpringBoot

黑马程序员Spring Boot2 文章目录 1、SpringBoot 入门程序开发1.1 创建一个新的项目 2、浅谈入门程序工作原理2.1 parent2.2 starter2.3 引导类2.4 内嵌tomcat 1、SpringBoot 入门程序开发 1.1 创建一个新的项目 file > new > project > empty Project 创建新模块&a…

阿里新发布的UniAnimate现高效人像动画生成;在ComfyUI中使用Stable 3模型;音频版的gpt2o;将 PDF 文档转换为音频播客

✨ 1: UniAnimate 阿里新发布的UniAnimate通过统一的视频扩散模型&#xff0c;实现高效人像动画生成&#xff0c;支持长视频生成 UniAnimate 是一种专注于一致性人像动画生成的统一视频扩散模型。该模型通过映射参考图像、姿势指导和噪声视频到一个共同特征空间&#xff0c;实…

「动态规划」如何求最大子数组和?如何求环形子数组的最大和?

53. 最大子数组和https://leetcode.cn/problems/maximum-subarray/description/ 给你一个整数数组nums&#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。子数组是数组中的一个连续部分。 输入&#…

Studio One软件最新版下载及详细安装教程

Studio One 6是一款功能丰富、专业级的音乐制作软件&#xff0c;它具备灵活的工作流程和高效的团队协作能力&#xff0c;能帮助用户实现高质量的音乐创作和制作。 智能模板更快的启动&#xff0c;全新的智能模板为你手头的任务提供了必要的工具集&#xff0c;包括基本录制、混音…

这世上又多了一只爬虫(spiderflow)

让我们一起默念&#xff1a; 爬虫爬虫爬虫爬虫爬虫爬虫爬虫爬虫爬虫爬虫爬虫爬虫爬虫爬虫爬虫爬虫爬虫爬虫爬虫爬虫爬虫爬虫爬虫 接着大声喊出来&#xff1a; 一&#xff01;只&#xff01;爬&#xff01;虫&#xff01;呀&#xff01;爬&#xff01;呀&#xff01;爬&#xf…

HTMLCSS详细总结(提高版)

HTML5的新特性 1. HTML5 新增的语义化标签 <div class“header”> </div> <div class“nav”> </div> <div class“content”> </div> <div class“footer”> </div> <header>&#xff1a;头部标签<nav>&#…

教师人才引进需要什么条件

在这个竞争激烈的时代&#xff0c;学校和教育机构都在寻求优秀的教育工作者&#xff0c;以提升教学口碑和学生的学习体验。而引进教师人才可并非易事&#xff0c;涉及到多方面的考量。 专业素养。一个优秀的教师需要具备扎实的专业知识和教育理论&#xff0c;能够不断更新自己的…

【算法专题--链表】反转链表II--高频面试题(图文详解,小白一看就会!!!)

目录 一、前言 二、题目描述 三、解题方法 ⭐迭代法 --- 带哨兵位&#xff08;头节点&#xff09; &#x1f95d; 什么是哨兵位头节点&#xff1f; &#x1f34d; 解题思路 四、总结与提炼 五、共勉 一、前言 反转链表II这道题&#xff0c;可以说是--链表专题--&am…

深入学习Java `synchronized` 关键字

深入学习Java synchronized 关键字 synchronized关键字通过确保在同一时间只有一个线程可以执行某个代码块&#xff0c;从而防止多个线程同时访问共享资源时发生数据不一致的问题。 修饰方法 当synchronized用于修饰实例方法时&#xff0c;表示当前实例对象是同步锁。这意味…