VueJS 插件冲突
VueJS plugins conflict
我在由 Vue CLI 4 提供支持的 VueJS 应用程序中创建了两个插件,但是当我尝试在我的页面中使用它时,只有一个插件可以工作
| plugins
|-- axios.vue
|-- authentication.vue
axios.vue
import Vue from "vue";
Plugin.install = function(Vue) {
Vue.prototype.$myName = "Dean Armada";
};
Vue.use(Plugin);
export default Plugin;
authentication.vue
import Vue from "vue";
Plugin.install = function(Vue) {
Vue.prototype.$name = "Chris Guinto";
};
Vue.use(Plugin);
export default Plugin;
main.js
import axios from "./plugins/axios.js";
import authentication from "./plugins/authentication.js";
Vue.use(axios);
Vue.use(authentication);
instructions.vue
<template>
<div>
Hello World
</div>
</template>
<script>
export default {
created() {
console.log(this.$name);
console.log(this.$myName);
}
}
</script>
<style lang="scss" scoped>
</style>
注意
- 上面的输出只有 "Dean Armada" 而
console.log(this.$name)
是未定义的
- 但是如果我注释掉
Vue.use(axios)
,console.log(this.$name)
将起作用,所以输出将是 "Chris Guinto" 而另一个是未定义的,因为 axios
插件不是激活
那么我怎样才能让它们同时工作呢?
或许尝试用以下方法稍微简化一下?
// plugins/axios.js
export default {
install(Vue){
Vue.prototype.$myname = "Dean Armada";
}
}
// plugins/authentication.js
export default {
install(Vue){
Vue.prototype.$name = "Chris Guinto";
}
}
// main.js
import axios from "./plugins/axios.js";
import authentication from "./plugins/authentication.js";
Vue.use(axios);
Vue.use(authentication);
new Vue({
el: '#app',
render: h => h(App)
})
我在由 Vue CLI 4 提供支持的 VueJS 应用程序中创建了两个插件,但是当我尝试在我的页面中使用它时,只有一个插件可以工作
| plugins
|-- axios.vue
|-- authentication.vue
axios.vue
import Vue from "vue";
Plugin.install = function(Vue) {
Vue.prototype.$myName = "Dean Armada";
};
Vue.use(Plugin);
export default Plugin;
authentication.vue
import Vue from "vue";
Plugin.install = function(Vue) {
Vue.prototype.$name = "Chris Guinto";
};
Vue.use(Plugin);
export default Plugin;
main.js
import axios from "./plugins/axios.js";
import authentication from "./plugins/authentication.js";
Vue.use(axios);
Vue.use(authentication);
instructions.vue
<template>
<div>
Hello World
</div>
</template>
<script>
export default {
created() {
console.log(this.$name);
console.log(this.$myName);
}
}
</script>
<style lang="scss" scoped>
</style>
注意
- 上面的输出只有 "Dean Armada" 而
console.log(this.$name)
是未定义的 - 但是如果我注释掉
Vue.use(axios)
,console.log(this.$name)
将起作用,所以输出将是 "Chris Guinto" 而另一个是未定义的,因为axios
插件不是激活
那么我怎样才能让它们同时工作呢?
或许尝试用以下方法稍微简化一下?
// plugins/axios.js
export default {
install(Vue){
Vue.prototype.$myname = "Dean Armada";
}
}
// plugins/authentication.js
export default {
install(Vue){
Vue.prototype.$name = "Chris Guinto";
}
}
// main.js
import axios from "./plugins/axios.js";
import authentication from "./plugins/authentication.js";
Vue.use(axios);
Vue.use(authentication);
new Vue({
el: '#app',
render: h => h(App)
})