github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-24 02:30:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Vue template

Browse Source
This commit is contained in:
Steve Sanderson
2017-03-09 10:04:54 +00:00
parent 0a1ac6a70a
commit 360688f78b
34 changed files with 988 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
templates/VueSpa/ClientApp/components/app/app.ts Normal file
View File

@@ -0,0 +1,10 @@
import Vue from 'vue';
import { Component } from 'av-ts';
@Component({
components: {
MenuComponent: require('../navmenu/navmenu.vue.html')
}
})
export default class AppComponent extends Vue {
}

15
templates/VueSpa/ClientApp/components/app/app.vue.html Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<menu-component />
</div>
<div class="col-sm-9">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script src="./app.ts"></script>

11
templates/VueSpa/ClientApp/components/counter/counter.ts Normal file
View File

@@ -0,0 +1,11 @@
import Vue from 'vue';
import { Component } from 'av-ts';
@Component
export default class CounterComponent extends Vue {
currentcount: number = 0;
incrementCounter() {
this.currentcount++;
}
}

13
templates/VueSpa/ClientApp/components/counter/counter.vue.html Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div>
<h1>Counter</h1>
<p>This is a simple example of a Vue.js component.</p>
<p>Current count: <strong>{{ currentcount }}</strong></p>
<button @click="incrementCounter">Increment</button>
</div>
</template>
<script src="./counter.ts"></script>

22
templates/VueSpa/ClientApp/components/fetchdata/fetchdata.ts Normal file
View File

@@ -0,0 +1,22 @@
import Vue from 'vue';
import { Component, Lifecycle } from 'av-ts';
interface WeatherForecast {
dateFormatted: string;
temperatureC: number;
temperatureF: number;
summary: string;
}
@Component
export default class FetchDataComponent extends Vue {
forecasts: WeatherForecast[] = [];
@Lifecycle mounted() {
fetch('/api/SampleData/WeatherForecasts')
.then(response => response.json() as Promise<WeatherForecast[]>)
.then(data => {
this.forecasts = data;
});
}
}

30
templates/VueSpa/ClientApp/components/fetchdata/fetchdata.vue.html Normal file
View File

@@ -0,0 +1,30 @@
<template>
<div>
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
<table v-if="forecasts.length" class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
<tr v-for="item in forecasts">
<td>{{ item.dateFormatted }}</td>
<td>{{ item.temperatureC }}</td>
<td>{{ item.temperatureF }}</td>
<td>{{ item.summary }}</td>
</tr>
</tbody>
</table>
<p v-else><em>Loading...</em></p>
</div>
</template>
<script src="./fetchdata.ts"></script>

20
templates/VueSpa/ClientApp/components/home/home.vue.html Normal file
View File

@@ -0,0 +1,20 @@
<template>
<div>
<h1>Hello, world!</h1>
<p>Welcome to your new single-page application, built with:</p>
<ul>
<li><a href="https://get.asp.net/">ASP.NET Core</a> and <a href="https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx">C#</a> for cross-platform server-side code</li>
<li><a href="https://vuejs.org/">Vue.js</a> and <a href="http://www.typescriptlang.org/">TypeScript</a> for client-side code</li>
<li><a href="https://webpack.github.io/">Webpack</a> for building and bundling client-side resources</li>
<li><a href="http://getbootstrap.com/">Bootstrap</a> for layout and styling</li>
</ul>
<p>To help you get started, we"ve also set up:</p>
<ul>
<li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
<li><strong>Webpack dev middleware</strong>. In development mode, there"s no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
<li><strong>Hot module replacement</strong>. In development mode, you don"t even need to reload the page after making most changes. Within seconds of saving changes to files, your Knockout app will be rebuilt and a new instance injected is into the page.</li>
<li><strong>Code splitting and lazy loading</strong>. KO components may optionally be bundled individually and loaded on demand. For example, the code and template for "Counter" is not loaded until you navigate to it..</li>
<li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
</ul>
</div>
</template>

35
templates/VueSpa/ClientApp/components/navmenu/navmenu.vue.html Normal file
View File

@@ -0,0 +1,35 @@
<template>
<div class="main-nav">
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">WebApplicationBasic</a>
</div>
<div class="clearfix"></div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<router-link to="/" :exact="true">
<span class="glyphicon glyphicon-home"></span> Home
</router-link>
</li>
<li>
<router-link to="/counter">
<span class="glyphicon glyphicon-education"></span> Counter
</router-link>
</li>
<li>
<router-link to="/fetchdata">
<span class="glyphicon glyphicon-th-list"></span> Fetch data
</router-link>
</li>
</ul>
</div>
</div>
</div>
</template>