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

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

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

目录

1.新建项目

2.运行项目

3.安装element-plus组件库

4.页面展示

[5 .部分代码](#5 .部分代码)

[6.Dialog 弹框](#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 组件,这个组件就是列表的主页面.

html 复制代码
<template>
 <div>
    <DemoList />
 </div>   
</template>

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

<style>
</style>

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

html 复制代码
<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>

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

6.Dialog 弹框

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

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

html 复制代码
<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的一些警告提示,虽然不影响项目运行,但是我好像有点强迫症,页面总是提示错误让我很难受,于是搜索解决方案。

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

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

复制代码
npm  i  eslint-plugin-vue  -S
npm install babel-eslint --save

8.总结

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

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

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

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

相关推荐
jiangzhihao05152 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI4 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front5 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie5 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀5 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻5 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树6 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔6 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城6 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
Asthenia04126 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端