ASP.NET Core Vue Starter 项目教程

ASP.NET Core Vue Starter 项目教程

aspnetcore-Vue-starter*NEW* Asp.net Core & Vue.js (ES6) SPA Starter kit - Vuex, webpack, Web API, Docker, and more! By @TrilonIO项目地址:https://gitcode.com/gh_mirrors/as/aspnetcore-Vue-starter

1. 项目的目录结构及介绍

├── ClientApp
│   ├── babel.config.js
│   ├── package.json
│   ├── public
│   │   ├── favicon.ico
│   │   └── index.html
│   ├── src
│   │   ├── assets
│   │   │   └── logo.png
│   │   ├── components
│   │   │   └── HelloWorld.vue
│   │   ├── App.vue
│   │   └── main.js
│   └── vue.config.js
├── Controllers
│   └── SampleDataController.cs
├── Models
│   └── WeatherForecast.cs
├── Program.cs
├── Startup.cs
├── appsettings.json
├── aspnetcore-vue-starter.sln
└── wwwroot
    └── dist

目录结构介绍

• ClientApp: 包含 Vue.js 前端应用的所有文件。
  • babel.config.js: Babel 配置文件。
  • package.json: 前端项目的依赖和脚本配置。
  • public: 静态文件目录，包含 index.html 和 favicon.ico。
  • src: Vue.js 应用的源代码。
    • assets: 静态资源文件。
    • components: Vue 组件。
    • App.vue: 主应用组件。
    • main.js: 入口文件。
  • vue.config.js: Vue CLI 配置文件。
• Controllers: ASP.NET Core 控制器。
• Models: 数据模型。
• Program.cs: ASP.NET Core 应用的入口点。
• Startup.cs: 应用的启动配置。
• appsettings.json: 应用配置文件。
• aspnetcore-vue-starter.sln: Visual Studio 解决方案文件。
• wwwroot: 静态文件目录，包含编译后的前端资源。

2. 项目的启动文件介绍

Program.cs

public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
    }

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStartup<Startup>();
            });
}

• Main 方法: 应用的入口点，调用 CreateHostBuilder 方法创建和运行主机。
• CreateHostBuilder 方法: 配置默认主机构建器，并指定 Startup 类作为启动配置。

Startup.cs

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllersWithViews();
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/dist";
        });
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseSpaStaticFiles();

        app.UseRouting();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller}/{action=Index}/{id?}");
        });

        app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseVueCli(npmScript: "serve");
            }
        });
    }
}

• Startup 类: 包含应用的配置和服务注册。
  • ConfigureServices 方法: 注册服务，如控制器和 SPA 静态文件。
  • Configure 方法: 配置

aspnetcore-Vue-starter*NEW* Asp.net Core & Vue.js (ES6) SPA Starter kit - Vuex, webpack, Web API, Docker, and more! By @TrilonIO项目地址:https://gitcode.com/gh_mirrors/as/aspnetcore-Vue-starter