Vue3 + Element Plus简单使用案例及【eslint】报错处理

        本电脑Vue环境已安装正常使用  博主使用npm 包管理器安装 Element Plus.有问题评论区帮忙指正,感谢阅读.

在完成的过程中如果遇到eslint报错 Parsing error :Unexpected token { eslint 这个报错,也可以尝试第7部分报错处理解决。 

目录

1.新建项目

2.运行项目 

3.安装element-plus组件库

4.页面展示 

 5 .部分代码

6.Dialog 弹框


1.新建项目

首先新建vue3项目 基于 (vite)  构建工具打包

npm init vue@latest

选择项目名称等选项生成新的项目  然后打开项目 安装依赖 运行项目 下面有对应指令:

这里我新建了一个lists项目,主要就是一个列表页面和一个单框.

cd lists 
npm install
npm run dev

2.运行项目 

项目运行之后安装地址打开是vue默认的项目页面. 

3.安装element-plus组件库

在此项目中使用ui组件库,需要先安装组件 选择一个你喜欢的包 $ npm install element-plus --save

npm install element-plus --save

 使用方式可以选择全局使用或者局部使用,全局使用更方便,但是打包后的文件会比较大

首先在main.js文件中导入文件,如下图所示.就可以使用组件来编写页面了.

 

下面是我做的两个简单的页面,非正常业务使用,仅供熟悉框架和UI组件使用 

4.页面展示 

 

 

 5 .部分代码

这是app.vue比较简单,这里引入了DemoList 组件,这个组件就是列表的主页面.

<template><div><DemoList /></div>   
</template><script>import DemoList from './components/DemoList.vue';export default {components:{DemoList,}}
</script><style>
</style>

DemoList 组件部分代码 这个页面用了 布局 按钮 table表格 下拉选择 输入框 分页 弹框等组件.这里代码部分也就展示 按钮和下拉选择框和搜索部分,其他组件参考文档说明使用即可. 

<template><div class="common-layout"><el-container><el-header><div class="button"><el-button type="primary">新增</el-button><el-button type="primary">修改</el-button><el-button type="primary">查看</el-button></div><div class="flex flex-wrap gap-4 items-center"><el-selectv-model="value"placeholder="请选择条件"style="width: 240px"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select>&emsp;<el-input v-model="input" style="width: 240px" placeholder="请输入搜索内容"                 />&emsp;<el-button type="primary">搜索</el-button></div></el-header><el-main></el-main><el-footer></el-footer></el-container></div>   
</template><script lang="ts" setup>import { ref } from 'vue'const input = ref('')const value= ref('')const options = [{value: '姓名',label: '姓名',},{value: '城市',label: '城市',},{value: '具体地址',label: '具体地址',},{value: '执行代码',label: '执行代码',},{value: '日期',label: '日期',},
]
</script><style>
</style>

刷新页面就看到我们写好的页面了.

6.Dialog 弹框

找到点击需要弹框的按钮元素  添加 plain @click="dialogVisible = true" 如下代码:

弹框元素el-dialog 设置对应的标题  弹框大小 以及选择confirm确认删除弹框的事件以及显示内容,可以自定义内容,自定义头部,关闭时销毁,可拖拽弹框等.

<template><el-button plain @click="dialogVisible = true">Click to open the Dialog</el-button><el-dialogv-model="dialogVisible"title="Tips"width="500":before-close="handleClose"><span>This is a message</span><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">Cancel</el-button><el-button type="primary" @click="dialogVisible = false">Confirm</el-button></div></template></el-dialog>
</template><script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'const dialogVisible = ref(false)const handleClose = (done: () => void) => {ElMessageBox.confirm('Are you sure to close this dialog?').then(() => {done()}).catch(() => {// catch error})
}
</script>

7.错误处理 

整体项目新建运行都是顺利的,就是会有eslint的一些警告提示,虽然不影响项目运行,但是我好像有点强迫症,页面总是提示错误让我很难受,于是搜索解决方案。

然后搜了好多解决方案,发现大家方案都不太一样,整体就是eslint配置文件的各种花式修改,经过测试并没有生效,依然报错。

