Vue.js ES6インポートエクスポート

Question

まあ、私はES6で複数のモジュールをインポートする際に問題を抱えています。私は、モジュラーコンポーネント（または機能のためにAngular2に次のpreciseの構造）としてVue.jsで私のアプリ

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 

は今、私の質問は、私はすべてのモジュールをエクスポートしてインポートすることができますどのように、ある構造をしようとしています完璧に働く？

それでは、どのように私はインポートし、この仕事を得ることができ、私はその後、次のコード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' } 
] } 
]; 

ため

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

そして再びをしたのは、moduleAルートにしましょう。助けてください。

おかげ

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