From 3157c59e4e9f28ee3037cf14bd03c39e51248d12 Mon Sep 17 00:00:00 2001 From: Eric Anderson Date: Mon, 30 Oct 2017 06:32:38 -0500 Subject: [PATCH 1/2] Add Vue project --- .gitignore | 2 +- ASP.NET Core Basics/ASP.NET Core Basics.sln | 54 +- ASP.NET Core Basics/src/Vue/ClientApp/boot.ts | 17 + .../src/Vue/ClientApp/components/app/app.ts | 10 + .../Vue/ClientApp/components/app/app.vue.html | 14 + .../ClientApp/components/counter/counter.ts | 11 + .../components/counter/counter.vue.html | 13 + .../components/fetchdata/fetchdata.ts | 22 + .../components/fetchdata/fetchdata.vue.html | 30 + .../ClientApp/components/home/home.vue.html | 19 + .../ClientApp/components/navmenu/navmenu.css | 59 + .../components/navmenu/navmenu.vue.html | 37 + .../src/Vue/ClientApp/css/site.css | 6 + .../src/Vue/Controllers/HomeController.cs | 23 + .../Vue/Controllers/SampleDataController.cs | 44 + ASP.NET Core Basics/src/Vue/Program.cs | 25 + ASP.NET Core Basics/src/Vue/Startup.cs | 58 + .../src/Vue/Views/Home/Index.cshtml | 9 + .../src/Vue/Views/Shared/Error.cshtml | 21 + .../src/Vue/Views/Shared/_Layout.cshtml | 20 + .../src/Vue/Views/_ViewImports.cshtml | 3 + .../src/Vue/Views/_ViewStart.cshtml | 3 + ASP.NET Core Basics/src/Vue/Vue.csproj | 48 + .../src/Vue/appsettings.Development.json | 19 + ASP.NET Core Basics/src/Vue/appsettings.json | 15 + .../src/Vue/npm-shrinkwrap.json | 3702 +++ ASP.NET Core Basics/src/Vue/package.json | 27 + ASP.NET Core Basics/src/Vue/tsconfig.json | 17 + ASP.NET Core Basics/src/Vue/webpack.config.js | 51 + .../src/Vue/webpack.config.vendor.js | 49 + .../dist/89889688147bd7575d6327160d64e760.svg | 288 + .../src/Vue/wwwroot/dist/main.js | 5119 ++++ .../src/Vue/wwwroot/dist/main.js.map | 1 + .../src/Vue/wwwroot/dist/vendor-manifest.json | 1 + .../src/Vue/wwwroot/dist/vendor.css | 6757 +++++ .../src/Vue/wwwroot/dist/vendor.js | 23499 ++++++++++++++++ .../src/Vue/wwwroot/favicon.ico | Bin 0 -> 32038 bytes 37 files changed, 40090 insertions(+), 3 deletions(-) create mode 100644 ASP.NET Core Basics/src/Vue/ClientApp/boot.ts create mode 100644 ASP.NET Core Basics/src/Vue/ClientApp/components/app/app.ts create mode 100644 ASP.NET Core Basics/src/Vue/ClientApp/components/app/app.vue.html create mode 100644 ASP.NET Core Basics/src/Vue/ClientApp/components/counter/counter.ts create mode 100644 ASP.NET Core Basics/src/Vue/ClientApp/components/counter/counter.vue.html create mode 100644 ASP.NET Core Basics/src/Vue/ClientApp/components/fetchdata/fetchdata.ts create mode 100644 ASP.NET Core Basics/src/Vue/ClientApp/components/fetchdata/fetchdata.vue.html create mode 100644 ASP.NET Core Basics/src/Vue/ClientApp/components/home/home.vue.html create mode 100644 ASP.NET Core Basics/src/Vue/ClientApp/components/navmenu/navmenu.css create mode 100644 ASP.NET Core Basics/src/Vue/ClientApp/components/navmenu/navmenu.vue.html create mode 100644 ASP.NET Core Basics/src/Vue/ClientApp/css/site.css create mode 100644 ASP.NET Core Basics/src/Vue/Controllers/HomeController.cs create mode 100644 ASP.NET Core Basics/src/Vue/Controllers/SampleDataController.cs create mode 100644 ASP.NET Core Basics/src/Vue/Program.cs create mode 100644 ASP.NET Core Basics/src/Vue/Startup.cs create mode 100644 ASP.NET Core Basics/src/Vue/Views/Home/Index.cshtml create mode 100644 ASP.NET Core Basics/src/Vue/Views/Shared/Error.cshtml create mode 100644 ASP.NET Core Basics/src/Vue/Views/Shared/_Layout.cshtml create mode 100644 ASP.NET Core Basics/src/Vue/Views/_ViewImports.cshtml create mode 100644 ASP.NET Core Basics/src/Vue/Views/_ViewStart.cshtml create mode 100644 ASP.NET Core Basics/src/Vue/Vue.csproj create mode 100644 ASP.NET Core Basics/src/Vue/appsettings.Development.json create mode 100644 ASP.NET Core Basics/src/Vue/appsettings.json create mode 100644 ASP.NET Core Basics/src/Vue/npm-shrinkwrap.json create mode 100644 ASP.NET Core Basics/src/Vue/package.json create mode 100644 ASP.NET Core Basics/src/Vue/tsconfig.json create mode 100644 ASP.NET Core Basics/src/Vue/webpack.config.js create mode 100644 ASP.NET Core Basics/src/Vue/webpack.config.vendor.js create mode 100644 ASP.NET Core Basics/src/Vue/wwwroot/dist/89889688147bd7575d6327160d64e760.svg create mode 100644 ASP.NET Core Basics/src/Vue/wwwroot/dist/main.js create mode 100644 ASP.NET Core Basics/src/Vue/wwwroot/dist/main.js.map create mode 100644 ASP.NET Core Basics/src/Vue/wwwroot/dist/vendor-manifest.json create mode 100644 ASP.NET Core Basics/src/Vue/wwwroot/dist/vendor.css create mode 100644 ASP.NET Core Basics/src/Vue/wwwroot/dist/vendor.js create mode 100644 ASP.NET Core Basics/src/Vue/wwwroot/favicon.ico diff --git a/.gitignore b/.gitignore index c50f40f..f8767cc 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ -/Properties/launchSettings.json +launchSettings.json ## Ignore Visual Studio temporary files, build results, and ## files generated by popular Visual Studio add-ons. diff --git a/ASP.NET Core Basics/ASP.NET Core Basics.sln b/ASP.NET Core Basics/ASP.NET Core Basics.sln index 3e665d4..55af4da 100644 --- a/ASP.NET Core Basics/ASP.NET Core Basics.sln +++ b/ASP.NET Core Basics/ASP.NET Core Basics.sln @@ -1,7 +1,6 @@ - Microsoft Visual Studio Solution File, Format Version 12.00 # Visual Studio 15 -VisualStudioVersion = 15.0.27004.2002 +VisualStudioVersion = 15.0.27004.2005 MinimumVisualStudioVersion = 10.0.40219.1 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{6446DEF2-D423-47E2-85CC-691A52915EC2}" EndProject @@ -15,28 +14,78 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Angular", "src\Angular\Angu EndProject Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "React", "src\React\React.csproj", "{56EC1AA3-0060-4349-921F-59AAB8A93129}" EndProject +Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Vue", "src\Vue\Vue.csproj", "{9C278842-E287-488D-B76B-D3096AF553D4}" +EndProject Global GlobalSection(SolutionConfigurationPlatforms) = preSolution Debug|Any CPU = Debug|Any CPU + Debug|x64 = Debug|x64 + Debug|x86 = Debug|x86 Release|Any CPU = Release|Any CPU + Release|x64 = Release|x64 + Release|x86 = Release|x86 EndGlobalSection GlobalSection(ProjectConfigurationPlatforms) = postSolution {A1208011-947A-475C-9011-E2657FAB5A31}.Debug|Any CPU.ActiveCfg = Debug|Any CPU {A1208011-947A-475C-9011-E2657FAB5A31}.Debug|Any CPU.Build.0 = Debug|Any CPU + {A1208011-947A-475C-9011-E2657FAB5A31}.Debug|x64.ActiveCfg = Debug|Any CPU + {A1208011-947A-475C-9011-E2657FAB5A31}.Debug|x64.Build.0 = Debug|Any CPU + {A1208011-947A-475C-9011-E2657FAB5A31}.Debug|x86.ActiveCfg = Debug|Any CPU + {A1208011-947A-475C-9011-E2657FAB5A31}.Debug|x86.Build.0 = Debug|Any CPU {A1208011-947A-475C-9011-E2657FAB5A31}.Release|Any CPU.ActiveCfg = Release|Any CPU {A1208011-947A-475C-9011-E2657FAB5A31}.Release|Any CPU.Build.0 = Release|Any CPU + {A1208011-947A-475C-9011-E2657FAB5A31}.Release|x64.ActiveCfg = Release|Any CPU + {A1208011-947A-475C-9011-E2657FAB5A31}.Release|x64.Build.0 = Release|Any CPU + {A1208011-947A-475C-9011-E2657FAB5A31}.Release|x86.ActiveCfg = Release|Any CPU + {A1208011-947A-475C-9011-E2657FAB5A31}.Release|x86.Build.0 = Release|Any CPU {EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Debug|Any CPU.ActiveCfg = Debug|Any CPU {EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Debug|Any CPU.Build.0 = Debug|Any CPU + {EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Debug|x64.ActiveCfg = Debug|Any CPU + {EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Debug|x64.Build.0 = Debug|Any CPU + {EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Debug|x86.ActiveCfg = Debug|Any CPU + {EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Debug|x86.Build.0 = Debug|Any CPU {EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Release|Any CPU.ActiveCfg = Release|Any CPU {EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Release|Any CPU.Build.0 = Release|Any CPU + {EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Release|x64.ActiveCfg = Release|Any CPU + {EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Release|x64.Build.0 = Release|Any CPU + {EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Release|x86.ActiveCfg = Release|Any CPU + {EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Release|x86.Build.0 = Release|Any CPU {F27EF346-050A-4AC6-BCAA-D2446246240C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU {F27EF346-050A-4AC6-BCAA-D2446246240C}.Debug|Any CPU.Build.0 = Debug|Any CPU + {F27EF346-050A-4AC6-BCAA-D2446246240C}.Debug|x64.ActiveCfg = Debug|Any CPU + {F27EF346-050A-4AC6-BCAA-D2446246240C}.Debug|x64.Build.0 = Debug|Any CPU + {F27EF346-050A-4AC6-BCAA-D2446246240C}.Debug|x86.ActiveCfg = Debug|Any CPU + {F27EF346-050A-4AC6-BCAA-D2446246240C}.Debug|x86.Build.0 = Debug|Any CPU {F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|Any CPU.ActiveCfg = Release|Any CPU {F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|Any CPU.Build.0 = Release|Any CPU + {F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|x64.ActiveCfg = Release|Any CPU + {F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|x64.Build.0 = Release|Any CPU + {F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|x86.ActiveCfg = Release|Any CPU + {F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|x86.Build.0 = Release|Any CPU {56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|Any CPU.ActiveCfg = Debug|Any CPU {56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|Any CPU.Build.0 = Debug|Any CPU + {56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|x64.ActiveCfg = Debug|Any CPU + {56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|x64.Build.0 = Debug|Any CPU + {56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|x86.ActiveCfg = Debug|Any CPU + {56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|x86.Build.0 = Debug|Any CPU {56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|Any CPU.ActiveCfg = Release|Any CPU {56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|Any CPU.Build.0 = Release|Any CPU + {56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|x64.ActiveCfg = Release|Any CPU + {56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|x64.Build.0 = Release|Any CPU + {56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|x86.ActiveCfg = Release|Any CPU + {56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|x86.Build.0 = Release|Any CPU + {9C278842-E287-488D-B76B-D3096AF553D4}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {9C278842-E287-488D-B76B-D3096AF553D4}.Debug|Any CPU.Build.0 = Debug|Any CPU + {9C278842-E287-488D-B76B-D3096AF553D4}.Debug|x64.ActiveCfg = Debug|Any CPU + {9C278842-E287-488D-B76B-D3096AF553D4}.Debug|x64.Build.0 = Debug|Any CPU + {9C278842-E287-488D-B76B-D3096AF553D4}.Debug|x86.ActiveCfg = Debug|Any CPU + {9C278842-E287-488D-B76B-D3096AF553D4}.Debug|x86.Build.0 = Debug|Any CPU + {9C278842-E287-488D-B76B-D3096AF553D4}.Release|Any CPU.ActiveCfg = Release|Any CPU + {9C278842-E287-488D-B76B-D3096AF553D4}.Release|Any CPU.Build.0 = Release|Any CPU + {9C278842-E287-488D-B76B-D3096AF553D4}.Release|x64.ActiveCfg = Release|Any CPU + {9C278842-E287-488D-B76B-D3096AF553D4}.Release|x64.Build.0 = Release|Any CPU + {9C278842-E287-488D-B76B-D3096AF553D4}.Release|x86.ActiveCfg = Release|Any CPU + {9C278842-E287-488D-B76B-D3096AF553D4}.Release|x86.Build.0 = Release|Any CPU EndGlobalSection GlobalSection(SolutionProperties) = preSolution HideSolutionNode = FALSE @@ -46,6 +95,7 @@ Global {EB45A937-E3EF-4B0F-A674-92B44BEA3FDA} = {6446DEF2-D423-47E2-85CC-691A52915EC2} {F27EF346-050A-4AC6-BCAA-D2446246240C} = {6446DEF2-D423-47E2-85CC-691A52915EC2} {56EC1AA3-0060-4349-921F-59AAB8A93129} = {6446DEF2-D423-47E2-85CC-691A52915EC2} + {9C278842-E287-488D-B76B-D3096AF553D4} = {6446DEF2-D423-47E2-85CC-691A52915EC2} EndGlobalSection GlobalSection(ExtensibilityGlobals) = postSolution SolutionGuid = {810FF428-282C-444B-9C2A-660B9AAE9D8F} diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/boot.ts b/ASP.NET Core Basics/src/Vue/ClientApp/boot.ts new file mode 100644 index 0000000..b95bd38 --- /dev/null +++ b/ASP.NET Core Basics/src/Vue/ClientApp/boot.ts @@ -0,0 +1,17 @@ +import './css/site.css'; +import 'bootstrap'; +import Vue from 'vue'; +import VueRouter from 'vue-router'; +Vue.use(VueRouter); + +const routes = [ + { path: '/', component: require('./components/home/home.vue.html') }, + { path: '/counter', component: require('./components/counter/counter.vue.html') }, + { path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html') } +]; + +new Vue({ + el: '#app-root', + router: new VueRouter({ mode: 'history', routes: routes }), + render: h => h(require('./components/app/app.vue.html')) +}); diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/components/app/app.ts b/ASP.NET Core Basics/src/Vue/ClientApp/components/app/app.ts new file mode 100644 index 0000000..f580f76 --- /dev/null +++ b/ASP.NET Core Basics/src/Vue/ClientApp/components/app/app.ts @@ -0,0 +1,10 @@ +import Vue from 'vue'; +import { Component } from 'vue-property-decorator'; + +@Component({ + components: { + MenuComponent: require('../navmenu/navmenu.vue.html') + } +}) +export default class AppComponent extends Vue { +} diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/components/app/app.vue.html b/ASP.NET Core Basics/src/Vue/ClientApp/components/app/app.vue.html new file mode 100644 index 0000000..6a108b8 --- /dev/null +++ b/ASP.NET Core Basics/src/Vue/ClientApp/components/app/app.vue.html @@ -0,0 +1,14 @@ + + + diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/components/counter/counter.ts b/ASP.NET Core Basics/src/Vue/ClientApp/components/counter/counter.ts new file mode 100644 index 0000000..e48ef79 --- /dev/null +++ b/ASP.NET Core Basics/src/Vue/ClientApp/components/counter/counter.ts @@ -0,0 +1,11 @@ +import Vue from 'vue'; +import { Component } from 'vue-property-decorator'; + +@Component +export default class CounterComponent extends Vue { + currentcount: number = 0; + + incrementCounter() { + this.currentcount++; + } +} diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/components/counter/counter.vue.html b/ASP.NET Core Basics/src/Vue/ClientApp/components/counter/counter.vue.html new file mode 100644 index 0000000..570d1a2 --- /dev/null +++ b/ASP.NET Core Basics/src/Vue/ClientApp/components/counter/counter.vue.html @@ -0,0 +1,13 @@ + + + diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/components/fetchdata/fetchdata.ts b/ASP.NET Core Basics/src/Vue/ClientApp/components/fetchdata/fetchdata.ts new file mode 100644 index 0000000..c6108f9 --- /dev/null +++ b/ASP.NET Core Basics/src/Vue/ClientApp/components/fetchdata/fetchdata.ts @@ -0,0 +1,22 @@ +import Vue from 'vue'; +import { Component } from 'vue-property-decorator'; + +interface WeatherForecast { + dateFormatted: string; + temperatureC: number; + temperatureF: number; + summary: string; +} + +@Component +export default class FetchDataComponent extends Vue { + forecasts: WeatherForecast[] = []; + + mounted() { + fetch('api/SampleData/WeatherForecasts') + .then(response => response.json() as Promise) + .then(data => { + this.forecasts = data; + }); + } +} diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/components/fetchdata/fetchdata.vue.html b/ASP.NET Core Basics/src/Vue/ClientApp/components/fetchdata/fetchdata.vue.html new file mode 100644 index 0000000..1b64774 --- /dev/null +++ b/ASP.NET Core Basics/src/Vue/ClientApp/components/fetchdata/fetchdata.vue.html @@ -0,0 +1,30 @@ + + + diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/components/home/home.vue.html b/ASP.NET Core Basics/src/Vue/ClientApp/components/home/home.vue.html new file mode 100644 index 0000000..d418e70 --- /dev/null +++ b/ASP.NET Core Basics/src/Vue/ClientApp/components/home/home.vue.html @@ -0,0 +1,19 @@ + \ No newline at end of file diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/components/navmenu/navmenu.css b/ASP.NET Core Basics/src/Vue/ClientApp/components/navmenu/navmenu.css new file mode 100644 index 0000000..b7404b4 --- /dev/null +++ b/ASP.NET Core Basics/src/Vue/ClientApp/components/navmenu/navmenu.css @@ -0,0 +1,59 @@ +.main-nav li .glyphicon { + margin-right: 10px; +} + +/* Highlighting rules for nav menu items */ +.main-nav li a.router-link-active, +.main-nav li a.router-link-active:hover, +.main-nav li a.router-link-active:focus { + background-color: #4189C7; + color: white; +} + +/* Keep the nav menu independent of scrolling and on top of other items */ +.main-nav { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1; +} + +@media (min-width: 768px) { + /* On small screens, convert the nav menu to a vertical sidebar */ + .main-nav { + height: 100%; + width: calc(25% - 20px); + } + .main-nav .navbar { + border-radius: 0px; + border-width: 0px; + height: 100%; + } + .main-nav .navbar-header { + float: none; + } + .main-nav .navbar-collapse { + border-top: 1px solid #444; + padding: 0px; + } + .main-nav .navbar ul { + float: none; + } + .main-nav .navbar li { + float: none; + font-size: 15px; + margin: 6px; + } + .main-nav .navbar li a { + padding: 10px 16px; + border-radius: 4px; + } + .main-nav .navbar a { + /* If a menu item's text is too long, truncate it */ + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/components/navmenu/navmenu.vue.html b/ASP.NET Core Basics/src/Vue/ClientApp/components/navmenu/navmenu.vue.html new file mode 100644 index 0000000..2a62a39 --- /dev/null +++ b/ASP.NET Core Basics/src/Vue/ClientApp/components/navmenu/navmenu.vue.html @@ -0,0 +1,37 @@ + + +