Vue.js ES6导入导出

Question

Well I'm facing a problem with importing multiple modules in ES6, using babel. I'm trying structure my app in Vue.js as a modular components (or in precise the structure that follows in Angular2 for features)

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

Now, my question is, how can I export and import all modules to work perfectly?

So let's say for the moduleA routes I've the following code

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

And again for moduleB routes

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

Then, how can I import and get this work. Please help.

Thanks

Answer 1

You'll need to tell the root router and root vuex where your modules are located.

So, bundle all your routes:

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

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

Do the same for your vuex:

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

export default { moduleA, moduleB, };

Now, in your global vuex/ :

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

import vuex from '../app';

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

And, for your router/ :

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

Vue.use(Router);

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