vue的學習之路 vue-cli與axios

標籤：.post   password   imp   tor   www   admin   搭建   fun   安裝   

1、搭建一個vue-cli搭建一個項目

(1) 安裝vue-cli

　　npm install vue-cli -g

(2) vue init webpack 項目名

　　根據需要選擇設定

(3) npm install

　　安裝配置（安裝配置時留意一下當前位置是不是在項目裡，不然會報錯：找不到設定檔package.json）

(4) npm run dev

　　本地運行

 

 

2、用axios與後端進行資料傳遞

(1) 安裝axios

　　npm install axios 

(2) 在main.js中引入axios

　　import axios form ‘axios‘

(3) 將axios掛在到vue.prototype.$http

　　Vue.prototype.$http = axios;

(4) 在config/index.js中修改配置，定義全域變數、設定跨域狀態

dev: {

  // Paths
  assetsSubDirectory: ‘static‘,
  assetsPublicPath: ‘/‘,
  proxyTable: {
    ‘/api‘: {
      target: ‘https://www.baidu.com/public‘,
      changeOrigin: true,   // 在本地會建立一個虛擬服務端，服務端和服務端進行資料的互動就不會有跨域問題
      pathRewrite: {
        ‘^/api‘: ‘‘        //替換targe中的請求地址
      }
    }
  },

(5)提供者

　　this.$http.post(‘/api/login‘,
    {
        name: "admin",
        password: "123456"
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
(6)配置好index.js後要重新啟動

vue的學習之路 vue-cli與axios