Asp.NETCore 2.0 Vue 2 (ES6) SPA Starter Kit 使用教程

管翌锬

于 2024-08-30 09:35:14 发布

阅读量486

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00217/article/details/141707086

版权

Asp.NETCore 2.0 Vue 2 (ES6) SPA Starter Kit 使用教程

aspnetcore-Vue-starter-signalRAsp.NETCore 2.0 Vue 2 (ES6) SPA Starter kit, contains routing, Vuex, and SignalR项目地址:https://gitcode.com/gh_mirrors/as/aspnetcore-Vue-starter-signalR

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

aspnetcore-Vue-starter-signalR/
├── ClientApp/
│   ├── src/
│   │   ├── components/
│   │   ├── store/
│   │   ├── views/
│   │   ├── App.vue
│   │   ├── main.js
│   ├── package.json
├── Controllers/
├── Hubs/
├── Models/
├── wwwroot/
├── appsettings.json
├── Program.cs
├── Startup.cs
├── Dockerfile
├── README.md
├── web.config

目录结构介绍

ClientApp/: 包含Vue.js前端应用的所有文件。
- src/: Vue.js应用的源代码。
  - components/: Vue组件。
  - store/: Vuex状态管理。
  - views/: 页面视图。
  - App.vue: 主应用组件。
  - main.js: 入口文件。
- package.json: 前端项目的依赖和脚本。
Controllers/: ASP.NET Core控制器。
Hubs/: SignalR Hub类。
Models/: 数据模型类。
wwwroot/: 静态文件目录。
appsettings.json: 应用配置文件。
Program.cs: 应用入口点。
Startup.cs: 应用启动配置。
Dockerfile: Docker容器配置。
README.md: 项目说明文档。
web.config: Web服务器配置。

2. 项目的启动文件介绍

Program.cs

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

    public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
        WebHost.CreateDefaultBuilder(args)
            .UseStartup<Startup>();
}

Main方法: 应用的入口点，创建并运行Web主机。
CreateWebHostBuilder方法: 配置Web主机。

Startup.cs

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

    public IConfiguration Configuration { get; }

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

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

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseSpaStaticFiles();
        app.UseMvc();
        app.UseSignalR(routes =>
        {
            routes.MapHub<ChatHub>("/chathub");
        });

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

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

ConfigureServices方法: 配置应用服务，包括MVC、SignalR和SPA静态文件。
Configure方法: 配置HTTP请求管道，包括异常处理、静态文件、MVC和SignalR。

3. 项目的配置文件介绍

appsettings.json

{
  "Logging": {
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "AllowedHosts": "*"
}

Logging: 日志配置。
AllowedHosts: 允许访问的主机。

package.json

{
  "name": "aspnetcore-vue-starter-signalr",
  "

aspnetcore-Vue-starter-signalRAsp.NETCore 2.0 Vue 2 (ES6) SPA Starter kit, contains routing, Vuex, and SignalR项目地址:https://gitcode.com/gh_mirrors/as/aspnetcore-Vue-starter-signalR