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，以使其正常工作。否则它会说它没有定义。

例如。

Components文件夹-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

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

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'

Answer 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({...}}

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

2 个答案: