从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 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 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使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
全面理解闭包机制
2016/07/11 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
什么是GWT的Module
2013/01/20 面试题
普师专业个人自荐信范文
2013/11/26 职场文书
农民入党思想汇报
2014/01/03 职场文书
保护环境倡议书范文
2014/05/13 职场文书
信访工作经验交流材料
2014/05/23 职场文书
技术员岗位职责范本
2015/04/11 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
详解NodeJS模块化
2021/06/15 NodeJs
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏
MySQL数据库事务的四大特性
2022/04/20 MySQL