简单的vue+element-ui纯前端实现基本增删改查功能

最新推荐文章于 2025-09-22 09:14:31 发布

原创

最新推荐文章于 2025-09-22 09:14:31 发布 · 2k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #ui

本文介绍了如何使用VueCLI创建一个Vue2项目，并集成ElementUI库进行表单元素的添加、编辑和删除功能实现。在VSCode中管理项目依赖，主要操作包括安装ElementUI和less相关依赖，然后在main.js中引入并配置。在HelloWorld.vue文件中编写了包含日期、姓名和地址输入框的表单，以及表格展示数据，实现了数据的增删改功能。

建立一个vue2的项目：

打开控制台，输入命令：vue create xxx(项目名称，记得要小写哈)，并回车，记得选择vue2

用vscode打开项目，并引入相关的依赖

打开项目终端，输入命令

npm i element-ui -S

npm install less-loader@5.0.0 --save
npm install less --save

点击进入main.js,引入elementui ,加上下面几行代码，并保存

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

懒得再建立组件，所以就全部修改HelloWorld.vue文件中代码为下面那些代码

<template>
<div>
  <div class="app">
  <div class="apper1">
    <el-input  placeholder="请输入日期" type="date" v-model="abj.date"></el-input>
  </div>
   <div class="apper2">
    <el-input placeholder="请输入姓名" v-model="abj.name"></el-input>
  </div>
   <div class="apper3">
    <el-input  placeholder="请输入地址" v-model="abj.address"></el-in