8000 chore: add vueuse · vueuse/vueuse-vue2-example@5aa42c2 · GitHub
[go: up one dir, main page]
Skip to content

Commit 5aa42c2

Browse files
antfuantfu
committed
chore: add vueuse
1 parent 92f9a38 commit 5aa42c2

File tree

8 files changed

+97
-103
lines changed

8 files changed

+97
-103
lines changed

‎README.md

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,24 @@
1-
# vueuse-vue2-example
1+
<h1 align='center'>Vue2 VueUse Example</h1>
22

3-
## Project setup
4-
```
5-
npm install
6-
```
3+
<p align='center'>
4+
<img src='./src/logo.svg' height='120'/>
5+
</p>
76

8-
### Compiles and hot-reloads for development
9-
```
10-
npm run serve
11-
```
127

13-
### Compiles and minifies for production
14-
```
15-
npm run build
16-
```
8+
Example for [Vue 2](https://vuejs.org/) + [VueUse](https://github.com/antfu/vueuse) with [Vue CLI](https://cli.vuejs.org/)
179

18-
### Customize configuration
19-
See [Configuration Reference](https://cli.vuejs.org/config/).
10+
🌐 [Live Demo](https://vueuse-vue2-example.netlify.app/)
11+
12+
📦 [Vue3 Webpack Example](https://github.com/antfu/vueuse-next-example)
13+
📦 [Vite Example](https://github.com/antfu/vite-vueuse-starter)
14+
15+
## Installation
16+
17+
1. Clone this repository
18+
2. `npm i`
19+
3. `npm serve`
20+
4. open http://localhost:8080 in your browser
21+
22+
## License
23+
24+
[MIT](http://opensource.org/licenses/MIT)

‎package-lock.json

Lines changed: 28 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
"build": "vue-cli-service build"
88
},
99
"dependencies": {
10+
"@vue/composition-api": "^1.0.0-beta.1",
11+
"@vueuse/core": "^4.0.0-alpha.0",
1012
"vue": "^2.6.11"
1113
},
1214
"devDependencies": {

‎src/App.vue

Lines changed: 46 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,59 @@
11
<template>
22
<div id="app">
3-
<img alt="Vue logo" src="./assets/logo.png">
4-
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
3+
<img src="./logo.svg" />
4+
<h1>Hello <a href='https://github.com/vuejs/vue-next' target='__blank'>Vue 2</a> and <a href='https://github.com/antfu/vueuse' target='__blank'>VueUse</a>!</h1>
5+
6+
<h3>Mouse: {{x}} x {{y}}</h3>
7+
<h3>
8+
Counter: {{count}}
9+
<a @click='inc()' style='margin-right:10px'>+</a>
10+
<a @click='dec()'>-</a>
11+
</h3>
12+
13+
<br/><br/>
14+
<p><a href='https://github.com/antfu/vueuse-vue2-example' target='__blank'>Source</a></p>
15+
<p><a href='https://vueuse-next-example.netlify.app/' target='__blank'>Vue 3 Demo</a></p>
16+
<p><a href='https://vite-vueuse-starter.netlify.app/' target='__blank'>Vite Starter</a></p>
517
</div>
618
</template>
719

8-
<script lang="ts">
9-
import Vue from 'vue';
10-
import HelloWorld from './components/HelloWorld.vue';
20+
<script>
21+
import { useMouse, useCounter } from '@vueuse/core'
22+
23+
export default {
24+
setup() {
25+
const { x, y } = useMouse()
26+
const { count, inc, dec } = useCounter()
1127
12-
export default Vue.extend({
13-
name: 'App',
14-
components: {
15-
HelloWorld
28+
return {
29+
x,
30+
y,
31+
count,
32+
inc,
33+
dec,
34+
}
1635
}
17-
});
36+
}
1837
</script>
1938

20-
<style>
39+
<style scoped>
40+
@import url('https://fonts.googleapis.com/css?family=Noto+Serif&display=swap');
41+
42+
html, body, h1, h2, h3, p {
43+
font-family: 'Noto Serif', serif;
44+
user-select: none;
45+
}
46+
2147
#app {
22-
font-family: Avenir, Helvetica, Arial, sans-serif;
23-
-webkit-font-smoothing: antialiased;
24-
-moz-osx-font-smoothing: grayscale;
2548
text-align: center;
26-
color: #2c3e50;
27-
margin-top: 60px;
49+
color: rgba(0,0,0,0.4);
50+
}
51+
img {
52+
width: 500px;
53+
}
54+
a {
55+
color: #41b883;
56+
text-decoration: none;
57+
cursor: pointer;
2858
}
2959
</style>

‎src/assets/logo.png

-6.69 KB
Binary file not shown.

‎src/components/HelloWorld.vue

Lines changed: 0 additions & 59 deletions
This file was deleted.

‎src/logo.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/shims-tsx.d.ts

Lines changed: 0 additions & 13 deletions
This file was deleted.

0 commit comments

Comments
 (0)
0