详解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 dom 基本操作小结
Apr 11 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
12306验证码破解思路分享
Mar 25 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
微信小程序实现上传图片功能
May 28 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 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
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
Symfony控制层深入详解
2016/03/17 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
js操作table示例(个人心得)
2013/11/29 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
js实现图片实时时钟
2020/01/15 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
python动态性强类型用法实例
2015/05/09 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
局域网标准
2016/09/10 面试题
const和static readonly区别
2013/05/20 面试题
Python是如何进行类型转换的
2013/06/09 面试题
考试退步检讨书
2014/01/15 职场文书
军训自我鉴定范文
2014/02/13 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
居安思危观后感
2015/06/11 职场文书
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python