How can I organize the assembly of *.vue components?

Question

Building projects

I lived with Vue.js before using component vue files. Well, these are the ones where the template, styles and script are in one file. And somehow I don’t fully understand why everyone decided that it was very convenient?
No, I agree that in theory it sounds very logical - we collect all the bricks related to some semantic and functional unit in one place. Separation of code by areas of responsibility, as written in the documentation. But still there are questions, sometimes confusion.
1. Convenience is doubtful. On simple components, say, no more than a hundred lines for everything about everything - indeed, there are no problems, everything is clearly visible. But then it gets worse sharply, it turns out to be porridge and still pulls somehow to split it into files.
2. What if I don’t want Vue itself to climb into the general bundle (I use Browserify + Vueify), but I want to load it from the CDN as usual? Do I need to drag it to dev dependencies or what?
3. I found that the CSS code is wrapped in some kind of creepy "inserter" and is also put into a common JS bundle. It's infuriating because I don't understand exactly when it will be loaded onto the page - not to mention the swelling of the bundle to a large size. I want the JS bundle to be on its own and the CSS bundle to be on its own - and connect it in the normal way.
4. If I want to use global mixins or CSS preprocessor variables, then I have to include them in each component individually. Why not once, as it was all my life before? There are people with similar problems on the Internet, there are long threads of discussions, they offertonsils through the anus to treat some separate loaders to fasten - I did not understand anything.
In general, I tend to think that you need to leave the template and methods in the vue files, but take out the CSS separately, as it always has been. But you need to understand how to explain this to the collector. This is called "the woman had no worries, so she bought a pig."

Answer 1

In general, I partially got to the bottom of it myself.
2. You can connect Vue with CDN, but it must still be present in package.json in dev dependencies - otherwise vueify swears.
In dev build mode, Vue will be added to the bundle, increasing its size by ~200 kb. But you don't need to be scared, it will disappear in prod mode NODE_ENV=production
3. You can extract CSS into a separate bundle like this: https://github.com/vuejs/vueify#css-extraction
You don't need to install this plugin separately, it is already out of the box.
If you collect in dev mode, then the styles are pulled out into a separate file in a formatted form, if in pro mode, they are already minified.
I'm currently trying to drag this from command line to Gulp - it's a fun adventure of its own.
(who said that assemblers save a lot of time? hehe)

Answer 2

1 Really convenient. If you want to split the component into files, this
is
also easy to do .ensure for dividing the bundle into pieces with asynchronous loading (for example, for vue- router
) so put vue-cli with webpack-simple template and go. and yes, it's more complicated with webpack template, so it's better to use simplified template :)