将所有其他插件/扩展组织到 main.js [VueJs]答案

【问题标题】：Organizing all additional plugins/extensions into main.js [VueJs]将所有其他插件/扩展组织到 main.js [VueJs]
【发布时间】：2018-12-26 08:33:27
【问题描述】：

有什么方法可以将我的所有附加扩展（例如（bootstrap.css、vue-moment、vue-axios、bootstrap-vue 等））包含到 main.js 中，并将其注册为要使用的全局组件通过我的组件页面中的所有其他 .vue 文件？

由于我有很多页面可能需要使用 axios 和其他扩展，因此我不想在每个 .vue 页面中都包含此代码。

 import axios from "axios"

我尝试将所有导入包含到 main.js 中并添加了

 Vue.use()

但是，仍然需要在组件页面中包含一些扩展，例如 moment 或 axios 或 datetimepicker 才能正常工作。否则它会说它没有定义。

例如。

组件文件夹 - main.vue

 import axios from "axios"; <-- (I do not want to include this here)
 import moment from "moment"; <-- (I do not want to include this here)

Main.js

//I want all my extensions to be listed here and able to use throughout all of the components pages
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import moment from 'vue-moment'

Vue.use(axios, moment);  

new Vue({
   router,
   render: h => h(App)
}).$mount('#app')

谢谢！

【问题讨论】：

有 vue-axios 和 vue-moment 可以按您的预期工作，我知道这不是解决方案，但可以解决

标签： javascript webpack vuejs2

【解决方案1】：

通常，您可以将 Vue 实例的原型用于 JS 库，例如 moment 或 axios。

main.js:

import axios from 'axios'

Vue.prototype.$http = axios

Login.vue:

export default {
    mounted () {
        this.$http.get(...)
    }
}

BootstrapVue 提供了一个很好的documentation 解释如何注册组件和导入样式。

main.js:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue);

App.vue:

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

【讨论】：

是的，这就是我可以使用的答案。
-已删除评论-

【解决方案2】：

这篇文章解释得很好 https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/

对我来说，我决定采用这种方法。

main.js

import Vue from 'vue'
import VueAxios from 'vue-axios'
import axios from 'axios'

Vue.use(VueAxios,axios);

filename.vue - 这是我访问它的方式

//By adding "this" in front, it seems to be working fine. this.axios({...}}

【讨论】：