正確安裝自定義VueJs插件的方法

我創建了一個自定義插件，它使用vuex和vue-authenticate封裝了一堆認證功能。正確安裝自定義VueJs插件的方法

遇到的問題IM是找出正確的方式來加載和安裝模塊到VueJS，林不知道，如果我的WebPack或缺乏但vuejs知識到目前爲止，我有以下

/node_modules /插件/ 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

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 } 
})

到目前爲止，我可以導入插件並運行Vue.use（apiArchitect）的安裝鉤我可以在我的App.vue中訪問這個$ apiArchitect。

我遇到的問題是插件提供了一些存儲在$ apiArchitect.routes中的auth路由，這些路由需要與路由器提供的路由合併。如果我嘗試訪問main.js中的$ apiArchitect.routes，我會得到一個'undefined'錯誤，我只能在vue實例化後訪問它們。如果我真的在main.js中嘗試console.log apiArchitect，我所看到的只是一個包含安裝功能的對象，沒有我提供的插件，這使得我無法正確安裝它。

有沒有人知道我可以如何訪問apiArchitect。$ main.js中的路由屬性或更好的實現方式？

感謝

來源

2017-06-12 James Kirkby

可以動態地router.addRoutes()因爲2.2.x中添加路由

該參數必須是一個數組，其使用相同的路由配置格式和的路由構造器選項。

// your plugin 
 
const myPlugin = { 
 
    install: function(Vue, options) { 
 
    Vue.prototype.$myPlugin = { 
 
     routes: [{ 
 
     \t path: '/myplugin', component: options.myComponent 
 
     }] 
 
    } 
 
    } 
 
} 
 

 
// components 
 
const testComponent = { template: '<p>Component called by plugin route</p>' } 
 
const Home = { template: '<p>Default component</p>' } 
 

 
// router 
 
const router = new VueRouter({ 
 
    routes: [{ 
 
    path: '/', component: Home 
 
    }] 
 
}) 
 

 
Vue.use(VueRouter) 
 
Vue.use(myPlugin, { myComponent: testComponent }) 
 

 
new Vue({ 
 
    el: '#app', 
 
    router, 
 
    created() { 
 
    this.$router.addRoutes(this.$myPlugin.routes); // dinamically add routes 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script> 
 
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 
 

 
<div id="app"> 
 
    <button @click="$router.push('/')">Home</button> 
 
    <button @click="$router.push('/myplugin')">Custom</button> 
 
    <router-view></router-view> 
 
</div>

：

例如，可以在created鉤的根組件的使用addRoutes

來源

2017-06-13 09:21:26 wostex

正確安裝自定義VueJs插件的方法

回答

相關問題