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

news2024/11/30 14:47:30

如果大家使用这个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.coloradmin.cn/o/1824586.html

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

相关文章

博科SAN交换机初始化和Zone创建

1 初始化 博科的SAN交换机默认配置&#xff1a; 地址&#xff1a;10.77.77.77 账户&#xff1a;admin 密码&#xff1a;password 设备硬件查看 ***-SAN-1:admin> chassisshowFAN Unit: 1 Fan Direction: Reverse (Non-portside Intake) Time Awake: 0 daysP…

基于Python+Flask+MySQL+HTML的B站数据可视化分析系统

FlaskMySQLVue 基于PythonFlaskMySQLHTML的B站数据可视化分析系统 项目采用前后端分离技术&#xff0c;项目包含完整的前端HTML&#xff0c;以及Flask构成完整的前后端分离系统 爬虫文件基于selenium&#xff0c;需要配合登录账号 简介 主页 登录页面&#xff0c;用户打开浏…

电脑屏幕录制怎么录制?这7个录制屏幕的技巧值得一试!

电脑屏幕录制怎么录制&#xff1f;屏幕录制是什么? 简单地说&#xff0c;电脑屏幕录制就是在你的设备屏幕上录制视频。它可以捕捉屏幕上正在发生的事情&#xff0c;并让你与其他人分享。记录电脑、手机或笔记本电脑屏幕的原因有很多&#xff1a; 1. 一个简单的屏幕录制可以用…

C++程序员笔试训练

面试题1&#xff1a;使用库函数将数字转换位字符串 考点&#xff1a;c语言库函数中数字转换位字符串的使用 char *gcvt(double number, int ndigit, char *buf);参数说明&#xff1a; number&#xff1a;待转换的double类型数值。 ndigit&#xff1a;保留的小数位数。 buf&am…

环保绩效创A带来的多重效益?

在当今时代&#xff0c;环境保护已成为全球共识&#xff0c;而重点行业的环保绩效创A更是推动绿色转型、朗观视觉实现可持续发展的关键所在。随着工业化进程的加快&#xff0c;环保问题日益凸显&#xff0c;如何通过环保绩效创A&#xff0c;推动重点行业走上绿色、低碳、循环的…

【C++】和【预训练模型】实现【机器学习】【图像分类】的终极指南

目录 &#x1f497;1. 准备工作和环境配置&#x1f495; &#x1f496;安装OpenCV&#x1f495; &#x1f496;安装Dlib&#x1f495; 下载并编译TensorFlow C API&#x1f495; &#x1f497;2. 下载和配置预训练模型&#x1f495; &#x1f496;2.1 下载预训练的ResNet…

文章MSM_metagenomics(三):Alpha多样性分析

欢迎大家关注全网生信学习者系列&#xff1a; WX公zhong号&#xff1a;生信学习者Xiao hong书&#xff1a;生信学习者知hu&#xff1a;生信学习者CDSN&#xff1a;生信学习者2 介绍 本教程使用基于R的函数来估计微生物群落的香农指数和丰富度&#xff0c;使用MetaPhlAn prof…

热镀锌钢板耐液体性能测 彩钢板抗拉强度检测

钢板检测范围&#xff1a;钢板、彩钢板、不锈钢板、耐磨钢板、合金钢板、压型钢板、冷轧钢板、弹簧钢板、碳钢板、热轧钢板、厚钢板、热镀锌钢板、冲孔钢板、船用钢板、硅钢板、花纹钢板、压力容器钢板、耐候钢板、 钢板检测项目包括化学性能检测、性能检测、机械性能检测、老…

JAVA-CopyOnWrite并发集合

文章目录 JAVA并发集合1_实现原理2_什么是CopyOnWrite?3_CopyOnWriteArrayList的原理4_CopyOnWriteArraySet5_使用场景6_总结 JAVA并发集合 从Java5开始&#xff0c;Java在java.util.concurrent包下提供了大量支持高效并发访问的集合类&#xff0c;它们既能包装良好的访问性能…

SwiGLU激活函数与GLU门控线性单元原理解析

