安装自定义VueJs插件的正确方法
我正在创建一个自定义插件,它使用 vuex 和 vue-authenticate 封装了一堆身份验证功能.
Im creating a custom plugin that encapsulates a bunch of authentication functionality with vuex and vue-authenticate.
我遇到的问题是找出将模块加载和安装到 VueJS 的正确方法,我不确定是我的 webpack 或 vuejs 知识缺乏,但到目前为止我有以下内容
The problem im having is figuring out the correct way to load and install the module into VueJS, im not sure if its my webpack or vuejs knowledge that is lacking but so far I have the following
/node_modules/plugin/index.js
/node_modules/plugin/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import routes from './routes'
import store from './vuex/store'
import EventBus from './bus/eventBus'
import config from './config'
import ping from './vuex/modules/apiArchitect/ping/store'
import auth from './vuex/modules/apiArchitect/auth/store'
import user from './vuex/modules/apiArchitect/user/store'
Vue.use(Vuex)
Vue.use(EventBus)
const store = new Vuex.Store({
modules: {
ping,
user,
auth
},
strict: true
})
let apiArchitect = {}
apiArchitect.install = function (Vue, options) {
Vue.prototype.$apiArchitect = store,
Vue.prototype.$apiArchitect.$config = config
Vue.prototype.$apiArchitect.$routes = routes
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(apiArchitect)
}
}
export default apiArchitect
/src/main.js
到目前为止,我可以导入插件并使用 Vue.use(apiArchitect) 运行安装挂钩,我可以在 App.vue 中访问 this.$apiArchitect.
import Vue from 'vue'
import App from './App'
import router from './router'
import apiArchitect from 'vue-apiarchitect'
import addRouteGuards from 'vue-apiarchitect/src/addRouteGuards'
Vue.config.productionTip = false
Vue.config.env = process.env.NODE_ENV
Vue.use(router)
Vue.use(apiArchitect)
console.log(apiArchitect)
addRouteGuards(router)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
我遇到的问题是插件提供了一些存储在 $apiArchitect.routes 中的 auth 路由,这些路由需要与路由器提供的路由合并.如果我尝试在 main.js 中访问 $apiArchitect.routes,我会收到一个未定义"错误,我只能在 vue 实例化后才能访问它们.如果我真的在 main.js 中尝试 console.log apiArchitect,我看到的只是一个包含安装功能的对象,我没有提供任何插件,这让我相信它没有正确安装.
So far I am able to import the plugin and run the install hook with Vue.use(apiArchitect) I can access this.$apiArchitect in my App.vue.
有谁知道我如何访问 main.js 中的 apiArchitect.$routes 属性或实现此目的的更好方法?
The problem I have is that the plugin provides some auth routes stored in $apiArchitect.routes these routes need to be merged with the routes provided by router. If I try access $apiArchitect.routes in main.js I get an 'undefined' error I can only access them after vue has been instantiated. If I actually try console.log apiArchitect in main.js all I see is an object containing an install function none of the plugin i've provided which makes me belive its not installing correctly.
谢谢
从 2.2.x 开始,您可以使用 router.addRoutes()
动态添加路由.
参数必须是一个使用相同路由配置格式的数组路由构造函数选项.
You can add routes dynamically with router.addRoutes()
since 2.2.x.
例如,您可以在根组件的created
钩子中使用addRoutes
:
The argument must be an Array using the same route config format with the routes constructor option.