从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 相关文章推荐
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
初识Node.js
Sep 03 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
canvas红包照片实例分享
Feb 28 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 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
将OICQ数据转成MYSQL数据
2006/10/09 PHP
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
浅析使用Turck-mmcache编译来加速、优化PHP代码
2013/06/20 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
smarty实现多级分类的方法
2014/12/05 PHP
php导入模块文件分享
2015/03/17 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
Python基本socket通信控制操作示例
2019/01/30 Python
如何在python中写hive脚本
2019/11/08 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
进口业务员岗位职责
2014/04/06 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
关于职业道德的心得体会
2016/01/18 职场文书