vue-cli-mock

├── static └── .gitkeep ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── src ├── assets │ └── logo.png ├── main.js ├── App.vue └── components │ └── Hello.vue ├── mock ├── post-to-get.js ├── db.json └── faker-data.js ├── index.html ├── package.json └── README.md /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carrotz/vue-cli-mock/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /mock/post-to-get.js: -------------------------------------------------------------------------------- 1 | module.exports = function (req, res, next) { 2 | req.method = "GET"; 3 | next(); 4 | } -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /mock/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "posts": [ 3 | { "id": 1, "title": "json-server", "author": "typicode" } 4 | ], 5 | "comments": [ 6 | { "id": 1, "body": "some comment", "postId": 1 } 7 | ], 8 | "profile": { "name": "typicode" } 9 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-cli-mock 6 | 7 | 8 |

9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | 6 | Vue.config.productionTip = false 7 | 8 | /* eslint-disable no-new */ 9 | new Vue({ 10 | el: '#app', 11 | template: '', 12 | components: { App } 13 | }) 14 | -------------------------------------------------------------------------------- /mock/faker-data.js: -------------------------------------------------------------------------------- 1 | module.exports = function () { 2 | var faker = require("faker"); 3 | faker.locale = "zh_CN"; 4 | var _ = require("lodash"); 5 | return { 6 | people: _.times(100, function (n) { 7 | return { 8 | id: n, 9 | name: faker.name.findName(), 10 | avatar: faker.internet.avatar() 11 | } 12 | }), 13 | address: _.times(100, function (n) { 14 | return { 15 | id: faker.random.uuid(), 16 | city: faker.address.city(), 17 | county: faker.address.county() 18 | } 19 | }) 20 | } 21 | } -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 25 | 26 | 36 | -------------------------------------------------------------------------------- /src/components/Hello.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 33 | 34 | 35 | 54 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 8080, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: { 31 | '/api/': { 32 | target: 'http://localhost:3000', 33 | changeOrigin:true, 34 | pathRewrite: { 35 | '^/api': '' 36 | } 37 | }, 38 | }, 39 | // CSS Sourcemaps off by default because relative paths are "buggy" 40 | // with this option, according to the CSS-Loader README 41 | // (https://github.com/webpack/css-loader#sourcemaps) 42 | // In our experience, they generally work as expected, 43 | // just be aware of this issue when enabling this option. 44 | cssSourceMap: false 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli-mock", 3 | "version": "1.0.0", 4 | "description": "vue-cli vs mock data", 5 | "author": "CarrotZ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "build": "node build/build.js", 10 | "mock": "json-server --watch mock/db.json --m mock/post-to-get.js", 11 | "mockdev": "npm run mock & npm run dev" 12 | }, 13 | "dependencies": { 14 | "vue": "^2.2.1", 15 | "axios": "^0.15.3" 16 | }, 17 | "devDependencies": { 18 | "autoprefixer": "^6.7.2", 19 | "babel-core": "^6.22.1", 20 | "babel-loader": "^6.2.10", 21 | "babel-plugin-transform-runtime": "^6.22.0", 22 | "babel-preset-latest": "^6.22.0", 23 | "babel-preset-stage-2": "^6.22.0", 24 | "babel-register": "^6.22.0", 25 | "chalk": "^1.1.3", 26 | "connect-history-api-fallback": "^1.3.0", 27 | "copy-webpack-plugin": "^4.0.1", 28 | "css-loader": "^0.26.1", 29 | "eventsource-polyfill": "^0.9.6", 30 | "express": "^4.14.1", 31 | "extract-text-webpack-plugin": "^2.0.0", 32 | "file-loader": "^0.10.0", 33 | "friendly-errors-webpack-plugin": "^1.1.3", 34 | "function-bind": "^1.1.0", 35 | "html-webpack-plugin": "^2.28.0", 36 | "http-proxy-middleware": "^0.17.3", 37 | "webpack-bundle-analyzer": "^2.2.1", 38 | "semver": "^5.3.0", 39 | "opn": "^4.0.2", 40 | "optimize-css-assets-webpack-plugin": "^1.3.0", 41 | "ora": "^1.1.0", 42 | "rimraf": "^2.6.0", 43 | "url-loader": "^0.5.7", 44 | "vue-loader": "^11.0.0", 45 | "vue-style-loader": "^2.0.0", 46 | "vue-template-compiler": "^2.2.1", 47 | "webpack": "^2.2.1", 48 | "webpack-dev-middleware": "^1.10.0", 49 | "webpack-hot-middleware": "^2.16.1", 50 | "webpack-merge": "^2.6.1" 51 | }, 52 | "engines": { 53 | "node": ">= 4.0.0", 54 | "npm": ">= 3.0.0" 55 | }, 56 | "browserlist": [ 57 | "> 1%", 58 | "last 2 versions", 59 | "not ie <= 8" 60 | ] 61 | } 62 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-cli-mock 2 | vue-cli 添加本地mock服务框架 3 | 4 | ``` bash 5 | # install dependencies 6 | npm install 7 | 8 | # serve with hot reload at localhost:8080 9 | npm run dev 10 | 11 | # build for production with minification 12 | npm run build 13 | 14 | # run mock serve localhost:3000 15 | npm run mock 16 | 17 | # run serve with mock serve 18 | npm run mockdev 19 | ``` 20 | 21 | # mock目录 22 | ``` 23 | . 24 | └── mock/ # mock配置目录 25 | └── db.json # mock数据配置 26 | └── faker-data.js # 批量生成伪数据 27 | └── post-to-get.js # post映射为get中间件 28 | ``` 29 | 30 | # 说明 31 | [JSON Server](https://github.com/typicode/json-server) 是一个创建伪RESTful服务器的工具，具体使用方法可以看官方文档，这里直接讲在vue-cli 中的用法。 32 | ### 配置流程 33 | - 全局安装 ``$ npm install -g json-server`` 34 | - 项目目录下创建 ``mock`` 文件夹 35 | - ``mock`` 文件夹下添加 ``db.json`` 文件，内容如下 36 | 37 | ``` 38 | { 39 | "posts": [ 40 | { "id": 1, "title": "json-server", "author": "typicode" } 41 | ], 42 | "comments": [ 43 | { "id": 1, "body": "some comment", "postId": 1 } 44 | ], 45 | "profile": { "name": "typicode" } 46 | } 47 | ``` 48 | - ``package.json`` 添加命令 49 | ``` 50 | "mock": "json-server --watch mock/db.json", 51 | "mockdev": "npm run mock & npm run dev" 52 | ``` 53 | ![](http://upload-images.jianshu.io/upload_images/1651860-419846b1d54d3d24.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 54 | 55 | ### 启动 mock 服务器 56 | ``$ npm run mock`` 命令运行 mock server 57 | 访问 http://localhost:3000/ 58 | 发现 ``db.json `` 下第一级 json 对象被解析成为可访问路径 59 | 60 | ![](http://upload-images.jianshu.io/upload_images/1651860-349bfc482aba7065.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 61 | 62 | GET请求具体路径如：http://localhost:3000/posts 可获取数据 63 | 64 | ![](http://upload-images.jianshu.io/upload_images/1651860-8150da6fd1f6bd54.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 65 | 66 | ### faker.js 批量生成伪数据 67 | 如果需要大量的伪数据，手动构造比较费时费力，可以使用 [faker.js](https://github.com/Marak/faker.js) 批量生成。faker.js 的具体使用参见官方文档，这里做一个示例。 68 | - ``$ cnpm install faker -G`` 全局安装 faker 69 | - ``mock`` 目录下创建 ``faker-data.js``，内容如下 70 | ``` 71 | module.exports = function () { 72 | var faker = require("faker"); 73 | faker.locale = "zh_CN"; 74 | var _ = require("lodash"); 75 | return { 76 | people: _.times(100, function (n) { 77 | return { 78 | id: n, 79 | name: faker.name.findName(), 80 | avatar: faker.internet.avatar() 81 | } 82 | }), 83 | address: _.times(100, function (n) { 84 | return { 85 | id: faker.random.uuid(), 86 | city: faker.address.city(), 87 | county: faker.address.county() 88 | } 89 | }) 90 | } 91 | } 92 | ``` 93 | - ``$ json-server mock/faker-data.js`` 在 json server 中使用 faker 94 | 请求 http://localhost:3000/address 可以获取到随机生成的100组伪数据 95 | 96 | ![](http://upload-images.jianshu.io/upload_images/1651860-3a978cbe0d6f3c11.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 97 | 98 | 99 | ### 添加中间件 100 | json server 使用 [RESTful 架构](http://www.ruanyifeng.com/blog/2011/09/restful)，GET请求可以获取数据，POST 请求则是添加数据。 101 | 在开发过程中，有时候想直接模拟获取POST请求返回结果，可以添加 express 中间件将POST请求转为GET请求。 102 | - ``mock`` 目录下创建 ``post-to-get.js``，内容如下 103 | ``` 104 | module.exports = function (req, res, next) { 105 | req.method = "GET"; 106 | next(); 107 | } 108 | ``` 109 | - 启动命令添加运行中间件 ``--m mock/post-to-get.js`` 110 | ``` 111 | "mock": "json-server --watch mock/db.json --m mock/post-to-get.js", 112 | ``` 113 | 114 | 重新启动服务，POST请求就被转换为GET请求了 115 | 116 | ![](http://upload-images.jianshu.io/upload_images/1651860-d62321826379a90a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 117 | 118 | 其他需求也可以通过添加不同的中间件实现。 119 | 120 | ### 代理设置 121 | 在 ``config/index.js`` 的 ``proxyTable`` 将请求映射到 http://localhost:3000 122 | 123 | ![](http://upload-images.jianshu.io/upload_images/1651860-1629801bae740557.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 124 | 125 | 代码中添加请求以测试效果 126 | 127 | ![](http://upload-images.jianshu.io/upload_images/1651860-0206a52db3368cfc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 128 | 129 | 130 | ``$ npm run mockdev`` 启动带mock 数据的本地服务 131 | 132 | 结果如下： 133 | ![](http://upload-images.jianshu.io/upload_images/1651860-da5fcadfbd4a7f7d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) --------------------------------------------------------------------------------

{{ msg }}

Essential Links

Ecosystem