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文件中:


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

相关文章

  • VUE element-ui 写个复用Table组件的示例代码

    VUE element-ui 写个复用Table组件的示例代码

    本篇文章主要介绍了VUE element-ui 写个复用Table组件的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Vue组件基础用法详解

    Vue组件基础用法详解

    组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码,本文将详细介绍Vue组件基础用法
    2020-02-02
  • vue动态合并单元格并添加小计合计功能示例

    vue动态合并单元格并添加小计合计功能示例

    这篇文章主要给大家介绍了关于vue动态合并单元格并添加小计合计功能的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • 解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题

    解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题

    这篇文章主要介绍了解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • vue引入cesium问题

    vue引入cesium问题

    这篇文章主要介绍了vue引入cesium问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 封装 axios+promise通用请求函数操作

    封装 axios+promise通用请求函数操作

    这篇文章主要介绍了封装 axios+promise通用请求函数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue中@keyup.enter失效问题及解决

    vue中@keyup.enter失效问题及解决

    这篇文章主要介绍了vue中@keyup.enter失效问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue项目中v-bind动态绑定src路径不成功问题及解决

    Vue项目中v-bind动态绑定src路径不成功问题及解决

    这篇文章主要介绍了Vue项目中v-bind动态绑定src路径不成功问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vite前端构建Turborepo高性能monorepo方案

    vite前端构建Turborepo高性能monorepo方案

    这篇文章主要为大家介绍了vite前端构建Turborepo高性能monorepo方案详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue2.0基于vue-cli+element-ui制作树形treeTable

    vue2.0基于vue-cli+element-ui制作树形treeTable

    这篇文章主要介绍了vue2.0基于vue-cli+element-ui制作树形treeTable,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论