Introduce the next AXIos, and then do a basic wrapper around AXIos. Then there are the mocks of data and the mocks used in projects.

1. Axios encapsulation

  • axiosWhat is not to say, you should and very familiar, directly install it.
$ npm install axios --save
Copy the code

  • Then we do a simple axios wrapper in SRC /utils/request.js.

  • Different judgments of environment, such as development environment, grayscale environment, online environment, etc., are maintained in @vue/cli3.x by creating a new.env.[XXX] file –> environment variables and modes

Data mocks

  • We use the yAPI interface platform to manage data mock. In this way, we can maintain an API document well and mock data. This is the interface document of our project: VUe-Mall

  • You can also use mockJS, esayMock, and so on. Yapi is pretty easy to use, and the basic usage documentation is there. I use advanced mocks a lot in my projects.

2. Proxy forwarding

  • In fact, proxy forwarding is configured under webpackdevServer, as shown in theWebpack from 0 to 1-devServer exploration.
  • And in thevue-cli3.xThe scaffolding generated in the project, because the webpack configuration file is hidden, so create a new vue.config.js and then provide itThe config configurationJust modify the file. It’s the same principle.
const mockUrl = 'http://yapi.demo.qunar.com/mock/17982'

module.exports = {
  // ...
  devServer: {
    port: 8080.open: true.overlay: {
      warnings: false.errors: true
    },
    proxy: {
      '/dev-api': {
        target: mockUrl,
        pathRewrite: { '^/dev-api': ' ' },
        secure: false.changeOrigin: true}}},// ...
}
Copy the code

3, summary

  • All in all,vueAfter the scaffolding upgrade, developing and configuring a project is still much easier.
  • Welcome to take a look at some of the practical uses of the project.
  • For the old version of the scaffold configuration mode: www.jianshu.com/p/896f8127f…