Use requirejs for lazyloading the components with VueRouter instead of webpack or similars
Hi! 
I want to show you to lazy loading each component via requirejs instead of using webpack or es6.
I like to use these way, because iam not familiary with "ES6" or things like that.
Let's get started.
- First, yo have to add the reference to requirejs in your index.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js" data-main="main"></script>
</head>
</html>
- Second, create a main.js in your root folder, then put something these script in your main.js:
// Then add these configuration,
// The require-text, vue, and vuejs. Please copy and paste these literally.
// In here you can paste your others libraries.
requirejs.config({
paths: {
'text': 'https://cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text.min.js',
"Vue": "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue",
"vue": "https://rawgit.com/edgardleal/require-vuejs/master/dist/require-vuejs",
"VueRouter": "https://unpkg.com/vue-router/dist/vue-router"
shim: {"Vue": {"exports": "Vue"}}
});
// These function calls every "Component" to find it.
function view(name) {
return function (resolve) {
return require([name], resolve);
};
}
//Init the require function with Vue Router and Vue.
require(["Vue", "VueRouter"], function (Vue, VueRouter) {
// Here is the "trick" because we define each "Component" in our list, but it will load when will be loaded, instead of the first call of the page.
//Beatiful?! :)
//Remember to declare every Component in these list.
var routes = [
{path: '/thePathForURI', name: "folder1", component: view("folderComponents/folder1/nameFileJs")}
///.. Acá iran las demás rutas
];
//Then attach the list to VueRouter.
var router = new VueRouter({"routes": routes});
//Then all the everybody knows.
Vue.use(VueRouter);
var app = new Vue({"router": router, "data": {}, "methods": {}).$mount('#app');
});
- Create the folder "folderComponents" , and create a subfolder called it "folder1", remember you can create N Folders, each has a component.
3.1 Inside of the "folder1" create two files: "nameFileJs.html" and "nameFileJs.html".
3.2 Inside of the "nameFileJs.html" put the html that you want.
3.3 Inside of the "nameFileJs.js" put a structure like these:
//The trick it's here, in the define "(text!...) these it's the reference of the html
define(['text!folderComponents/folder1/nameFileJs.html'], function (htmlTemplate) {
var VueComponent = function () {
var self = this;
//Then we have the HTML lazy loaded or "ajax" loaded.
self.template = htmlTemplate;
//Then all the scructure of the VUE
self.data = {};
self.created = {};
self.methods = {};
};
//Remember to return your Compomentn :)
return new VueComponent();
});
Thats it! 
Enjoy your code
Is there any way to accomplish this while keeping the html template and JS for the components in the same file?