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


Posted in Javascript onFebruary 11, 2018

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

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

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

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

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访问接口,配置如下

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

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基础开始创建一个简单的增删改查的实例代码(推荐)

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

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

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

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

总结

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

Javascript 相关文章推荐
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
javascript操作符"!~"详解
Feb 10 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
代码详解JS操作剪贴板
Feb 11 #Javascript
vue-router项目实战总结篇
Feb 11 #Javascript
vue项目实战总结篇
Feb 11 #Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 #Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 #Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 #Javascript
Vue实现点击后文字变色切换方法
Feb 11 #Javascript
You might like
PHP调用三种数据库的方法(2)
2006/10/09 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
php数组去重实例及分析
2013/11/26 PHP
PHP常用数组函数介绍
2014/07/28 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
详解php协程知识点
2018/09/21 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
js静态方法与实例方法分析
2011/07/04 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
Python实现发送email的几种常用方法
2014/08/18 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
Java程序员面试90题
2013/10/19 面试题
中学生运动会口号
2014/06/07 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
入伍通知书
2015/04/23 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
python开发实时可视化仪表盘的示例
2021/05/07 Python
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android