mirror of
https://github.com/aspnet/JavaScriptServices.git
synced 2025-12-25 19:17:30 +00:00
Fix templates directory structure to produce correct nupkg output
This commit is contained in:
Steve Sanderson
@@ -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'))
|
||||
});
|
||||
@@ -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 {
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div id='app-root' 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>
|
||||
@@ -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++;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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<WeatherForecast[]>)
|
||||
.then(data => {
|
||||
this.forecasts = data;
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -0,0 +1,19 @@
|
||||
<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 Vue app will be rebuilt and a new instance injected is into the page.</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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
<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="/">VueSpa</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>
|
||||
|
||||
<style src="./navmenu.css" />
|
||||
@@ -0,0 +1,6 @@
|
||||
@media (max-width: 767px) {
|
||||
/* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
|
||||
body {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user