分布式数据库Vue3 + Element Plus简单利用案例及【eslint】报错处理

饭宝发表于 2024-11-3 16:06:10

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

        本电脑Vue环境已安装正常利用博主利用npm 包管理器安装 Element Plus.有题目评论区帮忙指正,感谢阅读.
https://i-blog.csdnimg.cn/direct/07fe7f6fcfc6411c8de6552db20f44d0.png
在完成的过程中如果遇到eslint报错 Parsing error ：Unexpected token { eslint 这个报错，也可以尝试第7部分报错处理办理。
目次
1.新建项目
2.运行项目
3.安装element-plus组件库
4.页面展示
5 .部分代码
6.Dialog 弹框

1.新建项目

首先新建vue3项目基于 (vite) 构建工具打包
npm init vue@latest https://i-blog.csdnimg.cn/direct/ccd324c73ddb445f8dd2ddcdefe53f44.png
选择项目名称等选项生成新的项目然后打开项目安装依靠运行项目下面有对应指令:
这里我新建了一个lists项目,主要就是一个列表页面和一个单框.
cd lists
npm install
npm run dev 2.运行项目

https://i-blog.csdnimg.cn/direct/6cc0ca1b4edc4dbfa4e80cdce269290b.png
项目运行之后安装地址打开是vue默认的项目页面.
https://i-blog.csdnimg.cn/direct/32b628925ef143d98109c0c7c404c221.png
3.安装element-plus组件库

在此项目中利用ui组件库,需要先安装组件选择一个你喜好的包 $ npm install element-plus --save
npm install element-plus --save 利用方式可以选择全局利用或者局部利用,全局利用更方便,但是打包后的文件会比较大
首先在main.js文件中导入文件,如下图所示.就可以利用组件来编写页面了.
https://i-blog.csdnimg.cn/direct/aac24fcbd38740d4ab7deeefdc4a63b1.png
https://i-blog.csdnimg.cn/direct/add0a73144414dbc9f566187b27171f0.png
下面是我做的两个简单的页面,非正常业务利用,仅供认识框架和UI组件利用
4.页面展示

https://i-blog.csdnimg.cn/direct/9538baa9fb1e498c871930e1276c2a49.png
https://i-blog.csdnimg.cn/direct/2c9504d84d5c4f9488c3b6b6b0bafb24.png
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-select
         v-model="value"
         placeholder="请选择条件"
         style="width: 240px"
         >
         <el-option
            v-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> 革新页面就看到我们写好的页面了.
https://i-blog.csdnimg.cn/direct/9485467776b14158975d8445b819ae47.png
6.Dialog 弹框

找到点击需要弹框的按钮元素添加 plain @click="dialogVisible = true" 如下代码:
弹框元素el-dialog 设置对应的标题  弹框大小以及选择confirm确认删除弹框的事件以及显示内容,可以自定义内容,自定义头部,关闭时销毁,可拖拽弹框等.
<template>
<el-button plain @click="dialogVisible = true">
Click to open the Dialog
</el-button>

<el-dialog
v-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的一些警告提示，固然不影响项目运行，但是我好像有点逼迫症，页面总是提示错误让我很难熬，于是搜索办理方案。
https://i-blog.csdnimg.cn/direct/4d028c9d2cf448a1b8227b466c4e6cc7.png
然后搜了好多办理方案，发现大家方案都不太一样，整体就是eslint配置文件的各种花式修改，颠末测试并没有收效，依然报错。
于是猜疑是缺少文件导致的，决定更新插件实行了：
npmieslint-plugin-vue-S
npm install babel-eslint --save https://i-blog.csdnimg.cn/direct/63cab36b9c4747b3867a4a917248feac.png
https://i-blog.csdnimg.cn/direct/68b1b73adaca45c1942dae320e081c44.png
8.总结

主要就是三部分: 1.新建项目 2.安装组件库 3.利用组件编写页面.
本篇文章仅作为框架如何利用第三方UI库的简单利用说明.
也欢迎正在学习此内容的朋友参考,感谢阅读,如果有题目请评论区留言帮忙指正,感谢!!
相关阅读 | vue基础知识巩固：vue3.0 入门基础知识汇总【2】全面精简推荐_vue知识点总结-CSDN博客

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

页: [1]

ToB企服应用市场:ToB评测及商务社交产业平台's Archiver

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