Skip to content

Commit 5ef17df

Browse files
xiaoluobodingxiaoluoboding
committed
docs: update vue3-demo
1 parent 5d6ce10 commit 5ef17df

File tree

15 files changed

+2235
-3198
lines changed

15 files changed

+2235
-3198
lines changed

‎examples/vue3-demo/README.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
# vue3-demo
1+
# vue3-ts
22

3-
> Generate with @vue/cli > 4.5.0, use 3.x version.
43
## Project setup
54
```
65
yarn install

‎examples/vue3-demo/babel.config.js

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

‎examples/vue3-demo/package.json

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "vue3-demo",
2+
"name": "vue3-ts",
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {
@@ -8,30 +8,30 @@
88
"lint": "vue-cli-service lint"
99
},
1010
"dependencies": {
11-
"@vueblocks/vue-use-core": "^0.2.1",
12-
"@vueblocks/vue-use-vuex": "^0.2.0",
13-
"core-js": "^3.6.5",
11+
"@vueblocks/vue-use-core": "^0.2.11",
12+
"@vueblocks/vue-use-vuex": "^0.2.11",
1413
"vue": "^3.0.0",
15-
"vuex": "^4.0.0-0"
14+
"vuex": "^4.0.2"
1615
},
1716
"devDependencies": {
18-
"@typescript-eslint/eslint-plugin": "^2.33.0",
19-
"@typescript-eslint/parser": "^2.33.0",
20-
"@vue/cli-plugin-babel": "~4.5.0",
17+
"@typescript-eslint/eslint-plugin": "^4.18.0",
18+
"@typescript-eslint/parser": "^4.18.0",
2119
"@vue/cli-plugin-eslint": "~4.5.0",
2220
"@vue/cli-plugin-typescript": "~4.5.0",
2321
"@vue/cli-plugin-vuex": "~4.5.0",
2422
"@vue/cli-service": "~4.5.0",
2523
"@vue/compiler-sfc": "^3.0.0",
2624
"@vue/eslint-config-standard": "^5.1.2",
27-
"@vue/eslint-config-typescript": "^5.0.2",
25+
"@vue/eslint-config-typescript": "^7.0.0",
2826
"eslint": "^6.7.2",
2927
"eslint-plugin-import": "^2.20.2",
3028
"eslint-plugin-node": "^11.1.0",
3129
"eslint-plugin-promise": "^4.2.1",
3230
"eslint-plugin-standard": "^4.0.0",
33-
"eslint-plugin-vue": "^7.0.0-0",
34-
"typescript": "~3.9.3"
31+
"eslint-plugin-vue": "^7.0.0",
32+
"sass": "^1.26.5",
33+
"sass-loader": "^8.0.2",
34+
"typescript": "~4.1.5"
3535
},
3636
"eslintConfig": {
3737
"root": true,
@@ -46,9 +46,7 @@
4646
"parserOptions": {
4747
"ecmaVersion": 2020
4848
},
49-
"rules": {
50-
"@typescript-eslint/no-explicit-any": 0
51-
}
49+
"rules": {}
5250
},
5351
"browserslist": [
5452
"> 1%",

‎examples/vue3-demo/public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="">
33
<head>
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">

‎examples/vue3-demo/src/App.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
<template>
2-
<hello-world />
2+
<HelloWorld />
33
<Counter />
44
</template>
55

66
<script lang="ts">
77
import { defineComponent } from 'vue'
8-
import Counter from './components/Counter.vue'
98
import HelloWorld from './components/HelloWorld.vue'
9+
import Counter from './components/Counter.vue'
1010
1111
export default defineComponent({
1212
name: 'App',
1313
components: {
14-
Counter,
15-
HelloWorld
14+
HelloWorld,
15+
Counter
1616
}
1717
})
1818
</script>
1919

20-
<style>
20+
<style lang="scss">
2121
#app {
2222
font-family: Avenir, Helvetica, Arial, sans-serif;
2323
-webkit-font-smoothing: antialiased;

‎examples/vue3-demo/src/components/Counter.vue

Lines changed: 43 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div id="app">
2+
<div id="counter">
33
Clicked: {{ count }} times, count is {{ evenOrOdd }}.
44
<br>
55
<button @click="increment">+</button>
@@ -14,20 +14,55 @@
1414

1515
<script lang="ts">
1616
import { defineComponent } from 'vue'
17-
import { useVuex, useStore } from '@vueblocks/vue-use-vuex'
17+
import { useStore } from 'vuex'
18+
import { useVuex } from '@vueblocks/vue-use-vuex'
1819
1920
export default defineComponent({
21+
// mounted () {
22+
// console.group('--- mounted ---')
23+
// console.log(this.$store)
24+
// console.log(Object.keys(this.$store.state))
25+
// console.log(Object.keys(this.$store.getters))
26+
// console.log(Object.keys(this.$store._mutations))
27+
// console.log(Object.keys(this.$store._actions))
28+
// console.groupEnd()
29+
// },
2030
setup () {
2131
const store = useStore()
22-
// const { useGetters } = useVuex()
23-
const { useGetters, useState, useActions } = useVuex('counter')
2432
console.log(store)
33+
const { useState, useGetters, useActions } = useVuex('counter', store)
2534
2635
return {
27-
// count: computed(() => store.state.counter.count),
28-
...useGetters(['evenOrOdd']),
29-
...useState({
30-
count: (state: any) => state.count
36+
// ...useGetters([
37+
// 'isDarkmode'
38+
// ]),
39+
// ...useGetters('counter', [
40+
// 'evenOrOdd'
41+
// ]),
42+
// ...useGetters({
43+
// isDark: 'isDarkmode'
44+
// }),
45+
// ...useGetters('counter', {
46+
// evenOrOdd1: 'evenOrOdd'
47+
// }),
48+
// ...useActions('counter', [
49+
// 'increment',
50+
// 'decrement',
51+
// 'incrementIfOdd',
52+
// 'incrementAsync'
53+
// ])
54+
...useState(['count']),
55+
...useGetters([
56+
'isDarkmode'
57+
]),
58+
...useGetters([
59+
'evenOrOdd'
60+
]),
61+
...useGetters({
62+
isDark: 'isDarkmode'
63+
}),
64+
...useGetters({
65+
evenOrOdd1: 'evenOrOdd'
3166
}),
3267
...useActions([
3368
'increment',

‎examples/vue3-demo/src/components/HelloWorld.vue

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,49 @@
11
<template>
2-
<div class="main">
2+
<div class="hello">
33
<input type="text" v-model="inputVal" />
4+
<button @click="copy">Copy</button>
5+
<button @click="clear">Clear</button>
6+
7+
<h1>{{ inputVal }}</h1>
8+
49
</div>
510
</template>
611

712
<script lang="ts">
813
import { defineComponent } from 'vue'
9-
10-
import { useDebouncedRef } from '@vueblocks/vue-use-core'
14+
import { useClipboard, useDebouncedRef, useInstance } from '@vueblocks/vue-use-core'
1115
1216
export default defineComponent({
1317
name: 'HelloWorld',
18+
1419
setup () {
15-
const inputVal = useDebouncedRef('')
20+
console.log(useInstance())
21+
const inputVal = useDebouncedRef('Hello World!')
22+
const { copy, clear } = useClipboard({ source: inputVal.value })
1623
1724
return {
18-
inputVal
25+
inputVal,
26+
copy,
27+
clear
1928
}
2029
}
2130
})
2231
</script>
2332

24-
<style>
25-
33+
<!-- Add "scoped" attribute to limit CSS to this component only -->
34+
<style scoped lang="scss">
35+
h3 {
36+
margin: 40px 0 0;
37+
}
38+
ul {
39+
list-style-type: none;
40+
padding: 0;
41+
}
42+
li {
43+
display: inline-block;
44+
margin: 0 10px;
45+
}
46+
a {
47+
color: #42b983;
48+
}
2649
</style>

‎examples/vue3-demo/src/shims-vue.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable */
12
declare module '*.vue' {
23
import type { DefineComponent } from 'vue'
34
const component: DefineComponent<{}, {}, any>

‎examples/vue3-demo/src/shims-vuex.d.ts

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

‎examples/vue3-demo/src/store/actions.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { Commit } from 'vuex'
2-
31
const makeAction = (type: string) => {
4-
return ({ commit }: { commit: Commit }, ...args: Array<string>) => commit(type, ...args)
2+
return (payload: any, ...args: any) => {
3+
const { commit } = payload
4+
return commit(type, ...args)
5+
}
56
}
67

78
export const makeActions = (types: any = {}) => {

0 commit comments

Comments
 (0)