vue中使用json-server，实现mock数据

学习各种资料，整理出一份可用的mock方式（如有问题还请各位大神多多指教）

>使用到的技术：

       vue-cli、webpack、node、npm、json-server

完整步骤:

（基础版）

  1、全局安装json-server

       npm i json-server -g

 
2、安装好之后，修改配置文件，config-->index.js-->proxyTable

      proxyTable: {

          '/api/': {

           target: 'http://localhost:3000',

           changeOrigin: true,

           secure: false,

           pathRewrite: {

                  '^/api/': ''

            }

          }

       },

3、在目录下创建一个mock文件夹

      新建一个db.json文件

             {

                  "data":{

                       "data":"world",

                        "status":0,

                         "msg":"success"

                     }

               }

4、修改package.json文件package.json-->scripts

      "scripts": {

              "dev": "node build/dev-server.js",

              "start": "node build/dev-server.js",

              "build": "node build/build.js",

             "mock": "node mock/db.json --post 9090",

             "mockdev": "npm run mock & npm run dev"

        },

5、启动项目，再启动服务

     npm run dev

     npm run mock

或者

    npm run mock

6、页面请求

    this.$http.get('/api/data').then((res)=>{

          console.log(res)

      })

---

（进阶版）

因为项目内可能不是只是需要一个json文件，可能存在这种情况，如果每个文件都去配置就很麻烦，可以直接在mock文件夹里编写一个server.js

1、2步骤同上，步骤3创建文件夹如上

4、创建server.js

---

---

5、修改package.json文件package.json-->scripts

"scripts": {

              "dev": "node build/dev-server.js",

              "start": "node build/dev-server.js",

              "build": "node build/build.js",

             "mock": "node mock/server.js", ///该条配置不一样

             "mockdev": "npm run mock & npm run dev"

        },

6、启动项目并启动服务

然后就是开始你的表演啦^0^