从vue基础开始创建一个简单的增删改查的实例代码(推荐)

1、安装vue-cli    cnpm install vue-cli -g  --执行全局安装

2、创建一个webpack的基础项目；命令：vue init webpack myproject;

　　以下是项目的目录结构及说明

　　build是webpack配置

　　build.js       // 生产环境构建代码

　　check-versions.js // 检查node&npm等版本

　　utils.js          // 构建配置公用工具

　　vue-loader.conf.js // vue加载器

　　webpack.base.conf.js // webpack基础环境配置

　　webpack.dev.conf.js //  webpack开发环境配置

　　webpack.prod.conf.js // webpack生产环境配置

　　config——vue项目配置

　　dev.env.js  // 开发环境变量（看词明意）

　　index.js //项目一些配置变量

　　prod.env.js // 生产环境变量

　　node_modules——[依赖包]

　　src——[项目核心文件]

　　App.vue——根组件

　　main.js——入口文件

　　router——路由配置

　　static// 静态文件，比如一些图片，json数据等

　　editorconfig// 定义代码格式

　　gitignore// git上传需要忽略的文件格式

　　index.html//主页

　　package.json// 项目基本信息

　　README.md// 项目说明

3、安装element-ui 命令：npm i element-ui -S

　　main.js中需要配置

　import elementui from 'element-ui'
　　import 'element-ui/lib/theme-chalk/index.css'
　　Vue.use(elementui);

4、安装axios 命令：npm i axios  -S

　　新建一个api.js文件用作配置axios访问接口，配置如下

　　main.js需要配置　　

import Api from './api';
　　Vue.prototype.$api=Api;

5、新建一个页面Test/List.vue做增删改查操作

　　创建一个文件夹Test，新建文件List.vue,router中配置:　

　import List from '@/Test/List'
　　{
　　path: '/List',
　　name: 'List',
　　component: List
　　}

7、启动访问:npm run dev,访问地址#/List

　　添加搜索条件

添加表格显示

定义对应的参数和方法

总结

以上所述是小编给大家介绍的从vue基础开始创建一个简单的增删改查的实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

  • vue实现表格增删改查效果的实例代码
  • vue增删改查的简单操作
  • vue2 中如何实现动态表单增删改查实例
  • Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
  • Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
  • vue.js+Element实现表格里的增删改查
赞 (0)

