Skip to content

Commit ddd1643

Browse files
AlanscutAlanscut
committed
add examples to npmignore
1 parent 08494af commit ddd1643

File tree

4 files changed

+170
-169
lines changed

4 files changed

+170
-169
lines changed

‎.npmignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
examples

‎examples/vue2/index.html‎

Lines changed: 60 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +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>
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 & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +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>
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 & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +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>
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>

0 commit comments

Comments
 (0)