Vue's Learning Path vue-cli and Axios

1, build a vue-cli to build a project

(1) Installation vue-cli

NPM Install Vue-cli-g

(2) Vue init webpack project name

Select Settings as needed

(3) NPM Install

Install the configuration (be aware that the current location is in the project if the configuration is installed, otherwise it will be error: Configuration file Package.json not found)

(4) npm run dev

Run locally

2. Data transfer with Axios and back end

(1) Installation Axios

NPM Install Axios

(2) Introduction of Axios in Main.js

Import Axios form ' Axios '

(3) Hang the Axios in the Vue.prototype. $http

Vue.prototype. $http = Axios;

(4) Modify the configuration in Config/index.js, define global variables, set the cross-domain state

Dev: {

  Paths
  Assetssubdirectory: ' Static ',
  Assetspublicpath: '/',
  Proxytable: {
    '/api ': {
      Target: ' Https://www.baidu.com/public ',
      Changeorigin:true,   //local creation of a virtual server side, the server and the server to interact with the data will not have cross-domain issues
      Pathrewrite: {
        ' ^/api ': '        //replace the requested address in the Targe
      }
    }
  },

(5) Access interface

this. $http. Post ('/api/login ',
    {
        Name: "Admin",
        Password: "123456"
    })
    . Then (function (response) {
      Console.log (response);
    })
    . catch (function (error) {
      Console.log (Error);
    });
(6) To restart after configuring the Index.js.

Vue's Learning Path vue-cli and Axios