Организация всех дополнительных плагинов / расширений в main.js [VueJs]

Question

Можно ли как-нибудь включить все мои дополнительные расширения, такие как (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')

Спасибо!

Answer 1

Эта статья объясняет это очень хорошо 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({...}}

Answer 2

Обычно вы можете использовать прототип вашего экземпляра Vue для библиотек JS, таких как moment или axios.

main.js:

import axios from 'axios'

Vue.prototype.$http = axios

Login.vue:

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

---

BootstrapVue предоставляет очень хорошую документацию с пояснениями о том, как зарегистрировать компоненты и импортировать стили.

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'