Implement vue-metarial and start with ui
This commit is contained in:
22
src/App.vue
22
src/App.vue
@ -4,21 +4,20 @@
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
</div>
|
||||
<router-view/>
|
||||
<div class="page-container">
|
||||
<md-app>
|
||||
<md-app-content>
|
||||
<router-view/>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
@ -29,4 +28,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-container {
|
||||
width: 1024px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,40 +1,33 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<div>
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
|
||||
<md-button class="md-raised">Test button!</md-button>
|
||||
<md-field>
|
||||
<label>Initial Value</label>
|
||||
<md-input v-model="initial"></md-input>
|
||||
</md-field>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
|
||||
similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
|
||||
similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
|
||||
similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
|
||||
similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
|
||||
similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
|
||||
similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
|
||||
similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam,
|
||||
similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import {Component, Prop, Vue} from 'vue-property-decorator'
|
||||
|
||||
@Component
|
||||
export default class HelloWorld extends Vue {
|
||||
@ -47,14 +40,17 @@ export default class HelloWorld extends Vue {
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
|
||||
@ -1,6 +1,18 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter, { RouteConfig } from 'vue-router'
|
||||
|
||||
import 'vue-material/dist/vue-material.min.css'
|
||||
import 'vue-material/dist/theme/default-dark.css'
|
||||
|
||||
import MdButton from 'vue-material/dist/components/MdButton';
|
||||
import MdField from 'vue-material/dist/components/MdField';
|
||||
import MdApp from 'vue-material/dist/components/MdApp';
|
||||
import MdAppContent from 'vue-material/dist/components/MdContent';
|
||||
Vue.use(MdButton);
|
||||
Vue.use(MdField);
|
||||
Vue.use(MdApp);
|
||||
Vue.use(MdAppContent);
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes: Array<RouteConfig> = [
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import axios, { AxiosPromise, AxiosRequestConfig, AxiosResponse } from 'axios'
|
||||
import {ApiObject, CreateGameObject} from "@/objects/objects";
|
||||
import {CreateGameObject} from "@/objects/objects";
|
||||
|
||||
export default class PerudoApi {
|
||||
private static baseUrl = 'http://localhost:8000/'
|
||||
|
||||
5
src/typings/vue-material.d.ts
vendored
Normal file
5
src/typings/vue-material.d.ts
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
declare module 'vue-material';
|
||||
declare module 'vue-material/dist/components/MdButton';
|
||||
declare module 'vue-material/dist/components/MdField';
|
||||
declare module 'vue-material/dist/components/MdApp';
|
||||
declare module 'vue-material/dist/components/MdContent';
|
||||
@ -3,3 +3,9 @@
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.about {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,7 +13,7 @@ import {CreateGameObject} from "@/objects/objects"; // @ is an alias to /src
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
HelloWorld
|
||||
HelloWorld,
|
||||
}
|
||||
})
|
||||
export default class Home extends Vue {
|
||||
|
||||
Reference in New Issue
Block a user