Структура проекта Vue.js для двух приложений SPA с общими компонентами

Question

Я начинаю проект с использованием библиотеки Vue.js. Проект содержит три приложения:

• b2c (http://somedomain.com)
• администратора (http://admin.somedomain.com)
• общие компоненты между b2c и админом (магазины, компоненты, модели и т.д.)

Как я должен установить вверх структуру проекта и конфигурацию webpack для предотвращения дублирования кода с использованием общих компонентов. Кроме того, я хотел бы использовать сборку npm run для создания build \ admin и build \ 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} 
}); 

Тогда вы можете легко связать его с vue-loader (или vueify, если вы используете browserify, как я https://github.com/vuejs/vueify)

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

Вот пример webpack.config.js из документов

// webpack.config.js 
module.exports = { 
    // other options ... 
    module: { 
loaders: [ 
    { 
    // use vue-loader for *.vue files 
    test: /\.vue$/, 
    loader: 'vue' 
    }, 
    { 
    // use babel-loader for *.js files 
    test: /\.js$/, 
    loader: 'babel', 
    // important: exclude files in node_modules 
    // otherwise it's going to be really slow! 
    exclude: /node_modules/ 
    } 
] 
}, 
    // if you are using babel-loader directly then 
    // the babel config block becomes required. 
    babel: { 
    presets: ['es2015'], 
    plugins: ['transform-runtime'] 
    } 
} 

Затем вы можете добавить свои данные admin.js и b2c.js где-то в вашем проекте.