从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页面跳转常用的几种方式
Nov 25 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 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运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
python打开windows应用程序的实例
2019/06/28 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
python 绘制场景热力图的示例
2020/09/23 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
矫正人员思想汇报
2014/01/08 职场文书
制作部班长职位说明书
2014/02/26 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
学习三严三实心得体会
2014/10/13 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python