ASPCoreVueCLITemplate
ASPCoreVueCLITemplate copied to clipboard
ASP.NET Core 2.1 with Vue.js (vue-cli3 & webpack 4), Typescript, EF Core
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
VueCLICoredirectory of this project (the presentation layer) - within the
VueCLICoredirectory, choose vue-cli's output directory asClientAppimportant: 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 theClientAppdirectory andnpm install - At this point, you can do one of two things: add plugins (such as Vuetify) through vue-cli GUI
pluginssection, 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.