vue3 0腳手架 配置axios

2021-10-21 02:11:13 字數 1978 閱讀 6245

1、首先安裝axios ,vue-axios,使用yarn 或者npm 安裝

使用yarn:

yarn add axios

yarn add vue-axios

使用npm

npm install axios

npm install vue-axios

2、安裝完成後在專案src資料夾建乙個可以存放配置檔案,具體命名按照規範來即可

3、建立完成後config.js檔案我用來存放後端請求介面位址,http.js封裝axios的請求方式,index.js用來所有呼叫介面的方法

3.1 config,js檔案,可以配置不同環境對應的位址

export

default,}

;

3.2 http.js 封裝axios超時請求時間,get請求、post請求,封裝的目的是為了統一呼叫引入方法,不用在所有介面引入,具體**如下

import axios from

"axios"

;// 引用axios

import config from

"@/api/config"

;const instance = axios.

create()

;//get請求

export

function

get(url, params =))

.then

((response)

=>).

catch

((err)

=>);

});}

//post請求

export

function

post

(url, data =),

(err)

=>);

});}

3.3 index.js引入封裝的get/post請求方法,直接呼叫後端介面位址

"後端介面名"

,params)

;export

const

getdata1

=(data)

=>

post

("後端介面名"

,data)

;//此處如果有引數傳入給後端就需要寫上引數 params/data 否則可以為空

export

const

getdata=(

)=>

get(

"後端介面名");

export

const

getdata1=(

)=>

post

("後端介面名"

);4、最後在介面中呼叫index.js的方法就可以了

import

from

'@/api/index.js'

;export

default

, methods:).

catch

(error=>);

},},

}<

/script>

基本配置就完成了,可以正常呼叫介面

vue 3 0腳手架 一

本機公升級vue3.0 npm install g vue cli 3.0腳手架建立 vue create 專案名稱 啟動專案 npm run serve 新增外掛程式方式 vue add vuetify vue add axios 也可使用之前npm install 的方式新增 介面會有明顯變化的...

Vue3 0腳手架搭建

vue3.0官網 介紹 notice 這份文件是對應 vue cli 3.x 版本的。老版本的 vue cli 文件請移步這裡 vue cli是乙個基於 vue.js 進行快速開發的完整系統,提供 1.通過 vue cli 搭建互動式的專案腳手架。2.通過 vue cli vue cli servi...

全域性安裝vue2 0腳手架與vue3 0腳手架

先window r輸入cmd開啟輸入命令視窗 小黑螢幕 全域性安裝vue2.0腳手架 npm install vue cli g 安裝完成之後輸入 vue v 注意這裡是大寫的 v 如果出現相應的版本號,則說明安裝成功。啟動專案命令 npm run dev 全域性安裝vue3.0腳手架 先檢視當前v...