Vue.js ES6導入導出

Question

那麼我在使用babel導入ES6中的多個模塊時遇到了問題。我想我的結構在Vue.js的應用程序作爲模塊化組件（或精確的Angular2爲遵循功能結構）

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 

現在，我的問題是，我怎麼能導出和導入所有模塊完美的工作？

所以我們可以說爲moduleA路線我已經下面的代碼

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

並再次moduleB路線

//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' } 
] } 
]; 

然後，我怎麼可以導入和得到這個工作。請幫忙。

謝謝

Answer 1

你需要告訴你的模塊所在的根路由器和根vuex。

因此，捆綁的所有路由：

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

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

做同樣爲您vuex：現在

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

export default { moduleA, moduleB, }; 

，在全局vuex/：

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

import vuex from '../app'; 

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

而且，對於您的router/：

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

Vue.use(Router); 

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