Skip to content

Commit 5d6ce10

Browse files
xiaoluobodingxiaoluoboding
committed
docs: update vue2-demo
1 parent e327300 commit 5d6ce10

19 files changed

+2937
-3556
lines changed

‎examples/vue2-demo/README.md

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
# vue2-demo
2-
3-
> Generate with @vue/cli > 4.5.0, use 2.x version.
1+
# vue2-ts
42

53
## Project setup
64
```

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

-5
This file was deleted.

‎examples/vue2-demo/package.json

+16-10
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,32 @@
88
"lint": "vue-cli-service lint"
99
},
1010
"dependencies": {
11-
"@vue/composition-api": "^1.0.0-rc.11",
12-
"@vueblocks/vue-use-core": "^0.2.10",
13-
"@vueblocks/vue-use-vuex": "^0.2.10",
14-
"core-js": "^3.6.5",
11+
"@vue/composition-api": "^1.2.4",
12+
"@vueblocks/vue-use-core": "^0.2.11",
13+
"@vueblocks/vue-use-vuex": "^0.2.11",
1514
"vue": "^2.6.11",
16-
"vue-demi": "^0.9.1",
17-
"vuex": "^3.6.2"
15+
"vue-demi": "0.10.0",
16+
"vuex": "^3.4.0"
1817
},
1918
"devDependencies": {
20-
"@vue/cli-plugin-babel": "~4.5.0",
19+
"@typescript-eslint/eslint-plugin": "^4.18.0",
20+
"@typescript-eslint/parser": "^4.18.0",
2121
"@vue/cli-plugin-eslint": "~4.5.0",
22+
"@vue/cli-plugin-typescript": "~4.5.0",
2223
"@vue/cli-plugin-vuex": "~4.5.0",
2324
"@vue/cli-service": "~4.5.0",
2425
"@vue/eslint-config-standard": "^5.1.2",
25-
"babel-eslint": "^10.1.0",
26+
"@vue/eslint-config-typescript": "^7.0.0",
2627
"eslint": "^6.7.2",
2728
"eslint-plugin-import": "^2.20.2",
2829
"eslint-plugin-node": "^11.1.0",
2930
"eslint-plugin-promise": "^4.2.1",
3031
"eslint-plugin-standard": "^4.0.0",
3132
"eslint-plugin-vue": "^6.2.2",
33+
"sass": "^1.26.5",
34+
"sass-loader": "^8.0.2",
35+
"tslib": "^2.3.1",
36+
"typescript": "^4.4.4",
3237
"vue-template-compiler": "^2.6.11"
3338
},
3439
"eslintConfig": {
@@ -38,10 +43,11 @@
3843
},
3944
"extends": [
4045
"plugin:vue/essential",
41-
"@vue/standard"
46+
"@vue/standard",
47+
"@vue/typescript/recommended"
4248
],
4349
"parserOptions": {
44-
"parser": "babel-eslint"
50+
"ecmaVersion": 2020
4551
},
4652
"rules": {}
4753
},

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

+1-1
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/vue2-demo/src/App.vue

+9-8
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
11
<template>
22
<div id="app">
3-
<hello-world />
3+
<HelloWorld />
44
<Counter />
55
</div>
66
</template>
77

8-
<script>
9-
import Counter from './components/Counter.vue'
8+
<script lang="ts">
9+
import Vue from 'vue'
1010
import HelloWorld from './components/HelloWorld.vue'
11+
import Counter from './components/Counter.vue'
1112
12-
export default {
13+
export default Vue.extend({
1314
name: 'App',
1415
components: {
15-
Counter,
16-
HelloWorld
16+
HelloWorld,
17+
Counter
1718
}
18-
}
19+
})
1920
</script>
2021

21-
<style>
22+
<style lang="scss">
2223
#app {
2324
font-family: Avenir, Helvetica, Arial, sans-serif;
2425
-webkit-font-smoothing: antialiased;

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

+5-4
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>
@@ -12,10 +12,11 @@
1212
</div>
1313
</template>
1414

15-
<script>
15+
<script lang="ts">
16+
import { defineComponent } from 'vue-demi'
1617
import { useVuex, useStore } from '@vueblocks/vue-use-vuex'
1718
18-
export default {
19+
export default defineComponent({
1920
// mounted () {
2021
// console.group('--- mounted ---')
2122
// console.log(this.$store)
@@ -70,5 +71,5 @@ export default {
7071
])
7172
}
7273
}
73-
}
74+
})
7475
</script>

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

+34-12
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,49 @@
11
<template>
2-
<div class="main">
2+
<div class="hello">
33
<input type="text" v-model="inputVal" />
4-
<pre><code>{{inputVal}}</code></pre>
4+
<button @click="copy">Copy</button>
5+
<button @click="clear">Clear</button>
6+
7+
<h1>{{ inputVal }}</h1>
8+
59
</div>
610
</template>
711

8-
<script>
9-
import { useDebouncedRef } from '@vueblocks/vue-use-core'
10-
import { useStore } from '../utils'
12+
<script lang="ts">
13+
import { defineComponent } from 'vue-demi'
14+
import { useClipboard, useDebouncedRef, useInstance } from '@vueblocks/vue-use-core'
1115
12-
export default {
16+
export default defineComponent({
1317
name: 'HelloWorld',
18+
1419
setup () {
15-
const inputVal = useDebouncedRef('')
16-
console.log(useStore())
20+
console.log(useInstance())
21+
const inputVal = useDebouncedRef('Hello World!')
22+
const { copy, clear } = useClipboard({ source: inputVal.value })
1723
1824
return {
19-
inputVal
25+
inputVal,
26+
copy,
27+
clear
2028
}
2129
}
22-
}
30+
})
2331
</script>
2432

25-
<style>
26-
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+
}
2749
</style>

‎examples/vue2-demo/src/main.js renamed to ‎examples/vue2-demo/src/main.ts

File renamed without changes.

‎examples/vue2-demo/src/shims-tsx.d.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Vue, { VNode } from 'vue'
2+
3+
declare global {
4+
namespace JSX {
5+
// tslint:disable no-empty-interface
6+
interface Element extends VNode {}
7+
// tslint:disable no-empty-interface
8+
interface ElementClass extends Vue {}
9+
interface IntrinsicElements {
10+
[elem: string]: any
11+
}
12+
}
13+
}

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

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module '*.vue' {
2+
import Vue from 'vue'
3+
export default Vue
4+
}

‎examples/vue2-demo/src/store/actions.js renamed to ‎examples/vue2-demo/src/store/actions.ts

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
const makeAction = type => {
2-
return ({ commit }, ...args) => commit(type, ...args)
1+
const makeAction = (type: string) => {
2+
return (payload: any, ...args: any) => {
3+
const { commit } = payload
4+
return commit(type, ...args)
5+
}
36
}
47

5-
export const makeActions = (types = {}) => {
8+
export const makeActions = (types: any = {}) => {
69
const actions = {}
710

811
for (const type of Object.keys(types)) {

‎examples/vue2-demo/src/store/index.js renamed to ‎examples/vue2-demo/src/store/index.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,17 @@ const state = {
1111
theme: 'light'
1212
}
1313

14+
type RootState = typeof state
15+
1416
const getters = {
15-
isDarkmode: state => state.theme === 'dark'
17+
isDarkmode: (state: RootState) => state.theme === 'dark'
1618
}
1719

1820
const mutations = {
19-
[types.SET_STATE] (state, payload) {
21+
[types.SET_STATE] (state: RootState, payload: any) {
2022
Object.assign(state, payload)
2123
},
22-
[types.SET_THEME] (state, payload) {
24+
[types.SET_THEME] (state: RootState, payload: any) {
2325
state.theme = payload
2426
}
2527
}

‎examples/vue2-demo/src/store/modules/counter.js renamed to ‎examples/vue2-demo/src/store/modules/counter.ts

+8-6
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,18 @@ const state = {
77
count: 0
88
}
99

10+
type State = typeof state
11+
1012
// mutations are operations that actually mutate the state.
1113
// each mutation handler gets the entire state tree as the
1214
// first argument, followed by additional payload arguments.
1315
// mutations must be synchronous and can be recorded by plugins
1416
// for debugging purposes.
1517
const mutations = {
16-
[counter.INCREMENT] (state) {
18+
[counter.INCREMENT] (state: State): void {
1719
state.count++
1820
},
19-
[counter.DECREMENT] (state) {
21+
[counter.DECREMENT] (state: State): void {
2022
state.count--
2123
}
2224
}
@@ -28,24 +30,24 @@ const actions = {
2830
increment: counter.INCREMENT,
2931
decrement: counter.DECREMENT
3032
}),
31-
incrementIfOdd ({ commit, state }) {
33+
incrementIfOdd ({ commit, state }: any): void {
3234
if ((state.count + 1) % 2 === 0) {
3335
commit(counter.INCREMENT)
3436
}
3537
},
36-
incrementAsync ({ commit }) {
38+
incrementAsync ({ commit, state }: any): Promise<number> {
3739
return new Promise((resolve, reject) => {
3840
setTimeout(() => {
3941
commit(counter.INCREMENT)
40-
resolve()
42+
resolve(state.count)
4143
}, 1000)
4244
})
4345
}
4446
}
4547

4648
// getters are functions.
4749
const getters = {
48-
evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
50+
evenOrOdd: (state: State) => state.count % 2 === 0 ? 'even' : 'odd'
4951
}
5052

5153
// nested modules

‎examples/vue2-demo/src/store/modules/index.js

-9
This file was deleted.

‎examples/vue2-demo/src/store/modules/index.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const files = require.context('.', false, /\.ts$/)
2+
const modules = {} as any
3+
4+
files.keys().forEach((key) => {
5+
if (key === './index.ts') return
6+
modules[key.replace(/(\.\/|\.ts)/g, '')] = files(key).default
7+
})
8+
9+
export default modules

‎examples/vue2-demo/src/store/mutation-types.js renamed to ‎examples/vue2-demo/src/store/mutation-types.ts

File renamed without changes.

‎examples/vue2-demo/src/utils/index.js

-15
This file was deleted.

‎examples/vue2-demo/tsconfig.json

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"module": "esnext",
5+
"strict": true,
6+
"jsx": "preserve",
7+
"importHelpers": true,
8+
"moduleResolution": "node",
9+
"skipLibCheck": true,
10+
"esModuleInterop": true,
11+
"allowSyntheticDefaultImports": true,
12+
"sourceMap": true,
13+
"baseUrl": ".",
14+
"types": [
15+
"webpack-env"
16+
],
17+
"paths": {
18+
"@/*": [
19+
"src/*"
20+
]
21+
},
22+
"lib": [
23+
"esnext",
24+
"dom",
25+
"dom.iterable",
26+
"scripthost"
27+
]
28+
},
29+
"include": [
30+
"src/**/*.ts",
31+
"src/**/*.tsx",
32+
"src/**/*.vue",
33+
"tests/**/*.ts",
34+
"tests/**/*.tsx"
35+
],
36+
"exclude": [
37+
"node_modules"
38+
]
39+
}

0 commit comments

Comments
 (0)