Skip to content

ASP.NET Core 2.1 with Vue.js (vue-cli3 & webpack 4), Typescript, EF Core

Notifications You must be signed in to change notification settings

ow-en/ASPCoreVueCLITemplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue-cli & ASP.NET Core 2.1 with Vue.js + TypeScript and Vuetify

To Install dotnet new template:

  • clone repository
  • within CLI, run dotnet new -i <path to repository folder where .template.config is located>
  • to confirm template was installed, run dotnet new -l
  • to scaffold a new project using this template, run dotnet new VueCLINetCoreEFCore -n <nameofproject> -o <nameofproject>

To Install/Run Repository:

  • clone repo and run dotnet restore
  • install VUE-CLI npm i -g @vue/cli
  • open a CLI, in any directory, and type vue ui
  • within the vue-cli GUI, create a new project.
  • within the project navigation wizard, navigate to the VueCLICore directory of this project (the presentation layer)
  • within the VueCLICore directory, choose vue-cli's output directory as ClientApp important: make sure "overwrite existing folder" option is checked
  • when creating the project, vue-cli GUI will allow you to use a preset, or to manually configure the project setup (and/or create a new preset). Choose manual config.
  • when going through the manual configuration, select everything you want to include in the project. I recommend selecting most of the options, with Mocha for unit testing (VS compatible) and Nightwatch for e2e testing (VS & Selenium compatible)
  • if you are planning on installing the Vuetify plugin after project creation, make sure that you select Stylus as the CSS preprocessor option during project setup.
  • if selecting TypeScript as an option during project creation, make sure that your linting option is set to TSLint.
  • create the project. when vue-cli GUI is done scaffolding the new project (inside ClientApp), navigate to the ClientApp directory and npm install
  • At this point, you can do one of two things: add plugins (such as Vuetify) through vue-cli GUI plugins section, or you can run the project as-is through IIS or CLI (see below) if adding Vuetify, I recommend allowing vue-cli to scaffold the Vuetify dependencies before running the project
  • run the project through IIS in Visual Studio or through CLI using npm run serve (navigate to port 8080)

Important note regarding HMR in IIS: make sure to disable SSL in the Properties section of the root project in Visual Studio.

About

ASP.NET Core 2.1 with Vue.js (vue-cli3 & webpack 4), Typescript, EF Core

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published