chore: add styled-vue example (#4712)

This commit is contained in:
EGOIST 2019-01-09 00:32:51 +08:00 committed by Xin Du (Clark)
parent ecf76d91f1
commit 38e2ddf7fe
4 changed files with 56 additions and 0 deletions

View File

@ -0,0 +1,3 @@
# styled-vue Example
See https://github.com/egoist/styled-vue

View File

@ -0,0 +1,5 @@
module.exports = {
modules: [
'styled-vue/nuxt'
]
}

View File

@ -0,0 +1,15 @@
{
"name": "example-styled-vue",
"version": "1.0.0",
"dependencies": {
"nuxt-edge": "latest"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
},
"devDependencies": {
"styled-vue": "^0.1.3"
}
}

View File

@ -0,0 +1,33 @@
<template>
<div>
<h1>styled-vue</h1>
<a href="https://github.com/egoist/styled-vue" class="github">Check it out on GitHub.</a>
</div>
</template>
<script>
import { css } from 'styled-vue'
export default {
style: css`
h1 {
color: red;
font-size: ${vm => vm.fontSize}px;
}
.github {
color: blue;
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
`,
data() {
return {
fontSize: 60
}
}
}
</script>