How to build a project on the vue from different components?

Good day, ladies and gentlemen!

There is a set of components (e.g. Header, Content, Footer), but there are different versions of these components (different styles, layout and texts)

The question is how to organize the download of the necessary components when you build the project?
April 7th 20 at 11:00
2 answers
April 7th 20 at 11:02
Solution
Just use the alias, it is the path of the desired component on the stage of the build.
thank you, precious, while made on the basis of a static object config to enter the desired components
and deduce so

<component :is="template" v-for="(template index) in returnConfigArray" key="index" v-if="index === flow" @plus="test" />

returnConfigArray - returns include with paths to the files using map - Ilene.Bernhard commented on April 7th 20 at 11:05
@Ilene.Bernhard, ie you manually every time this file is changed? For if there if'you what, there'd still all set in bandle will. - Carmen.Gottli commented on April 7th 20 at 11:08
@Carmen.Gottli,
ie you manually every time this file is changed?


for now, yeah

not realized at the expense if... - Ilene.Bernhard commented on April 7th 20 at 11:11
@Ilene.Bernhard, If there is something like
const Header = ((version)=>{
switch(+version){
 case 3:
 return require('src/components/Header3.vue');
 case 2:
 return require('src/components/Header2.vue');
default:
 return require('src/components/Header.vue')
}
})(process.env.VERSION);

it will be gathered still all the options.

With alias you just do this:
// App.vue 
import Header from 'src/components/Header.vue'; //as usual

// in the vue.config
const path = require('path');
module.exports = {
 configureWebpack: {
 resolve: {
 alias: {
 'src/components/Header.vue': path.join(__dirname, `src/components/Header${process.env.VERSION}.vue`),
 'src': path.join(__dirname, 'src/'),
}
}
}
}
- Carmen.Gottli commented on April 7th 20 at 11:14
@Carmen.Gottli, got it, thanks - Ilene.Bernhard commented on April 7th 20 at 11:17
April 7th 20 at 11:04
I saw it

actually based on those docks, how to make a config so I can mark which components we push in the build, and which are not? - Ilene.Bernhard commented on April 7th 20 at 11:07
@Ilene.Bernhard, Why do you need it?! You have a root component (conditional App.vue), your sborshik loads it, and loads all of its dependent components (Header, Content, Footer that you use in the App). Then loads of dependent components dependent components and so on. Everything that you use in the project will be included in the Assembly, and all that do not use — will not.

This is the default behavior of most collectors that I know of. - antwon_Shields16 commented on April 7th 20 at 11:10
@antwon_Shields16specifically I just do not fell, but "business" wants :)
It may be understandable, relatively speaking is set
Header1 Header2 Header3
Content1 Content2 Content3
Footer1 Footer2 Footer3

business wants to stamp, conventionally, tick on the desired components and sbility , for example
Header2
Content3
Footer1

so I do not understand yet how it can be arranged - Ilene.Bernhard commented on April 7th 20 at 11:13

Find more questions by tags Vue.js