Vue腳手架的AJAX配置

2021-09-19 18:21:56 字數 1307 閱讀 1812

sass基於node環境,故需要安裝node-sass和sass-loader

獲取dom元素

"mydiv"

>

<

/div>

this

.$refs.mydiv

vue create 專案名:建立專案

src目錄

步驟

安裝axios包npm i axios -s

在src目錄下建立requests資料夾,專門用來放ajax的配置檔案

新建index.js,在裡面建立ajax例項,定義並匯出處理方法

import axios from

'axios'

;const ajax = axios.

create()

;//匯出方法

export

const

gettodos=(

)=>

ajax***interceptors

ajax.interceptors.request.

use(

(config)

=>

)

作用:1.傳送請求中設定css顯示全域性的loading狀態

2.在請求引數頭部加上全域性的引數,比如token

ajax.interceptors.response.

user

(resp =>

//這裡統一處理狀態錯誤,必須要後端配合,介面返回的格式必須完全一致

})

作用:1.接收響應後隱藏全域性的loading狀態

2.全域性處理錯誤

注必須return,否則攔截不會執行

開發環境和真實環境

在開發時後端的資料沒有完成,ajax需要請求mock資料,但真實專案上線後就要換成真資料,所以在ajax配置中要判斷是開發環境還是生產環境來選擇不同的api介面

const isdev = process.env.

node_env

==='development'

;const ajax = axios.

create()

;

將所有目錄檔案壓縮打包到dist檔案裡,但打包後的檔案只能在伺服器上執行

安裝配置Vue腳手架

1,全域性安裝生成腳手架專案 npm i g vue cli 安裝的是3.0版本 g全域性 2,用命令列工具生成乙個專案的腳手架 和檔案結構 vue create 專案名 命名時不可以用大寫字母 2.1如果提示網路慢,是否用 映象 y 2.2選manually select features 2.3...

搭建Vue腳手架

從vue官網安利了一波安裝腳手架的主要 全域性安裝 vue cli npm install global vue cli 建立乙個基於 webpack 模板的新專案 vue init webpack my project 安裝依賴,走你 cd my project npm install npm r...

vue 腳手架報錯

為以後有問題再來學習,簡介 vue.js是前端乙個比較火的mvvm框架,是一套構建使用者介面的漸進式框架。vue 只關注檢視層,採用自底向上增量開發的設計。vue 的目標是通過盡可能簡單的 api 實現響應的資料繫結和組合的檢視元件 安裝方式 第一種 使用npm,比較適合比較大型的應用,由於npm是...