vue-element-admin下載
這里下載的是基礎(chǔ)模板，要下載完整版的可以去官網(wǎng)下載
# clone the project
git clone https://github.com/PanJiaChen/vue-admin-template.git
# enter the project directory
cd vue-admin-template
# install dependency
npm install
# develop
npm run dev
運(yùn)行項(xiàng)目的過(guò)程中可能會(huì)報(bào)錯(cuò)Error: error:0308010C:digital envelope routines::unsupported，如何解決可以這篇文章
https://blog.csdn.net/2301_76809965/article/details/130456851
如果我們安裝的是基礎(chǔ)模板，我們運(yùn)行打開項(xiàng)目后應(yīng)該是這個(gè)樣子
vue-element-admin對(duì)接后端接口
mock接口信息
根據(jù)mock接口信息，我們可卡因發(fā)現(xiàn)需要三個(gè)關(guān)于user的接口，分別是登錄，獲取用戶信息，退出
編寫后端接口
我們需要更具mock接口，編寫后端接口
后端接口我們用node寫比較簡(jiǎn)單
這是我寫好的后端，可以參考一下，或者拿來(lái)直接用
https://blog.csdn.net/2301_76809965/article/details/130473758
對(duì)接測(cè)試
移除mock
在vue.config.js中把這行注釋掉
在main.js中把這個(gè)也去掉
替換接口
在src/api/user.js中
修改登錄，退出，獲取用戶信息方法
如果你用和我寫的那個(gè)接口就改成和我一樣的即可
修改傳參格式
在utils/request.js中
這里加不加都可以，我在后端接口中做了數(shù)據(jù)處理，可以接收x-www-form-urlencoded傳輸?shù)臄?shù)據(jù)
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
//修改Content-Type默認(rèn)數(shù)據(jù)格式
修改請(qǐng)求baseURL
直接把請(qǐng)求攔截器注釋掉，因?yàn)楂@取用戶方放它使用了params方式傳遞token，所有目前的功能暫時(shí)用不上
修改響應(yīng)攔截器，request.js中
由于我們服務(wù)端的代碼，登錄成功后返回的code值為200，把中間那段直接注釋掉
如果用的是我那個(gè)接口還要在把返回值改為response不要res,因?yàn)槲液蠖酥粚懥艘粚訑?shù)據(jù)
此時(shí)我們運(yùn)行項(xiàng)目測(cè)試，發(fā)現(xiàn)報(bào)錯(cuò)了
這個(gè)錯(cuò)誤是由于沒有遵守 ESLint 的語(yǔ)法，我們只需要在vue.config.js中把 lintOnSave 的值改為false即可
現(xiàn)在我們?cè)俅芜\(yùn)行項(xiàng)目
沒有什么問題
登錄后臺(tái)也沒有什么問題
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-433201.html
完結(jié)！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-433201.html
到了這里，關(guān)于vue-element-admin入門的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