于是怀疑是缺少文件导致的,决定更新插件执行了:

npm  i  eslint-plugin-vue  -S
npm install babel-eslint --save

 

 

8.总结 

主要就是三部分: 1.新建项目 2.安装组件库 3.使用组件编写页面

本篇文章仅作为框架如何使用第三方UI库的简单使用说明.

也欢迎正在学习此内容的朋友参考,感谢阅读,如果有问题请评论区留言帮忙指正,感谢!!

相关阅读 | vue基础知识巩固 :vue3.0 入门基础知识汇总【2】 全面 精简 推荐_vue知识点总结-CSDN博客

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

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

相关文章

MySQL索引、B+树相关知识总结

MySQL索引、B树相关知识汇总 一、有一个查询需求&#xff0c;MySQL中有两个表&#xff0c;一个表1000W数据&#xff0c;另一个表只有几千数据&#xff0c;要做一个关联查询&#xff0c;如何优化&#xff1f;1、为关联字段建立索引2、小表驱动大表 二、b树和b树的区别1、更高的查…

AI绘画凉了吗?都快2025年了你还没搭上AI这一便车吗?

在科技飞速发展的今天&#xff0c;AI 绘画如同一场绚丽的艺术风暴&#xff0c;席卷了整个创意领域。它以其独特的魅力和强大的功能&#xff0c;为艺术家、设计师以及普通爱好者们带来了前所未有的创作体验。 在数字化时代的浪潮下&#xff0c;人工智能(AI)技术正以前所未有的速…

常见 CSS 选择器用法

"Be Your Own Hero" CSS选择器是一种模式&#xff0c;用于选择需要应用CSS样式的HTML元素。以下是一些基本的CSS选择器类型&#xff1a; 1.标签选择器 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8">&…

AIDD - 分子药物发现的计算方法现状总结

分子药物发现的计算方法现状总结 01 引言 药物发现的流程近年来因计算技术的飞速进步而发生了深刻变革。**计算辅助药物设计&#xff08;CADD, Computer-Aided Drug Design&#xff09;和人工智能驱动药物发现&#xff08;AIDD, Artificial Intelligence-Driven Drug Discover…

机器学习—代码中的推理

TensorFlow是实现深度学习算法的领先框架之一&#xff0c;另一个流行的工具是圆周率火炬&#xff0c;在这篇文章中&#xff0c;我们专注于张量流&#xff0c;那么如何在代码中实现推理&#xff1f; 让我们深入了解神经网络的一个非凡之处&#xff0c;同样的算法可以应用于这么…

Java基于微信小程序的私家车位共享系统(附源码,文档)

博主介绍&#xff1a;✌stormjun、8年大厂程序员经历。全网粉丝15w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&…

java 基础常用知识点

Object 1、getClass()返回对象的运行时类的 Class 对象,可以用于反射操作。 //native修饰的方法&#xff0c;调用系统方法&#xff0c;通常由C或C语言实现 public final native Class<?> getClass();2、hashCode()返回对象的哈希码&#xff0c;用于在哈希表中定位对象 …

基于长短期记忆网络(LSTM)的时间序列数据预测,15个输入1个输出,可以更改数据集,MATLAB代码

1. 数据收集与预处理 数据清洗&#xff1a;处理缺失值、异常值等。特征工程&#xff1a;提取有助于预测的特征。数据标准化&#xff1a;将时间序列数据标准化&#xff0c;使其具有零均值和单位方差&#xff0c;有助于模型训练。滑动窗口划分&#xff1a;将时间序列数据划分为多…

【Java Web】搭建Web环境以及初识JSP Tomcat

文章目录 程序架构Web服务器TomcatJSP概述主要特点基本语法综合示例程序调试和排错 代码示例 程序架构 C/S&#xff08;Client/Server&#xff0c;客户端/服务器&#xff09;和 B/S&#xff08;Browser/Server&#xff0c;浏览器/服务器&#xff09;是两种常见的软件系统架构模…

Qt多边形填充/不填充绘制

