vue中通过脚手架来模拟数据的通讯
来源:互联网 发布:conerstone for mac 编辑:程序博客网 时间:2024/05/17 09:12
vue-cli(版本更新),由原来的2.8.1
升级为2.9.1
。主要改变是原来在build
文件夹下的dev-server.js
删掉了,增加了webpack.dev.conf.js
。导致原来通过express
方式引入的数据找不到
1.我们知道在2.9.1
的版本中没有express
。
- 注意: 这里安装
vue-resource
后需要在main.js
注册并使用下
import VueResource from 'vue-resource'Vue.use(VueResource)
- 在
webpack.dev.conf
配置express并设置路由规则 'use strict'const utils = require('./utils')const webpack = require('webpack')const config = require('../config')const merge = require('webpack-merge')const baseWebpackConfig = require('./webpack.base.conf')const HtmlWebpackPlugin = require('html-webpack-plugin')const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')const portfinder = require('portfinder')/* datura_lj 增加express 20171126 */const express = require('express')const app = express()var appData = require('../goods.json')//加载本地数据文件var goods = appData.goodsvar apiRoutes = express.Router()app.use('/api', apiRoutes)/* 增加express end */const devWebpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) }, // cheap-module-eval-source-map is faster for development devtool: config.dev.devtool, // these devServer options should be customized in /config/index.js devServer: { clientLogLevel: 'warning', historyApiFallback: true, hot: true, compress: true, host: process.env.HOST || config.dev.host, port: process.env.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, }, /* datura_lj 增加express 20171126 */ before(app) { app.get('/api/goods', (req, res) => { res.json({ code: 0, data: goods }) }) } /* datura_lj 增加路由规则 end */ }, plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env') }), new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }), ]})module.exports = new Promise((resolve, reject) => { portfinder.basePort = process.env.PORT || config.dev.port portfinder.getPort((err, port) => { if (err) { reject(err) } else { // publish the new Port, necessary for e2e tests process.env.PORT = port // add port to devServer config devWebpackConfig.devServer.port = port // Add FriendlyErrorsPlugin devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ compilationSuccessInfo: { messages: [`Your application is running here: http://${config.dev.host}:${port}`], }, onErrors: config.dev.notifyOnErrors ? utils.createNotifierCallback() : undefined })) resolve(devWebpackConfig) } })})
- 检测
npm run dev
后,在浏览器地址栏中输入http://127.0.0.1:8080/api/goods
即可看到数据 - 注意 新建
goods.json
引入时候的路径
- 检测
阅读全文
0 0
- vue中通过脚手架来模拟数据的通讯
- vue.js通过cli脚手架安装stylus遇到的坑
- vue的脚手架vue-cli
- vue脚手架中自定义全局组件的方法
- Vue-cli 脚手架的安装
- vue-cli脚手架的搭建
- vue.js的安装--vue-cli脚手架
- vue.js脚手架vue-cli的搭建
- vue-cli脚手架 webpack中引入jquery
- vue的安装和脚手架的搭建
- cnpm及vue的脚手架工具安装
- 从零开始搭建一个vue.js的脚手架
- vue脚手架常用的规范介绍
- vue 脚手架的搭建和目录结构
- Vue-cli脚手架的搭建步骤
- vue-cli脚手架的.babelrc文件 详解
- 从零开始搭建一个vue.js的脚手架
- vue-cli脚手架的初次接触
- Quartz 集群源码分析
- ARToolkit手札之用手遮住标识以切换模型
- mysql常用表操作
- IO流
- linux命令行总结(入门)
- vue中通过脚手架来模拟数据的通讯
- [POJ](1661)Help Jimmy ---- 动态规划
- Python_常用模块
- 强烈推荐:一些高质量的原创技术号
- [知了堂学习笔记] javascript 正则表达式
- jdk与jre区别
- Mahout推荐算法API详解
- linux网络驱动分析
- 【Person Re-ID】SVDNet for Pedestrian Retrieval