相关推荐

  • Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)

    Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)

    环境搭建 spring boot的简介 以往我们开发时用到spring总是避免不了繁琐的配置,例如我们要配置一个数据库连接,可能需要以下几步: 1.编写jdbc.properties配置文件: 2.创建spring的配置文件,加入spring配置文件前缀.配置数据库连接信息以及sqlsessionFactory等等: 3.还要在web.xml文件中加入spring的监听. springboot的出现大大简化了项目的搭建过程(spring配置以及maven配置),让我们专注于应用功能的开发,而不是

  • vue2 中如何实现动态表单增删改查实例

    最近项目中遇到的需求是要操作大量的表单,之前的项目中有做过这方的研究,只不过是用jquery来操作. 项目A 先简单说说以前项目A中的应用场景,可能有小伙伴儿也遇到相同的需求.A项目是公司的OA系统中有的项目,是用java的jsp渲染的页面,需求是要改成:嵌入APP中显示,前后端分离, 后端返回的内容,还不能修改, 只是后端同事做了下接口处理,返回给前端的是一大堆的表单数据. 每个表单都有多个字段表示它的属性: 是否可编辑 表单类型 (text, textarea, select, radio,

  • vue增删改查的简单操作

    vue增删改查的简单操作

    本文为大家分享了vue增删改查的简单操作,供大家参考,具体内容如下 我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', province: '北京市', hobby: ['篮球', '读书', '编程'] }, { username: 'bbbbb', email: 'bbbbbbb@163.com', sex: '女', province: '河北省'

  • vue实现表格增删改查效果的实例代码

    vue实现表格增删改查效果的实例代码

    整理文档,搜刮出一个vue实现表格增删改查效果的实例代码,稍微整理精简一下做下分享. 实现效果 我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', province: '北京市', hobby: ['篮球', '读书', '编程'] }, { username: 'bbbbb', email: 'bbbbbbb@163.com', sex: '女', p

  • Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)

    Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)

    在上篇文章给大家介绍了Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一),接下来我们添加分页相关的依赖,时间紧张,直接上代码了,贴上我的pom文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=

  • vue.js+Element实现表格里的增删改查

    新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element (http://element.eleme.io/#/zh-CN)来配合vue.js进行样式填充 之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js 下面就介绍一下vue.js应用在表格里的增删改查 首先引入一下element的js <script src="plugins/element-ui/index.js"></script> 然后引入需要用到的vue

  • 从vue基础开始创建一个简单的增删改查的实例代码(推荐)

    1.安装vue-cli    cnpm install vue-cli -g  --执行全局安装 2.创建一个webpack的基础项目:命令:vue init webpack myproject; 以下是项目的目录结构及说明 build是webpack配置 build.js       // 生产环境构建代码 check-versions.js // 检查node&npm等版本 utils.js          // 构建配置公用工具 vue-loader.conf.js // vue加载器

  • node实现简单的增删改查接口实例代码

    node实现简单的增删改查接口的全部代码如下: // 数据存储在users.json文件中 const express = require("express"); const fs = require("fs"); const cors = require("cors"); const bodyParser = require("body-parser"); const app = express(); app.use(cor

  • 一个简单的php MVC留言本实例代码(必看篇)

    摘要 标题上我把这个留言板叫最简单的,其实应该叫最简陋的,因为把全部注意力集中在MVC模式设计和实现上,所以UI方面几乎没有一点修饰. 这个小程序一共包含6个文件,其中index.php是程序入口.post.htm是留言表单.在lib文件夹里Model.View .Controller三个文件分别实现MVC,DataAccess是一个简单的数据库访问类.其实这个程序是国外的一个人写的. PHP代码: /** * 一个用来访问MySQL的类 * 仅仅实现演示所需的基本功能,没有容错等 * 代码未作

  • SpringMVC之简单的增删改查示例（SSM整合）

    虽然已经在做关于SpringMVC的项目.但是还没有写一些比较系统的博客.今天就先来说一说最简单的增删改查吧.这个例子是基于SpringMVC+Spring+Mybatis实现的. 环境配置 主要是几项配置:springmvc的配置,spring的配置,MyBatis的配置,jdbc的配置,和web.xml配置 springmvc.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=&qu

  • SpringBoot整合Mybatis简单实现增删改查

    SpringBoot整合Mybatis简单实现增删改查

    目录 前言 第一:创建MySQL数据库 第二:创建SpringBoot项目,引入需要的依赖包 第三:创建程序目录和配置核心application.xml文件 第四:依次编写Entity.Dao.Service.Controller层,还有创建mapper.xml文件 第五:测试结果(这里我用的postman来进行接口测试) 第六:总结 前言 为什么要学SpringBoot和Mybatis呢,我觉得作为一个合格的后端程序员增删改查(CRUD)肯定是要会的,而且是最基本的一项技能,不然怎么完成给你分

  • Springboot+hibernate实现简单的增删改查示例

    1.创建好项目之后在配置端口号(也可以不用配置,默认端口8080) #server server.port=8080 server.tomcat.uri-encoding=utf-8 2.配置mysql #MySQL spring.datasource.driver-class-name=com.mysql.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/test?characterEncoding=utf8 sprin

  • 用js简单提供增删改查接口

    本周写实验,需要提供简单的后台接口对数据库进行增删改查,以前写后台只用过php和java,因为比较容易,用js写的也比较快,所以这次想用js实现简单的增删改查接口. 初始化 需要工具:nodejs 依赖:express,mysql,body-parser(这些都是npm的包) 为了能够解析js,需要下载nodejs,下载完nodejs,创建一个文件夹,使用npm init初始化,除了填写名字,一路确定下去,在文件夹下就会多出一个package.json文件. // package.json {

  • Java连接 JDBC基础知识（操作数据库：增删改查）

    Java连接 JDBC基础知识（操作数据库：增删改查）

    一.JDBC简介 JDBC是连接java应用程序和数据库之间的桥梁. 什么是JDBC? Java语言访问数据库的一种规范,是一套API. JDBC (Java Database Connectivity) API,即Java数据库编程接口,是一组标准的Java语言中的接口和类,使用这些接口和类,Java客户端程序可以访问各种不同类型的数据库.比如建立数据库连接.执行SQL语句进行数据的存取操作. JDBC代表Java数据库连接. JDBC库中所包含的API任务通常与数据库使用: 连接到数据库 创

  • Vue使用el-tree 懒加载进行增删改查功能的实现

    Vue使用el-tree 懒加载进行增删改查功能的实现

    关于vue的树形展示 使用到项目:以树的形式异步展现 效果图先放: 找到element-ui的官方文档,el-tree.(地址:https://element.eleme.cn/#/zh-CN/component/tree ) 项目需求:以懒加载的形式展示,目录根据需求需要有新增 编辑 删除 操作以及操作后的刷新树结构 那我们现在开始吧 一. 懒加载:Tree的懒加载,用一个属性控制:lazy.使用lazy,就要使用load来加载数据进行渲染树 原理:初始化触发load函数先加载初始数据,通过点

  • Yii2框架数据库简单的增删改查语法小结

    User::find()->all(); //返回所有用户数据: User::findOne($id); //返回 主键 id=1 的一条数据: User::find()->where(['name' => 'ttt'])->one(); //返回 ['name' => 'ttt'] 的一条数据: User::find()->where(['name' => 'ttt'])->all(); //返回 ['name' => 'ttt'] 的所有数据: U

随机推荐