在前端開發中，經常需要使用到后端來提供數據接口，Node.js是一個非常流行的后端開發框架，而Vue.js則是一款由 JavaScript 編寫的現代響應式框架。在實際應用開發中，我們通常會將Vue.js和Node.js結合在一起使用，使得我們可以更加方便地完成前后端數據的交互。本文將講解如何使用Vue.js連接Node.js。

在使用 Vue.js 連接 Node.js 之前，需要確保已在本地安裝了 Node.js，可以通過在命令行中輸入 node -v 來檢查當前 Node.js 的版本。如果還沒有安裝，可以到 Node.js 官網（https://nodejs.org/zh-cn/）下載并安裝對應版本。

接下來我們需要在項目中安裝相關依賴，首先在命令行中找到項目目錄，然后執行以下命令：

npm install express

這樣就可以在項目中添加 Express 框架，之后我們需要創建一個 Node.js 服務器，將一個請求發送到指定的 URL 并返回數據。

const express = require('express')
const app = express()
const port = 8080
app.get('/', (req, res) =>{
res.send('Hello World!')
})
app.listen(port, () =>{
console.log(`Server listening at http://localhost:${port}`)
})

上述代碼創建了一個簡單的 Node.js 服務器，監聽8080端口并且返回一條 Hello World!消息。

接下來我們需要在 Vue.js 項目中連接到 Node.js 服務器，以獲取數據。這里我們可以使用 Axios，一個基于 Promise 的 HTTP 庫，它可以用于瀏覽器和 Node.js 平臺上的應用程序。在命令行中執行以下命令安裝 Axios：

npm install axios

之后在 Vue.js 組件中使用 Axios 來連接到 Node.js 服務器：

import axios from 'axios'
export default {
data() {
return {
message: ''
}
},
mounted() {
axios.get('http://localhost:8080/')
.then(response =>{
this.message = response.data
})
}
}

上述代碼中，我們在組件的 mounted 鉤子函數中使用 Axios 來連接到 Node.js 服務器的根目錄，并將返回的數據賦值給組件中的 message 變量。這樣，我們就成功地連接了 Vue.js 和 Node.js。

需要注意的是，在實際應用中，通常會存在跨域請求的問題，可以通過在 Node.js 服務器中設置響應頭來解決這個問題，例如：

app.use((req, res, next) =>{
res.header('Access-Control-Allow-Origin', '*')
next()
})

上述代碼設置了允許所有來源的跨域請求。實際應用中需要根據具體情況來設置響應頭。

總之，使用 Vue.js 連接 Node.js 是一個非常重要的前端開發技能，在實際應用中可以幫助我們更加方便地完成前后端數據交互。本文中我們介紹了如何使用 Axios 來連接到 Node.js 服務器，并解決了可能出現的跨域請求問題。