Skip to content

Commit a4943e7

Browse files
danijelhdanijelh
authored
Merge pull request #26 from danijelh/development
.NET Core 3 | Packages and config update
2 parents c15b132 + e6bec93 commit a4943e7

File tree

15 files changed

+11158
-13295
lines changed

15 files changed

+11158
-13295
lines changed

‎README.md

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# ASP.NET Core 2.2 multi-page Vue.js with TypeScript template
1+
# ASP.NET Core 3.1 multi-page Vue.js with TypeScript template
22

3-
The repository contains template using Vue.js, Vuex, Vue router, TypeScript, Bulma, SASS and Jest. It integrates Vue into AspNetCore MVC and showcases how to use Vue with it's entire ecosystem in .NET as a multipage (multiple mini SPA's) application. The template can also be used as a complete single page application but you should consider using [Vue cli](https://cli.vuejs.org/) for this as it is a more flexible and advanced solution.
3+
The repository contains template using Vue.js, Vuex, Vue router, TypeScript, Bulma and SASS. It integrates Vue into AspNetCore MVC and showcases how to use Vue with it's entire ecosystem in .NET as a multipage (multiple mini SPA's) application. The template can also be used as a complete single page application but you should consider using [Vue cli](https://cli.vuejs.org/) for this as it is a more flexible and advanced solution.
44

55
> **No TypeScript**: Template completely supports usage without TypeScript. You can use plain js if you don't have the need for or don't want to use TypeScript.
66
@@ -35,18 +35,17 @@ The repository contains template using Vue.js, Vuex, Vue router, TypeScript, Bul
3535

3636
## Features
3737

38-
- **ASP NET Core 2.2**
38+
- **ASP NET Core 3.1**
3939
- **Vue.js**
4040
- **Vuex**
4141
- **TypeScript**
4242
- **Bulma**
4343
- **Sass**
44-
- **Jest**
4544
- **Webpack 4**
4645

4746
## Prerequisites
4847

49-
- [.Net Core 2.2 SDK](https://www.microsoft.com/net/download/windows)
48+
- [.Net Core 3.1 SDK](https://dotnet.microsoft.com/download/dotnet-core)
5049
- [NodeJS](https://nodejs.org/)
5150

5251
## Installation
@@ -84,7 +83,7 @@ Template features the following commands
8483
- `npm run dev` - Builds front end in development mode and watches for any changes made to the files.
8584
- `npm run build:dev` - Builds front end in development mode.
8685
- `npm run build:prod` - Builds front end in production mode.
87-
- `npm run test` - Runs tests under __tests__ folder and generates code coverage report.
86+
- `npm run test` - ~~Runs tests under __tests__ folder and generates code coverage report.~~ Tests are removed to make config and packages simple.
8887
- `npm run publish` - Builds production optimized front-end packages and publishes the application in release mode.
8988

9089
## Licence

‎aspnetcore-vue-typescript-template.nuspec

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,18 @@
22
<package xmlns="http://schemas.microsoft.com/packaging/2012/06/nuspec.xsd">
33
<metadata>
44
<id>AspNetCore.Vue.TypeScript.Template</id>
5-
<version>1.0.1</version>
5+
<version>2.0.0</version>
66
<description>
7-
Template integrating Vue.js with ASP.NET Core MVC application. Features Vue, Vuex, Vue router, TypeScript, Bulma, Sass, Jest and Webpack 4.
7+
Template integrating Vue.js with ASP.NET Core MVC application. Features Vue, Vuex, Vue router, TypeScript, Bulma, Sass and Webpack 4.
88
</description>
99
<tags>template;vue;vuejs;typescript;vuex;</tags>
1010
<authors>Danijel Hrček</authors>
1111
<projectUrl>https://github.com/danijelh/aspnetcore-vue-typescript-template</projectUrl>
12-
<licenseUrl>https://github.com/danijelh/aspnetcore-vue-typescript-template/blob/master/LICENCE.txt</licenseUrl>
1312
<packageTypes>
1413
<packageType name="Template" />
1514
</packageTypes>
1615
<requireLicenseAcceptance>false</requireLicenseAcceptance>
17-
<releaseNotes>1.0.1 release.</releaseNotes>
16+
<releaseNotes>2.0.0 release.Upgrade to NET Core 3.x</releaseNotes>
1817
</metadata>
1918
<files>
2019
<file

‎content/AspNetCore.VueJs/.babelrc

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
11
{
2-
"presets": [
3-
["env", {
4-
"modules": false,
5-
"targets": {
6-
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
7-
}
8-
}],
9-
"stage-2"
10-
],
11-
"plugins": ["transform-runtime", "transform-es2015-modules-commonjs"],
12-
"env": {
13-
"test": {
14-
"presets": [
15-
["env", { "targets": { "node": "current" }}]
16-
]
2+
"presets": [
3+
[
4+
"@babel/preset-env",
5+
{
6+
"modules": false
177
}
18-
}
19-
}
8+
]
9+
],
10+
"plugins": [
11+
"@babel/plugin-syntax-dynamic-import"
12+
]
13+
}

‎content/AspNetCore.VueJs/AspNetCore.VueJs.csproj

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project Sdk="Microsoft.NET.Sdk.Web">
22

33
<PropertyGroup>
4-
<TargetFramework>netcoreapp2.2</TargetFramework>
4+
<TargetFramework>netcoreapp3.1</TargetFramework>
55
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
66
<TypeScriptToolsVersion>2.8</TypeScriptToolsVersion>
77
</PropertyGroup>
@@ -14,7 +14,6 @@
1414
</ItemGroup>
1515

1616
<ItemGroup>
17-
<PackageReference Include="Microsoft.AspNetCore.All" Version="2.2.1" />
1817
<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.2.1" />
1918
</ItemGroup>
2019

‎content/AspNetCore.VueJs/Startup.cs

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
using Microsoft.AspNetCore.Routing;
44
using Microsoft.Extensions.Configuration;
55
using Microsoft.Extensions.DependencyInjection;
6+
using Microsoft.Extensions.Hosting;
67

78
namespace AspNetCore.VueJs
89
{
@@ -23,7 +24,7 @@ public void ConfigureServices(IServiceCollection services)
2324
services.AddMvc();
2425
}
2526

26-
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
27+
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
2728
{
2829
if (env.IsDevelopment())
2930
{
@@ -32,16 +33,18 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env)
3233

3334
app.UseStaticFiles();
3435

35-
app.UseMvc(routes =>
36+
app.UseRouting();
37+
38+
app.UseEndpoints(endpoints =>
3639
{
37-
routes.MapRoute(
40+
endpoints.MapControllerRoute(
3841
name: "spa-route",
39-
template: "{controller}/{*anything=Index}",
42+
pattern: "{controller}/{*anything=Index}",
4043
defaults: new { action = "Index" });
41-
42-
routes.MapRoute(
44+
45+
endpoints.MapControllerRoute(
4346
name: "app-fallback",
44-
template: "{*anything}/",
47+
pattern: "{*anything}/",
4548
defaults: new { controller = "Template", action = "Index" });
4649
});
4750
}

‎content/AspNetCore.VueJs/VueApp/iceandfire/store/store.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1+
import 'es6-promise/auto'
2+
13
import Vue from 'vue'
24
import Vuex, { StoreOptions } from 'vuex'
35
import { GetterTree } from 'vuex'
46
import { ActionTree } from 'vuex'
57
import { MutationTree } from 'vuex'
68
import { RootState } from './state'
7-
import { CharacterResponse } from '@/iceandfire/types/models/character'
9+
// import { CharacterResponse } from '@/iceandfire/types/models/character'
10+
import { CharacterResponse } from '../types/models/character'
811

912
import axios from 'axios'
1013

‎content/AspNetCore.VueJs/VueApp/idontneedtypescript/views/ModuleInfo.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div>
33
<div class="container">
44
<h1 class="title">
5-
{{ pageTile }}
5+
{{ pageTitle }}
66
</h1>
77
<h2 class="subtitle">
88
And that's fine, don't use it.
@@ -39,7 +39,7 @@
3939
export default {
4040
data() {
4141
return {
42-
pageTile: 'I don\'t need TypeScript'
42+
pageTitle: 'I don\'t need TypeScript'
4343
}
4444
}
4545
}

‎content/AspNetCore.VueJs/VueApp/template/App.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@
2525
<li>
2626
<router-link :to="{ name: 'templateInfo' }">Template</router-link>
2727
</li>
28+
<li>
29+
<router-link :to="{ name: 'compositionApi' }">Composition API</router-link>
30+
</li>
2831
</ul>
2932
</aside>
3033
</section>

‎content/AspNetCore.VueJs/VueApp/template/app.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import Vue from 'vue'
22
import VueRouter from 'vue-router'
3+
import VueCompositionAPI from '@vue/composition-api'
34

45
Vue.config.performance = true
56

67
Vue.use(VueRouter)
8+
Vue.use(VueCompositionAPI)
79

810
import store from './store/store'
911
import { router } from './router/router'

‎content/AspNetCore.VueJs/VueApp/template/router/router.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import VueRouter from 'vue-router'
44
import Vuex from '@/template/views/Vuex.vue'
55
import TemplateInfo from '@/template/views/TemplateInfo.vue'
66
import ThirdPartyLibraries from '@/template/views/ThirdPartyLibraries.vue'
7+
import CompositionApi from '@/template/views/CompositionApi.vue'
78

89
const routePrefix = 'template'
910

@@ -17,6 +18,11 @@ const routes = [
1718
path: `/${routePrefix}/info`,
1819
component: TemplateInfo
1920
},
21+
{
22+
name: 'compositionApi',
23+
path: `/${routePrefix}/compositionApi`,
24+
component: CompositionApi
25+
},
2026
{
2127
name: 'vuex',
2228
path: `/${routePrefix}/vuex`,

‎content/AspNetCore.VueJs/VueApp/template/views/CompositionApi.vue

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<div>
3+
<div class="container">
4+
<h1 class="title">
5+
{{ pageTitle }}
6+
</h1>
7+
<h2 class="subtitle">Using Vue 3 composition API in Vue 2.</h2>
8+
<div class="content">
9+
<p>
10+
Vue 3 recently reached stable release. However I wouldn't yet
11+
recommend it for a production use as libraries and other dependencies
12+
still need to reach stability.
13+
</p>
14+
<p>
15+
This component showcases how you can use Vue 3 composition API with
16+
Vue 2.
17+
</p>
18+
<a
19+
@click.prevent.stop="changeTitle"
20+
class="button is-primary is-small shadow"
21+
>
22+
Change title
23+
</a>
24+
</div>
25+
</div>
26+
</div>
27+
</template>
28+
29+
<script lang="ts">
30+
// Using Vue 3 composition API with Vue 2
31+
import { ref, defineComponent } from "@vue/composition-api";
32+
33+
export default defineComponent({
34+
setup() {
35+
let pageTitle = ref("Composition API");
36+
37+
function changeTitle() {
38+
pageTitle.value = "Composition API is awesome!";
39+
}
40+
41+
return {
42+
pageTitle,
43+
changeTitle,
44+
};
45+
},
46+
});
47+
</script>
48+
49+
<style scoped>
50+
</style>

0 commit comments

Comments
 (0)