详解Vue CLI 3.0脚手架如何mock数据


Posted in Javascript onNovember 23, 2018

前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。

我们在开发的过程中,由于后台接口的没有完成或者没有稳定之前我们都是采用模拟数据的方式去进行开发项目,这样会使我们的前后端会同时的进行,提高我们的开发效率。

因为最近自己在自学 Vue 也在自己撸一个项目,肯定会遇到使用数据的情况,所以就想着如何在前端做一些 mock 数据的处理,因为自己的项目使用的是 vue/cli 3.0 与 vue/cli 2.0 的使用有一些的不同,所以在这里记录一下。

注意:本文主要说的是如何配置本地静态文件的 mock 数据的方式

首先我们来说一说vue/cli 3.0 与 2.0 的一些不同:

  • 3.0 移除了 static 文件目录,新增了 public 目录,这个目录下的静态资源不会经过 webpack 的处理,会被直接拷贝,所以我们能够直接访问到该目录下的资源。
  • 3.0 移除了 config、build 等配置目录,如果需要进行相关配置我们需要在根目录下创建 vue.config.js 进行配置即可。

2.0 的文件结构

详解Vue CLI 3.0脚手架如何mock数据

3.0 的文件结构

详解Vue CLI 3.0脚手架如何mock数据

可以看到 3.0 版本的脚手架在项目结构上精简了很多,看上去没有那么的繁琐。接下来我就进行 mock 数据的配置,再说 3.0 之前,我们先看看 2.0 的时候我们都是怎么使用静态数据文件进行 mock 的。

2.0 配置

首先,在这个版本是只有我们的 static 目录下的文件是可以被访问到的,所以我们就把静态文件放入该目录下。

// 静态数据存放的位置
static/mock/home.json

我们启动项目之后一般项目会启动在 8080 端口,如果不是修改下对应端口号即可,我们访问下面地址:http://localhost:8080/static/mock/index.json

我们可以看到我们的数据是可以请求到的,之后我们只需要在项目中 config/index.js 添加如下属性:

dev: {
  // Paths fiddler charles
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
   '/api': {
    target: 'http://localhost:8080',
    pathRewrite: {
     '^/api': '/static/mock'
    }
   }
  }
}

之后我们在项目中使用即可,我们就能获取我们需要的数据。

axios
 .get('/api/index.json')
 .then(this.handler)

3.0 配置

因为 static 目录移除,我们把静态文件放入 public 文件下。

// 静态数据存放的位置
public/mock/home.json

和上面一样,启动项目后我们看看数据能不能正常被访问。http://localhost:8080/mock/home.json

之后,不同的地方在于,我们需要手动创建一个 vue.config.js 文件放在根目录下。

module.exports = {
 devServer: {
  proxy: {
   '/api': {
    target: 'http://localhost:8080',
    changeOrigin: true,
    pathRewrite: {
     '^/api': '/mock'
    }
   }
  }
 }
}

配置完成之后,我们也是和上述一样,在项目中直接访问数据即可。

axios
 .get('/api/home.json')
 .then(this.handler)

总结

以上我们就学会了如何在 vue/cli 3.0 的项目中进行 mock 数据,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
认识延迟时间为0的setTimeout
May 16 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
动态加载js的方法汇总
Feb 13 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
mock.js模拟前后台交互
Jul 25 Javascript
原生js实现俄罗斯方块
Oct 20 Javascript
详解js静态检查工具eslint配置文件
Nov 23 #Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 #Javascript
创建echart多个联动的示例代码
Nov 23 #Javascript
详解Angular模板引用变量及其作用域
Nov 23 #Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 #Javascript
详解Vue2.0组件的继承与扩展
Nov 23 #Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 #Javascript
You might like
杏林同学录(一)
2006/10/09 PHP
实用函数2
2007/11/08 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
破解Session cookie的方法
2006/07/28 Javascript
ASP SQL防注入的方法
2008/12/25 Javascript
基于jquery的表格排序
2010/09/11 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
JS如何生成动态列表
2020/09/22 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
详解使用Python处理文件目录的相关方法
2015/10/16 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
Python属性和内建属性实例解析
2020/01/14 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
水务局局长岗位职责
2013/11/28 职场文书
文秘专业个人求职信
2013/12/22 职场文书
集体备课反思
2014/02/12 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
婚前协议书标准版
2014/10/19 职场文书