共有コンポーネントを使用する2つのSPAアプリケーションのVue.jsプロジェクト構造

Question

Vue.jsライブラリを使用してプロジェクトを開始しています。

• B2C（http://somedomain.com）
• 管理（http://admin.somedomain.com）B2Cと管理者の間で
• 共有コンポーネント（店舗、コンポーネント、モデルなど）

私が設定してください方法：プロジェクトは、3つのアプリケーションが含まれていますプロジェクト構造およびWebpack構成を使用して、共有コンポーネントを使用してコードの重複を防止します。さらに、npmを使ってbuild \ adminをビルドし、\ b2cをビルドし、単純なビルド/パブリッシング（nugetなどの追加のリポジトリなし）を続けたいと思います。

参考資料またはテンプレートを提供いただき、ありがとうございます。

Answer 1

ここでは、ES6モジュールを使用した例を示します（webpackのモジュールを使用できますが、私はこの方法が好ましい）。たとえば、あなたは、この構造

/assets 
/-js 
/--components 
/---shared 
/---admin 
/---b2c 
/--directives 
/--stores 
/--models 
/b2c.js 
/admin.js 

だからあなたb2c.jsにあなたはこの方法でそれを使用する必要があります。ここで

import Vue from 'Vue'; 

import component from './components/shared/SomeComponent.vue'; 

/*or var component = require('./components/shared/SomeComponent.vue'); if you want to use webpack here*/ 

import b2cOnly from './components/b2c/SomeComponent.vue'; 

let app = new Vue({ 
    el: '#app', 
    components: {component, b2cOnly} 
}); 

および類似admin.js

import Vue from 'Vue'; 

import component from './components/shared/SomeComponent.vue'; 

import adminOnly from './components/admin/SomeComponent.vue'; 

let app = new Vue({ 
    el: '#app', 
    components: {component, adminOnly} 
}); 

（私はhttps://github.com/vuejs/vueify午前のように、またはあなたがbrowserify使用している場合vueify）次に、あなたは簡単にvue-loaderとの同梱ができ

http://vue-loader.vuejs.org/en/start/tutorial.html

ですdocsからのwebpack.config.jsの例

次に、admin.jsとb2c.jsをプロジェクトのどこかに組み込むことができます。