Skip to content

Commit 08494af

Browse files
AlanscutAlanscut
committed
add examples for vue-axios
1 parent 3d50148 commit 08494af

File tree

5 files changed

+189
-1
lines changed

5 files changed

+189
-1
lines changed

‎examples/server.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const express = require('express')
2+
3+
const app = express()
4+
5+
const cors = {
6+
'Access-Control-Allow-Origin': '*',
7+
'Access-Control-Allow-Credentials': true,
8+
'Access-Control-Allow-Methods': 'GET',
9+
'Access-Control-Allow-Headers': 'Content-Type'
10+
}
11+
12+
app.get('/greet', function (req, res) {
13+
res.set(cors)
14+
res.send("<h1>Hello, Vue-Axios!</h1>")
15+
})
16+
17+
app.listen(3000, () => console.log('Example app listening on port 3000!'))

‎examples/vue2/index.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vue-Axios in Vue 2</title>
8+
</head>
9+
10+
<body>
11+
<div id="app">
12+
<button @click="reset">reset msg</button>
13+
<button @click="getMsg1">get msg by this.axios</button>
14+
<button @click="getMsg2">get msg by this.$http</button>
15+
<button @click="getMsg3">get msg by Vue.axios</button>
16+
<button @click="getMsg4">get msg by Vue.$http</button>
17+
<div v-html="msg"></div>
18+
</div>
19+
20+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
21+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
22+
<script src="../../dist/vue-axios.min.js"></script>
23+
24+
<script type="module">
25+
new Vue({
26+
el: '#app',
27+
data() {
28+
return {
29+
msg: 'Hello, World!',
30+
}
31+
},
32+
methods: {
33+
reset() {
34+
this.msg = 'Hello, World!'
35+
},
36+
getMsg1() {
37+
this.axios
38+
.get('http://localhost:3000/greet')
39+
.then((res) => (this.msg = res.data))
40+
},
41+
getMsg2() {
42+
this.$http
43+
.get('http://localhost:3000/greet')
44+
.then((res) => (this.msg = res.data))
45+
},
46+
getMsg3() {
47+
Vue.axios
48+
.get('http://localhost:3000/greet')
49+
.then((res) => (this.msg = res.data))
50+
},
51+
getMsg4() {
52+
Vue.$http
53+
.get('http://localhost:3000/greet')
54+
.then((res) => (this.msg = res.data))
55+
},
56+
},
57+
}).$mount('#app')
58+
</script>
59+
</body>
60+
</html>

‎examples/vue3/classic/index.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vue-Axios in Vue 3</title>
8+
</head>
9+
10+
<body>
11+
<div id="app"></div>
12+
13+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.min.js"></script>
14+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
15+
<script src="../../../dist/vue-axios.min.js"></script>
16+
17+
<script type="text/javascript">
18+
const app = Vue.createApp({
19+
template: `
20+
<button @click="reset">reset msg</button>
21+
<button @click="getMsg1">get msg by this.axios</button>
22+
<button @click="getMsg2">get msg by this.$http</button>
23+
<div v-html="msg"></div>
24+
`,
25+
data() {
26+
return {
27+
msg: 'Hello, World!',
28+
}
29+
},
30+
methods: {
31+
reset() {
32+
this.msg = 'Hello, World!'
33+
},
34+
getMsg1() {
35+
this.axios
36+
.get('http://localhost:3000/greet')
37+
.then((res) => (this.msg = res.data))
38+
},
39+
getMsg2() {
40+
this.$http
41+
.get('http://localhost:3000/greet')
42+
.then((res) => (this.msg = res.data))
43+
}
44+
}
45+
})
46+
app.use(VueAxios, axios)
47+
app.mount('#app')
48+
</script>
49+
</body>
50+
</html>

‎examples/vue3/composition/index.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vue-Axios in Vue 3 with Composition API</title>
8+
</head>
9+
10+
<body>
11+
<div id="app"></div>
12+
13+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.min.js"></script>
14+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
15+
<script src="../../../dist/vue-axios.min.js"></script>
16+
17+
<script type="text/javascript">
18+
const { ref, inject, provide } = Vue
19+
const app = Vue.createApp({
20+
template: `
21+
<button @click="reset">reset msg</button>
22+
<button @click="getMsg1">get msg by injectAxios</button>
23+
<button @click="getMsg2">get msg by inject$http</button>
24+
<div v-html="msg"></div>
25+
`,
26+
setup() {
27+
let msg = ref('Hello, Composition API!')
28+
const injectAxios = inject('axios')
29+
const inject$http = inject('$http')
30+
31+
const getMsg1 = () => {
32+
injectAxios
33+
.get('http://localhost:3000/greet')
34+
.then((res) => (msg.value = res.data))
35+
}
36+
const getMsg2 = () => {
37+
inject$http
38+
.get('http://localhost:3000/greet')
39+
.then((res) => (msg.value = res.data))
40+
}
41+
const reset = () => {
42+
msg.value = 'Hello, Composition API!'
43+
}
44+
45+
return { msg, getMsg1, getMsg2, reset }
46+
},
47+
methods: {
48+
reset() {
49+
this.msg = 'Hello, World!'
50+
},
51+
},
52+
})
53+
app.use(VueAxios, axios)
54+
app.provide('axios', app.config.globalProperties.axios) // provide 'axios'
55+
app.provide('$http', app.config.globalProperties.$http) // provide '$http'
56+
app.mount('#app')
57+
</script>
58+
</body>
59+
</html>

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"main": "dist/vue-axios.es5.js",
66
"types": "index.d.ts",
77
"scripts": {
8-
"build": "gulp"
8+
"build": "gulp",
9+
"examples": "node examples/server.js"
910
},
1011
"typing": "index.d.ts",
1112
"files": [
@@ -34,6 +35,7 @@
3435
"@rollup/plugin-commonjs": "^15.1.0",
3536
"@rollup/plugin-node-resolve": "^9.0.0",
3637
"axios": "^0.21.1",
38+
"express": "^4.17.1",
3739
"gulp": "^4.0.2",
3840
"gulp-clean": "^0.4.0",
3941
"gulp-file": "^0.4.0",

0 commit comments

Comments
 (0)