Vue.js ES6 导入导出答案

【问题标题】：Vue.js ES6 import exportVue.js ES6 导入导出
【发布时间】：2017-08-13 01:03:12
【问题描述】：

我在 ES6 中使用 babel 导入多个模块时遇到问题。我正在尝试在 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' }
] }
];

那么，我该如何导入并获得这项工作。请帮忙。

谢谢

【问题讨论】：

有什么难度？两者都在导出名为routes的东西？

标签： javascript vue.js babeljs vuejs2 vue-component

【解决方案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,
});

【讨论】：