Matthew Raymer
1 year ago
8 changed files with 60 additions and 80 deletions
@ -1,30 +0,0 @@ |
|||
<script setup lang="ts"> |
|||
import HelloWorld from './components/HelloWorld.vue' |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<a href="https://vitejs.dev" target="_blank"> |
|||
<img src="/vite.svg" class="logo" alt="Vite logo" /> |
|||
</a> |
|||
<a href="https://vuejs.org/" target="_blank"> |
|||
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /> |
|||
</a> |
|||
</div> |
|||
<HelloWorld msg="Vite + Vue" /> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.logo { |
|||
height: 6em; |
|||
padding: 1.5em; |
|||
will-change: filter; |
|||
transition: filter 300ms; |
|||
} |
|||
.logo:hover { |
|||
filter: drop-shadow(0 0 2em #646cffaa); |
|||
} |
|||
.logo.vue:hover { |
|||
filter: drop-shadow(0 0 2em #42b883aa); |
|||
} |
|||
</style> |
@ -0,0 +1,29 @@ |
|||
<template> |
|||
<div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Component, Vue } from 'vue-facing-decorator'; |
|||
|
|||
@Component |
|||
export default class WorldComponent extends Vue { |
|||
} |
|||
|
|||
</script> |
|||
|
|||
|
|||
<style scoped> |
|||
.logo { |
|||
height: 6em; |
|||
padding: 1.5em; |
|||
will-change: filter; |
|||
transition: filter 300ms; |
|||
} |
|||
.logo:hover { |
|||
filter: drop-shadow(0 0 2em #646cffaa); |
|||
} |
|||
.logo.vue:hover { |
|||
filter: drop-shadow(0 0 2em #42b883aa); |
|||
} |
|||
</style> |
@ -1,38 +0,0 @@ |
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue' |
|||
|
|||
defineProps<{ msg: string }>() |
|||
|
|||
const count = ref(0) |
|||
</script> |
|||
|
|||
<template> |
|||
<h1>{{ msg }}</h1> |
|||
|
|||
<div class="card"> |
|||
<button type="button" @click="count++">count is {{ count }}</button> |
|||
<p> |
|||
Edit |
|||
<code>components/HelloWorld.vue</code> to test HMR |
|||
</p> |
|||
</div> |
|||
|
|||
<p> |
|||
Check out |
|||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank" |
|||
>create-vue</a |
|||
>, the official Vue + Vite starter |
|||
</p> |
|||
<p> |
|||
Install |
|||
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a> |
|||
in your IDE for a better DX |
|||
</p> |
|||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.read-the-docs { |
|||
color: #888; |
|||
} |
|||
</style> |
@ -1,5 +1,5 @@ |
|||
import { createApp } from 'vue' |
|||
import './style.css' |
|||
import App from './App.vue' |
|||
import WorldComponent from './WorldComponent.vue' |
|||
|
|||
createApp(App).mount('#app') |
|||
createApp(WorldComponent).mount('#app') |
|||
|
Loading…
Reference in new issue