這周開始學(xué)習(xí)vue肯骇，用的vue-cli腳手架做簡(jiǎn)單的登錄頁面。但在安裝和使用時(shí)碟案，還是遇到了一些坑愿险，犯了不少低級(jí)錯(cuò)誤，在這兒整理一下价说。
安裝
- 問題：win10系統(tǒng)下辆亏，按文檔創(chuàng)建vue-cli的項(xiàng)目，但在vue init webpack my-project時(shí)文件加載到一半就失敗了熔任。
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 安裝依賴褒链，走你
$ cd my-project
$ npm install
$ npm run dev
解決方法：
設(shè)置node的環(huán)境變量。
-
問題：基于webpack模板的項(xiàng)目疑苔，保存后可自動(dòng)刷新頁面（hot reload）甫匹。但實(shí)際使用無法自動(dòng)刷新，手動(dòng)刷新頁面也無效惦费，必須重啟服務(wù)器npm run dev兵迅。
原因：更換編輯器發(fā)現(xiàn)可以刷新，編輯器webstorm2016中才有這個(gè)問題薪贫。
解決方法：
webstorm2016中恍箭，選擇File->Setteing，在設(shè)置面版中搜索“safe”瞧省，將“safe write”的勾選取消扯夭，“自動(dòng)保存”勾選上（可能是編輯器保存存在問題）鳍贾。
組件名
- 問題：注冊(cè)組件“header”,但頁面顯示空白
原因：組件名與H5標(biāo)簽重復(fù)，組件不起作用
解決方法：另起名字交洗，如“app-header”
vue-resource
- 問題：vue-resource $http跨域發(fā)送post請(qǐng)求沒有成功
解決過程：
- ping接口地址骑科，可以連通。
-
postman發(fā)送請(qǐng)求到接口地址构拳，沒有響應(yīng)咆爽。
-
端口沒有設(shè)置，接口地址的端口8888置森，設(shè)置端口后斗埂，postman可以收到響應(yīng)。
-
輸入正確的用戶名和密碼凫海，postman返回報(bào)錯(cuò)信息（code:0）呛凶。設(shè)置數(shù)據(jù)類型為application/x-www-form-urlencoded，即可返回正確信息（code:1）盐碱。
- 問題：vue-resource $http 設(shè)置application/x-www-form-urlencoded時(shí)把兔，直接設(shè)置header沒有效果
this.$http.post('http://...:8888', {...}, {header: {'ContentType': 'application/x-www-form-urlencoded'}})
.then((response) => {
...
}, (response) => {
...
})
原因：跨域時(shí)，設(shè)置頭部失效
解決方法：
設(shè)置option中{emulateJSON:true}
this.$http.post('http://...:8888', {...}, {emulateJSON:true})
.then((response) => {
...
}, (response) => {
...
})
-
問題：端口瓮顽、數(shù)據(jù)類型設(shè)置后县好，可以發(fā)送數(shù)據(jù)，但輸入正確的用戶名和密碼仍登錄失敗
原因：檢查“source”面板暖混，發(fā)現(xiàn)傳過去的數(shù)據(jù)都為undefined缕贡。
檢查代碼，發(fā)現(xiàn)傳入數(shù)據(jù)錯(cuò)誤拣播，post的數(shù)據(jù)：<code>{username: this.username, password: this.password}</code>晾咪，組件中定義的數(shù)據(jù)：<code>user: {username: '',password: ''}</code>
解決方法：
更正post數(shù)據(jù)<code>{username: this.user.username, password: this.user.password}</code>
