vue+webpack模拟后台数据的示例代码

 更新时间:2018年07月26日 11:12:55   作者:冯琦杰  
这篇文章主要介绍了vue+webpack模拟后台数据的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

一、在webpack-dev-conf.js文件中:

1、在const portfinder = require(‘portfinder')后添加如下内容

const express = require('express')
const app = express() //请求server
var appData = require('../mock/goods.json') //加载本地数据文件
var apiRoutes = express.Router()
app.use(apiRoutes) //通过路由请求数据

2、找到devServer,在里面加上before()方法

devServer: {
 clientLogLevel: 'warning',
 historyApiFallback: {
  rewrites: [
   { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
  ],
 },
 hot: true,
 contentBase: false, // since we use CopyWebpackPlugin.
 compress: true,
 host: HOST || config.dev.host,
 port: PORT || config.dev.port,
 open: config.dev.autoOpenBrowser,
 overlay: config.dev.errorOverlay ? { warnings: false, errors: true } : false,
 publicPath: config.dev.assetsPublicPath,
 proxy: config.dev.proxyTable,
 quiet: true, // necessary for FriendlyErrorsPlugin
 watchOptions: {
  poll: config.dev.poll,
 },
 before(app) {
  app.get('/goods', (req, res) => {
   res.json(appData)
  })
 }
},

二、在goods.json文件:

{
 "status": "0",
 "msg": "",
 "result": [
  {
   "productId": "100001",
   "productName": "小米6",
   "productPrice": "2499",
   "productImg": "1.jpg"
  },{
   "productId": "100002",
   "productName": "音箱",
   "productPrice": "999",
   "productImg": "2.jpg"
  },{
   "productId": "100003",
   "productName": "电脑",
   "productPrice": "199",
   "productImg": "3.jpg"
  }
 ]
}

三、在GoodsList.vue文件中:


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • webstorm和.vue中es6语法报错的解决方法

    webstorm和.vue中es6语法报错的解决方法

    本篇文章主要介绍了webstorm和.vue中es6语法报错的解决方法,小编总结了webstorm和.vue中出现的es6语法报错,避免大家采坑,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • Vue3封装localStorage基本使用示例详解

    Vue3封装localStorage基本使用示例详解

    localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据,localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除,本文给大家介绍Vue3封装localStorage-基本使用,感兴趣的朋友一起看看吧
    2023-12-12
  • vue框架中props的typescript用法详解

    vue框架中props的typescript用法详解

    typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法。这篇文章主要介绍了vue框架中props的typescript用法,需要的朋友可以参考下
    2020-02-02
  • vue-cli中的webpack配置详解

    vue-cli中的webpack配置详解

    本篇文章主要介绍了vue-cli中的webpack配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vuejs实现标签选项卡动态更改css样式的方法

    vuejs实现标签选项卡动态更改css样式的方法

    这篇文章主要介绍了vuejs实现标签选项卡-动态更改css样式的方法,代码分为html和js两部分,需要的朋友可以参考下
    2018-05-05
  • vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

    vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

    这篇文章主要介绍了vue项目配置 webpack-obfuscator 进行代码加密混淆,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-02
  • React和Vue中监听变量变化的方法

    React和Vue中监听变量变化的方法

    这篇文章主要介绍了React和Vue中监听变量变化的方法,本文通过一个场景,父组件传递子组件一个A参数,子组件需要监听A参数的变化转换为state,具体内容详情大家跟随小编一起通过本文学习吧
    2018-11-11
  • vue移动端自适应适配问题详解

    vue移动端自适应适配问题详解

    这篇文章主要介绍了vue移动端自适应适配问题,本文通过实例代码详解给大家介绍的非常详细,需要的朋友可以参考下
    2021-04-04
  • 浅谈vue加载优化策略

    浅谈vue加载优化策略

    这篇文章主要介绍了浅谈vue加载优化策略,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • vue实现图片懒加载的方法分析

    vue实现图片懒加载的方法分析

    这篇文章主要介绍了vue实现图片懒加载的方法,结合实例形式分析了vue.js图片懒加载插件安装、使用方法与相关操作注意事项,需要的朋友可以参考下
    2020-02-02

最新评论