Vue.js ES6 Import Export

Question

Nun, ich habe ein Problem mit dem Importieren mehrerer Module in ES6, mit Babel. Ich versuche Struktur meine app in Vue.js als modulare Komponenten (oder die Struktur in eine präzise, ​​die für Funktionen in Angular2 folgt)

app/ 
    moduleA/ 
    components/ 
    vuex/ 
    index.js 
    routes.js 
    moduleB/ 
    components/ 
    vuex/ 
    index.js 
    routes.js 
    index.js 
    routers.js 
    vuex.js 
    components.js 
router/ 
vuex/ 
components/ -> shared 
main.js 

Nun, meine Frage ist, wie kann ich exportieren und importieren alle Module perfekt arbeiten?

Also lassen Sie uns für die moduleA Routen sagen, dass ich den folgenden Code

//moduleA/routes.js 
export const routes = [ 
{ path: '', name: 'home', components: { 
    default: Home, 
    'header-top': Header 
} } 
]; 

Und wieder für moduleB Routen

//moduleA/routes.js 
export const routes = [ 
{ path: '/user', components: { 
    default: User, 
    'header-bottom': Header 
}, children: [ 
    { path: '', component: UserStart }, 
    { path: ':id', component: UserDetail }, 
    { path: ':id/edit', component: UserEdit, name: 'userEdit' } 
] } 
]; 

dann haben, wie kann ich diese Arbeit zu importieren und erhalten. Bitte helfen Sie.

Dank

Answer 1

Sie werden werden, um die Root-Router und Wurzel vuex wo Ihre Module befindet sich sagen müssen.

So bündeln alle Ihre Routen:

import { routes as moduleA } from './moduleA'; 
import { routes as moduleB } from './moduleB'; 

export default [ ...moduleA, ...moduleB, ]; 

das gleiche für Ihre vuex Sie:

import { vuex from moduleA } from './moduleA'; 
import { vuex as moduleB } from './moduleB'; 

export default { moduleA, moduleB, }; 

nun in Ihrem globalen vuex/:

import Vue from 'vue'; 
import Vuex from 'vuex'; 

import vuex from '../app'; 

export default new Vuex.Store({ 
    modules: vuex, 
}); 

Und für Ihre router/:

import Vue from 'vue'; 
import Router from 'vue-router'; 
import { routers } from '../app'; 

Vue.use(Router); 

export default new Router({ 
    routes: routes, 
});