在 Visual Studio 中使用 Vue 創建 ASP.NET Core 應用

作者：lyl 2025-04-16 10:12:13

本文將詳細介紹如何在Visual Studio中使用Vue.js創建ASP.NET Core應用，涵蓋準備工作、創建項目、編寫代碼、調試和部署等步驟，并分享一些實用的技巧和經驗。

隨著Web開發的不斷演進，前后端分離的開發模式越來越受到開發者的青睞。Vue.js作為一個流行的前端框架，與ASP.NET Core的結合使用可以為開發者提供強大的前后端開發能力。

準備工作

安裝Visual Studio：確保你的電腦上安裝了最新版本的Visual Studio。在安裝時，選擇“.NET Core跨平臺開發”和“ASP.NET和Web開發”工作負載。
安裝Node.js： Vue.js項目需要Node.js環境。訪問Node.js官網下載并安裝最新版本的Node.js。
安裝Vue CLI：打開命令行工具，運行以下命令來全局安裝Vue CLI：

npm install -g @vue/cli

創建項目

創建ASP.NET Core Web API項目：打開Visual Studio，選擇“創建新項目”。在“創建新項目”對話框中，選擇“ASP.NET Core Web 應用程序”，然后點擊“下一步”。
配置項目：在“配置新項目”對話框中，輸入項目名稱和位置。點擊“創建”。
選擇模板：在“創建新的ASP.NET Core Web 應用程序”對話框中，選擇“API”模板，確保“.NET Core”和“ASP.NET Core 3.1（或更高版本）”被選中。點擊“創建”。
添加Vue.js前端：在命令行中，導航到你的項目文件夾，并運行以下命令來創建一個新的Vue.js項目：

vue create client-app

選擇默認預設或手動選擇特性。

編寫代碼

設置代理：在Vue.js項目中，創建一個vue.config.js文件，并添加以下代碼以設置開發服務器的代理，解決開發環境的跨域問題：

module.exports = {
  devServer: {
    proxy: 'http://localhost:5000'
  }
};

編寫API：在ASP.NET Core項目中，添加新的控制器以提供API端點。例如，創建一個WeatherForecastController：

[ApiController]
[Route("[controller]")]
public class WeatherForecastController : ControllerBase
{
    private static readonly string[] Summaries = new[]
    {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };

    [HttpGet]
    public IEnumerable<WeatherForecast> Get()
    {
        var rng = new Random();
        return Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = DateTime.Now.AddDays(index),
            TemperatureC = rng.Next(-20, 55),
            Summary = Summaries[rng.Next(Summaries.Length)]
        })
        .ToArray();
    }
}

調用API：在Vue.js項目中，使用axios來調用ASP.NET Core后端提供的API。首先安裝axios：

npm install axios

然后，在Vue組件中調用API：

<template>
  <div>
    <h1>Weather forecast</h1>
    <ul>
      <li v-for="forecast in forecasts" :key="forecast.date">
        {{ forecast.date }} - {{ forecast.temperatureC }} - {{ forecast.summary }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      forecasts: []
    };
  },
  created() {
    axios.get('api/WeatherForecast')
      .then(response => {
        this.forecasts = response.data;
      })
      .catch(error => {
        console.error("There was an error!", error);
      });
  }
}
</script>

調試和部署

調試：在Visual Studio中啟動ASP.NET Core項目，并在命令行中運行npm run serve以啟動Vue.js項目。現在，你可以訪問http://localhost:8080來查看應用，并使用瀏覽器的開發者工具進行調試。
部署：對于生產環境，你需要構建Vue.js項目并將其部署到靜態文件服務器。運行npm run build來構建項目，然后將dist文件夾中的內容部署到你的Web服務器。

實用技巧和經驗分享

使用環境變量：利用環境變量來管理不同環境（開發、測試、生產）的配置。
組件化開發：將Vue.js應用拆分成多個組件，以提高代碼的可維護性和復用性。
利用Visual Studio的調試功能： Visual Studio提供了強大的調試功能，如斷點、單步執行等，可以幫助你快速定位和解決問題。
保持更新： Vue.js和ASP.NET Core都在不斷發展和更新，定期查看官方文檔和社區動態，以保持你的技能和知識是最新的。

結語

通過本文，你學會了如何在Visual Studio中使用Vue.js創建ASP.NET Core應用。從準備工作到創建項目、編寫代碼、調試和部署，每一步都進行了詳細的介紹。同時，你還學到了一些實用的技巧和經驗，以幫助你更好地理解和使用Vue和ASP.NET Core技術。現在，你可以開始構建自己的前后端分離應用了！

責任編輯：趙寧寧來源：后端Q

Web 開發 Vue