Skip to content

Commit 2d3c010

Browse files
imcvampireimcvampire
authored
Merge pull request #95 from Alanscut/build
build with umd format then cnd could be applied with vue 3
2 parents 0c5a6c4 + ddd1643 commit 2d3c010

File tree

8 files changed

+199
-12
lines changed

8 files changed

+199
-12
lines changed

‎.npmignore‎

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

‎Gulpfile.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ const plumber = require('gulp-plumber');
44
const file = require('gulp-file');
55
const filter = require('gulp-filter');
66
const merge = require('merge-stream');
7-
const sourcemaps = require('gulp-sourcemaps');
87
const uglify = require('gulp-uglify');
98
const clean = require('gulp-clean');
109
const commonjs = require('@rollup/plugin-commonjs')
@@ -23,7 +22,8 @@ const buildPath = 'dist/';
2322
*/
2423
function bundleCommonJs(bundle) {
2524
return bundle.generate({
26-
format: 'commonjs',
25+
format: 'umd',
26+
name: 'VueAxios'
2727
});
2828
}
2929

@@ -53,12 +53,10 @@ gulp.task('build', async function () {
5353
const data = ['vue-axios.es5.js', 'vue-axios.min.js'];
5454
const streams = data.map((name) => {
5555
return file(name, generatedBundle.output.map(o => o.code).join(" "), { src: true })
56-
.pipe(plumber())
57-
// .pipe(sourcemaps.init())
58-
.pipe(f)
59-
.pipe(uglify())
60-
// .pipe(sourcemaps.write('./'))
61-
.pipe(gulp.dest(buildPath));
56+
.pipe(plumber())
57+
.pipe(f)
58+
.pipe(uglify())
59+
.pipe(gulp.dest(buildPath));
6260
});
6361

6462
return merge(streams);

‎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",

‎src/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import semver from 'semver';
22

3-
(function () {
43
/**
54
* Install plugin
65
* @param app
@@ -52,8 +51,9 @@ function plugin(app, axios) {
5251
if (typeof exports == "object") {
5352
module.exports = plugin;
5453
} else if (typeof define == "function" && define.amd) {
55-
define([], function(){ return plugin });
54+
define([], function () { return plugin });
5655
} else if (window.Vue && window.axios && window.Vue.use) { // Vue.use is only available in VueJS 2.0
5756
Vue.use(plugin, window.axios);
5857
}
59-
})();
58+
59+
export default plugin;

0 commit comments

Comments
 (0)