https://github.com/soukoku/aspnetcore-vue

Sample setup on using asp.net core 2.1 + vue cli 3 in one project. This sample is deprecated and rolled into https://github.com/soukoku/AspNetCore.SpaServices.VueCli
https://github.com/soukoku/aspnetcore-vue

aspnet aspnetcore vue vuecli vuejs

Last synced: about 2 months ago
JSON representation

Sample setup on using asp.net core 2.1 + vue cli 3 in one project. This sample is deprecated and rolled into https://github.com/soukoku/AspNetCore.SpaServices.VueCli

• Host: GitHub
• URL: https://github.com/soukoku/aspnetcore-vue
• Owner: soukoku
• License: mit
• Archived: true
• Created: 2018-05-26T00:21:28.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-07-30T11:02:14.000Z (over 4 years ago)
• Last Synced: 2024-08-01T16:46:41.305Z (5 months ago)
• Topics: aspnet, aspnetcore, vue, vuecli, vuejs
• Language: Vue
• Homepage:
• Size: 1.89 MB
• Stars: 34
• Watchers: 6
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# aspnetcore-vue

A sample aspnet project template with these features:

* asp.net core 2.1 for server-side code

* vue.js for client-side code (created with cli v3)

* both live in one project and debugging is done on the aspnet project

* working HMR in vue app when debugging the aspnet site

Below are the steps used to create this.

# Aspnet Core Project

Create a new dotnet core project with aspnet core template.

Then In `Startup.cs`, add

`services.AddSpaStaticFiles()` in `ConfigureServices()` method,

and `app.UseSpaStaticFiles()` and `app.UseSpa()` in `Configure()` method.

```cs

public void ConfigureServices(IServiceCollection services)

{

  services.AddMvc();

  // new addition here

  services.AddSpaStaticFiles(spa =>

  {

    spa.RootPath = @"ClientApp\dist";

  });

}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)

{

  // ... other aspnet configuration skipped here

  app.UseStaticFiles();

  app.UseSpaStaticFiles(); // new addition

  app.UseMvc();

  // new addition

  app.UseSpa(spa =>

  {

    if (env.IsDevelopment())

    {

      // change this to whatever webpack dev server says it's running on

      spa.UseProxyToSpaDevelopmentServer("http://localhost:8080");

    }

  });

}

```

# Vue Project

Create a client-side project using vue cli 3 

into a folder called ClientApp in the aspnet project folder.

# Csproj File

Some edits to the .csproj file are also needed for proper 

release/publish using dotnet.

The `PropertyGroup` defines a new variable `SpaRoot` for use later.

The `ItemGroup` makes vue's project folder visible in VS

but not include in build.

`DebugEnsureNodeEnv` target installs npm packages if necessary

on project builds.

`PublishRunWebpack` target builds the vue app and 

include the **dist** folder in the published files.

```xml

  

  

    ClientApp\

  

  

    

    

  

  

  

    

    

      

    

    

    

    

  

  

    

    

    

    

    

      

      

        %(DistFiles.Identity)

        PreserveNewest

      

    

  

```