Vue是目前比較流行的web前端框架，所以趁著暑假學(xué)習(xí)一波捡偏，于是寫了自己的博客系統(tǒng)
項(xiàng)目地址: 前端 后端
因?yàn)閂ue框架的開發(fā)者文檔寫得非常完善，所以這篇文章不會(huì)包含Vue的基本用法
這篇文章旨在記錄使用Vue開發(fā)spa(單頁面應(yīng)用程序)過程中的一些坑點(diǎn)吁恍，和tip
前言
Vue是一個(gè)MVVM框架，所以在DOM操作上由之前的getElementById()操作DOM元素的方式轉(zhuǎn)變?yōu)閷?duì)對(duì)象屬性的賦值骚露，編寫思維需要較大的轉(zhuǎn)變，不過確實(shí)使開發(fā)便利了不少缚窿。
Vue-cli
在熟悉了Vue的基礎(chǔ)知識(shí)后棘幸，可以使用Vue-cli直接創(chuàng)建Vue項(xiàng)目工程，在這里需要注意自己使用node安裝的Vue-cli的版本是3.x還是2.x滨攻，兩個(gè)版本的Vue-cli的操作指令還是有所區(qū)別够话，在查詢資料的時(shí)候需要注意，不然會(huì)很容易查錯(cuò)光绕。
Vue-Router
在構(gòu)建單頁應(yīng)用的時(shí)候需要使用到Vue-router插件，這與Vue是分開的畜份，需要另外安裝诞帐，在安裝完成后可以在生成的router.js文件中設(shè)置自己的路由。
Vue-router的文檔也比較完善爆雹，可以在官網(wǎng)查詢
ajax
axios
Vue框架并不集成ajax功能停蕉，所以需要自己另外尋找ajax模塊，我所使用的是axios钙态，還是比較輕便的
在安裝完axios后慧起，在main.js添加下列代碼
import axios from 'axios'
Vue.prototype.$http = axios;
這樣就可以在所有組件中使用this.$http({method:xx,url:xx}).then()來使用ajax功能
屬性操作
在ajax請(qǐng)求完后，我們需要根據(jù)后端數(shù)據(jù)來更新響應(yīng)的前端界面册倒，這時(shí)候就會(huì)出現(xiàn)一些小坑蚓挤。
當(dāng)你這樣編寫時(shí):
this.$http({
method: 'get',
url: '/api/xxx'
}).then(function (){
相關(guān)操作
})
會(huì)發(fā)現(xiàn)在then()的回調(diào)函數(shù)中this并不指向組件的Vue對(duì)象，也就是無法對(duì)Vue對(duì)象的屬性進(jìn)行操作驻子。
解決的方法是使用箭頭函數(shù)()=>{}由于箭頭函數(shù)會(huì)使用上下文的this對(duì)象灿意，所以可以操作Vue對(duì)象
頁面加載時(shí)請(qǐng)求
當(dāng)在Vue對(duì)象中寫好了ajax請(qǐng)求函數(shù)后，需要在頁面打開時(shí)候就進(jìn)行請(qǐng)求加載數(shù)據(jù)崇呵，我們可以在Vue對(duì)象創(chuàng)建的生命周期created中進(jìn)行調(diào)用
export default {
name:'',
created() {
this.getArticleInfo();
}
}
調(diào)試
在Vue應(yīng)用調(diào)試的時(shí)候還是踩了一些坑缤剧。在調(diào)試的時(shí)候需要接入后端的數(shù)據(jù)，那么問題來了域慷，使用npm run serve打開的Vue應(yīng)用與后端程序端口不一致荒辕，由于瀏覽器的同源策略，ajax無法獲取到后端的數(shù)據(jù)犹褒。
這個(gè)問題有兩個(gè)解決方法：
把自己Vue應(yīng)用
npm run build抵窒，把靜態(tài)文件放到后端程序中一起調(diào)試(無比的傻)，雖然傻化漆，但也是一種辦法估脆，只是每次調(diào)試的時(shí)候都要build一次而已...設(shè)置代理(正確姿勢(shì))，創(chuàng)建vue.config.js文件(工程本身可能沒有生成座云，若是生成了可以直接使用)疙赠，在其中添加下列代碼付材，設(shè)置后端程序的地址端口，旨在將在
serve時(shí)沒有找到的路由轉(zhuǎn)發(fā)到設(shè)置的地址中圃阳。
module.exports = {
devServer: {
proxy:"http://localhost:5000"
}
}
部署
在部署的時(shí)候厌衔，我的選擇是使用nginx在部署靜態(tài)文件，然后后端(express)另起端口捍岳，使用nginx設(shè)置代理將相關(guān)的后端請(qǐng)求轉(zhuǎn)發(fā)富寿。我的后端數(shù)據(jù)路由全在/api中，所以在nginx中設(shè)置
location /api {
proxy_pass http://127.0.0.1:5000;
}
還有一個(gè)點(diǎn)锣夹，在部署單頁應(yīng)用的時(shí)候页徐，路由為虛擬路由，也就是如果以直接輸入url的方式訪問除了index的地址時(shí)都會(huì)404银萍，所以需要在nginx中設(shè)置將404交給index.html處理
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ /index.html;
}