前言 SwiGLU激活函数在PaLM&#xff0c;LLaMA等大模型中有广泛应用&#xff0c;在大部分测评中相较于Transformer FFN中所使用的ReLU函数都有提升。本篇先介绍LLaMA中SwiGLU的实现形式&#xff0c;再追溯到GLU门控线性单元&#xff0c;以及介绍GLU的变种&#xff0c;Swish激活…

phpcms仿蚁乐购淘宝客网站模板

phpcms仿蚁乐购网站模板&#xff0c;淘宝客行业模板免费下载&#xff0c;该模板网站很容易吸引访客点击&#xff0c;提升ip流量和pv是非常有利的。本套模板采用现在非常流行的全屏自适应布局设计&#xff0c;且栏目列表以简洁&#xff0c;非常时尚大气。页面根据分辨率大小而自…

华为北向网管NCE开发教程(7)历史告警采集

1准备工作 准备一个FTP服务器和网管北向网络通&#xff0c;网管北向生成告警文件&#xff0c;会推送到准备的FTP服务器上。 linux&#xff0c;都是自带FTP的&#xff0c;如果是linux则无需自己搭建&#xff0c;如果是windows则需要自己搭建 2生成告警文件 2.1方法说明getAll…

使用libcurl实现简单的HTTP访问

代码; #include <stdio.h> #include <stdlib.h> #include <curl/curl.h> // 包含libcurl库 FILE *fp; // 定义一个文件标识符 size_t write_data(void *ptr,size_t size,size_t nmemb,void *stream) { // 定义回调函数&#xff0c;用于将…

LeetCode-2779. 数组的最大美丽值【数组 二分查找 排序 滑动窗口】

LeetCode-2779. 数组的最大美丽值【数组 二分查找 排序 滑动窗口】 题目描述&#xff1a;解题思路一&#xff1a;滑动窗口与排序解题思路二&#xff1a;0解题思路三&#xff1a;0 题目描述&#xff1a; 给你一个下标从 0 开始的整数数组 nums 和一个 非负 整数 k 。 在一步操…

《华为项目管理之道》第1章笔记

《华为项目管理之道》&#xff0c;是新出的华为官方的项目管理书&#xff0c;整个书不错。第1章的精华&#xff1a; 1.2.2 以项目为中心的机制 伴随着项目型组织的建立&#xff0c;华为逐步形成了完备的项目管理流程和制度&#xff0c;从而将业务运 作构建在项目经营管理之…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 启动多任务排序(200分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 📎在线评测链接 启动多任务排序(200分) 🌍 评测功能需要订阅专栏后私信联系…

STM32HAL-最简单的时间片论法

目录 概述 一、开发环境 二、STM32CubeMx配置 三、编码 四、运行结果 五、总结 概述 本文章使用最简单的写法时间片论法框架,非常适合移植各类型单片机,特别是资源少的芯片上。接下来将在stm32单片机上实现,只需占用1个定时器作为tick即可。(按键框架+时间片论法)…

cs61C | lecture4

cs61C | lecture4 C 语言内存布局 ### Stack 在最顶部&#xff0c;向下增长。包含局部变量和 function frame information。 > Each stack frame is a contiguous block of memory holding the local variables of a single procedure. > A stack frame includes: > …

Leaflet集成wheelnav在WebGIS中的应用

目录 前言 一、两种错误的实现方式 1、组件不展示 2、意外中的空白 二、不同样式的集成 1、在leaflet中集成wheelnav 2、给marker绑定默认组件 2、面对象绑定组件 3、如何自定义样式 三、总结 前言 在之前的博客中&#xff0c;我们曾经介绍了使用wheelnav.js构建酷炫…

简易开发一个app

即时设计网站 即时设计 - 可实时协作的专业 UI 设计工具 需要先设计好UI界面 上传到codefun 首次需要安装 自动生成代码 打开hb软件 新建项目 打开创建的项目 删除代码 复制代码过去 下载图片 将图片放到文件夹里 改为这种格式 index.vue 如果不需要uni-app导航栏可以修改 …