Node和Vue同是目前前端開發(fā)中最為常見的兩個(gè)技術(shù)。其中，Node是一個(gè)非常流行的JavaScript后端開發(fā)運(yùn)行環(huán)境，而Vue則是一個(gè)極其好用的前端框架。將它們?nèi)诤显谝黄穑梢砸訴ue為前端框架，使用Node提供后端服務(wù)，來構(gòu)建一款輕量級但功能強(qiáng)大的Web應(yīng)用。

我們可以使用Vue-cli構(gòu)建一個(gè)基礎(chǔ)的Vue應(yīng)用，然后使用Node來提供后端服務(wù)。如下是一個(gè)簡單的Node Vue app的例子：

// server.js
const express = require('express')
const app = express()
app.get('/', (req, res) =>{
res.send('Hello World!')
})
app.listen(3000, () =>{
console.log('Server listening on port 3000!')
})

上面的代碼可以啟動(dòng)一個(gè)簡單的Node server，監(jiān)聽3000端口并返回一個(gè)’Hello World’字符串。接下來，我們可以在Vue應(yīng)用中調(diào)用這個(gè)服務(wù)，并渲染頁面。如下是一個(gè)簡單的Vue組件：

// App.vue
<template>
<div>
<h1>Hello World!</h1>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data () {
return {
message: ''
}
},
mounted () {
fetch('/api')
.then(res => res.text())
.then(message => {
this.message = message
})
}
}
</script>

使用fetch函數(shù)向服務(wù)器請求數(shù)據(jù)，并將響應(yīng)中的文本賦值給message屬性。最后在模板中渲染這個(gè)message。我們還需要為Vue組件配置webpack-dev-server實(shí)現(xiàn)熱更新和靜態(tài)資源的服務(wù)器：

// webpack.config.js
module.exports = {
devServer: {
port: 8080,
proxy: {
'/api': {
target: 'http://localhost:3000/',
changeOrigin: true
}
}
}
}

設(shè)置代理，將所有以/api開頭的請求都代理到Node server上。然后我們就可以開始調(diào)試我們的Node Vue app了。