【已解决】引入 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.mfbz.cn/a/710425.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++入门 vector介绍及使用

目录 vector的介绍及使用 vector常用接口的介绍及使用 vector的定义 vector iterator 的使用 vector 空间增长问题 vector 增删查改 push_back/pop_back insert & erase & find operator[ ]的遍历 vector的介绍及使用 vector的文档介绍 vector是表示可变大…

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

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

图解Transformer学习笔记

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

[2024-06]-[大模型]-[Ollama]- WebUI

主要涉及要部署的前端webui是来源于:https://github.com/open-webui/open-webui 正常就使用: docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-web…

深入浅出 Babel:现代 JavaScript 的编译器

在现代前端开发中&#xff0c;JavaScript 的版本更新速度非常快&#xff0c;新的语法和特性层出不穷。然而&#xff0c;旧版本的浏览器并不总是支持这些新特性。为了确保代码的兼容性和稳定性&#xff0c;我们需要一个工具来将现代 JavaScript 代码转换为旧版本的代码。Babel 就…

vue-element-admin后台集成方案

官网&#xff1a;介绍 | vue-element-adminA magical vue adminhttps://panjiachen.github.io/vue-element-admin-site/zh/guide 1.git环境安装配置及简单操作 1.1git环境安装配置 git软件官网&#xff1a;Git - Downloads (git-scm.com)https://git-scm.com/downloads 下载…

Java | Leetcode Java题解之第145题二叉树的后序遍历

题目&#xff1a; 题解&#xff1a; class Solution {public List<Integer> postorderTraversal(TreeNode root) {List<Integer> res new ArrayList<Integer>();if (root null) {return res;}TreeNode p1 root, p2 null;while (p1 ! null) {p2 p1.left…

JS 中的各种距离 scrollTop?clientHeight?

元素的各种距离 DOM 对象 属性描述offsetWidth只读&#xff0c;返回元素的宽度&#xff08;包括元素宽度、内边距和边框&#xff0c;不包括外边距&#xff09;offsetHeight只读&#xff0c;返回元素的高度&#xff08;包括元素高度、内边距和边框&#xff0c;不包括外边距&am…

【Java】多态、final关键字、抽象类、抽象方法

多态(Polymorphism) 【1】多态跟属性无关&#xff0c;多态指的是方法的多态&#xff0c;而不是属性的多态。 【2】案例代入&#xff1a; public class Animal {//父类&#xff1a;动物&#xff1a; public void shout(){ System.out.println("我是小动物&am…

linux中DNS域名解析服务(后续补充)

分离解析简介&#xff1a; 分离解析的域名服务器实际也是主域名服务器&#xff0c;这里主要是指根据不同的客户端提供不同的域名解析记录。比如来自内网和外网的不同网段地址的客户机请求解析同一域名时&#xff0c;为其提供不同的解析结果。 实验要求&#xff1a;防火墙要么关…

小分子水半幅宽检测 低氘水同位素氘检测 富氢水检测

小分子水半幅宽检测 低氘水同位素氘检测 富氢水检测 检测范围: 矿泉水等饮用水 检测概述 小分子团水活化性很强&#xff0c;具有强渗透力&#xff0c;强溶解力&#xff0c;强扩散力。水的含氧量高&#xff0c;能给人体内的组织细胞带来更多的氧。长自来水大分子团核磁共振测得…

Vue引入element-plus-04

我们这次开发是使用vue的脚手架来进行开发,前面我们已经使用过最原生的方式去编写我们的vue的语法,从今天开始就使用vue的脚手架,但是前提是你需要用于node的环境 在我们开始之前&#xff0c;我们至少需要有node npm是什么&#xff1f; npm是一个强大的包管理工具&#xff0c;它…

C++设计模式——Bridge桥接模式

一&#xff0c;桥接模式简介 桥接模式是一种结构型设计模式&#xff0c;用于将抽象与实现分离&#xff0c;这里的"抽象"和"实现"都有可能是接口函数或者类。 桥接模式让抽象与实现之间解耦合&#xff0c;使得开发者可以更关注于实现部分&#xff0c;调用…

Flask快速入门2(请求扩展、CBV装饰器、闪现、g对象、蓝图、wtforms)

Flask快速入门 目录 Flask快速入门请求扩展before_requestafter_requestteardown_requesterrorhandler CBV加装饰器闪现(Flash)示例 g对象蓝图(blueprint)wtforms 请求扩展 常用的请求扩展&#xff1a; before_requestafter_requestteardown_requesterrorhandler before_req…

十大成长型思维:定位思维、商业思维、时间管理思维、学习成长思维、精力管理思维、逻辑表达思维、聚焦思维、金字塔原理、目标思维、反思思维

一、定位思维 定位思维是一种在商业和管理领域中至关重要的思维模式&#xff0c;它涉及到如何在顾客心智中确立品牌的独特位置&#xff0c;并使其与竞争对手区分开来。以下是关于定位思维的清晰介绍&#xff1a; 1、定义 定位思维是一种从潜在顾客的心理认知出发&#xff0c;通…

数据资产管理的未来趋势:洞察技术前沿,探讨数据资产管理在云计算、大数据、区块链等新技术下的发展趋势

一、引言 随着信息技术的飞速发展&#xff0c;数据已成为企业最重要的资产之一。数据资产管理作为企业核心竞争力的关键组成部分&#xff0c;其发展趋势和技术创新受到了广泛关注。特别是在云计算、大数据、区块链等新技术不断涌现的背景下&#xff0c;数据资产管理面临着前所…

随机森林算法进行预测(+调参+变量重要性)--血友病计数数据

1.读取数据 所使用的数据是血友病数据&#xff0c;如有需要&#xff0c;可在主页资源处获取&#xff0c;数据信息如下&#xff1a; import pandas as pd import numpy as np hemophilia pd.read_csv(D:/my_files/data.csv) #读取数据 2.数据预处理 在使用机器学习方法时&…

Excel 常用技巧(二)

Microsoft Excel 是微软为 Windows、macOS、Android 和 iOS 开发的电子表格软件&#xff0c;可以用来制作电子表格、完成许多复杂的数据运算&#xff0c;进行数据的分析和预测&#xff0c;并且具有强大的制作图表的功能。由于 Excel 具有十分友好的人机界面和强大的计算功能&am…

文章解读与仿真程序复现思路——电工技术学报EI\CSCD\北大核心《考虑源网储协同配合下的移动式波浪能发电平台并网优化调度》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

理解Es的DSL语法(二):聚合

前一篇已经系统介绍过查询语法&#xff0c;详细可直接看上一篇文章&#xff08;理解DSL语法&#xff08;一&#xff09;&#xff09;&#xff0c;本篇主要介绍DSL中的另一部分&#xff1a;聚合 理解Es中的聚合 虽然Elasticsearch 是一个基于 Lucene 的搜索引擎&#xff0c;但…