1 填充多边形绘制形式 void GraphicsPolygonItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) {Q_UNUSED(option);Q_UNUSED(widget);//painter->setPen(pen()); // 设置默认画笔//painter->setBrush(brush()); // 设置默…

为何打造智慧园区?给我们带来哪些便利

在当今社会&#xff0c;智慧园区作为一种创新的城市发展模式&#xff0c;受到越来越多城市规划者和开发商的关注。打造智慧园区旨在通过信息技术、智能设备和数据互联等手段&#xff0c;提升城市管理的效率、改善居民生活质量、推动可持续发展。下面将探讨为什么要打造智慧园区…

6:arm condition code flags详细的讲解

目录 6.1 arm的 condition code flag 的详细讲解 6.1.1C 6.1.2Z 6.1.3N 6.1.4V 6.1 arm的 condition code flag 的详细讲解 在这篇文章中&#xff0c;我更加严格与严谨的讲解一下 arm的四个condition code flags&#xff0c;因为这个在汇编中还是非常重要的。 6.1.1C 在…

scala学习记录,Set,Map

set&#xff1a;集合&#xff0c;表示没有重复元素的集合&#xff0c;特点&#xff1a;唯一 语法格式&#xff1a;val 变量名 Set [类型]&#xff08;元素1&#xff0c;元素2...&#xff09; 可变不可变 可变&#xff08;mutable&#xff09;可对元素进行添加&#xff0c;删…

Linux权限解析:用户、组和权限的协同

​​​​​​​在Linux系统中&#xff0c;权限决定了谁能做什么。本文将指导你如何掌握这些权限&#xff0c;以确保你的系统既安全又高效&#xff01; 目录 1.shell命令及其运行原理 2.Linu权限的概念 (1) 用户 (2) 切换用户命令su (3) 指令提权命令sudo (4) 什么是权限…

Centos Linux 7 搭建邮件服务器(postfix + dovecot)

准备工作 1. 一台公网服务器&#xff08;需要不被服务商限制发件收件的&#xff0c;也就是端口25、110、143、465、587、993、995不被限制&#xff09;&#xff0c;如有防火墙或安全组需要把这些端口开放 2. 一个域名&#xff0c;最好是com cn org的一级域名 3. 域名备案&am…

Python绘制完整正弦余弦函数曲线

1&#xff0c;将正弦函数&#xff0c;余弦函数及坐标轴绘制在同一个界面方便对比观察&#xff0c;不同函数的曲线变化 import turtle # 导入turtle图形库&#xff0c;用于绘图 import math # 导入math库&#xff0c;用于数学计算&#xff0c;如三角函数# 设置绘图窗口 scre…

TON链上的代币开发与小程序开发:模式与要求

TON&#xff08;The Open Network&#xff09;链是由Telegram团队开发的区块链网络&#xff0c;旨在提供更快、更高效、更去中心化的基础设施&#xff0c;支持智能合约、去中心化应用&#xff08;DApp&#xff09;以及多种数字资产和代币的创建。随着TON链生态的不断成熟&#…

CTF中的phar反序列化 [SWPU 2018]SimplePHP

以[SWPU 2018]SimplePHP 这道题为例 页面可以查看文件和上传文件 点击查看文件,发现url变成/file.php?file 猜测可能存在文件包含,可以读取文件 尝试读取index.php文件 回显了源码 再读取base.php 只看最后有信息的代码: <!--flag is in f1ag.php--> 提示flag在f1…

图文并茂java源码解析-HashMap

文章目录 HashMap结构HashMap的Entry了解的哈希冲突解决方法有哪些?HashMap是线程安全的吗?hashmap的put过程介绍一下jdk8的获取hash的方法jdk8的获取索引的方法 hashmap的put过程介绍一下hashmap 调用get方法一定安全吗?HashMap一般用什么做Key?为啥String适合做Key呢?为…

【JavaEE】认识进程

一、操作系统&#xff08;operating system&#xff09; 操作系统是一组做计算机资源管理的软件的统称&#xff0c;它能够把一个计算机上的所有硬件资源和软件资源都管理好&#xff1a;能够管理好各种硬件资源&#xff0c;让他们很好的相互配合&#xff0c;能够管理好各种软件…