Ok, I read through this whole thread and with the variety of recommendations for frameworks and tools mentioned it will make your head spin for sure.
You mentioned Vue, so I will talk about Vue. Vue will get you there in terms of any complexity you may need. React, Angular, Ember, etc. will also get you there, but you mentioned Vue so let's stick to that.
Wrt boilerplate templates: just use vue-cli to generate the project, there are not even that many options, and you get hot-reloading, test harness with it automatically.
To keep it real, I imagine your SPA will need different sections of the screen to show: a header, some kind of menu (sidebar?) and a main window that shows what the user is working with for the moment. How do you get the main window to show the relevant content if the user clicks on a menu item? If you solve that (hint: vue-router), you now understand one of the main benefits of using a front end framework for managing components and avoiding round trips to the server.
Next challenge: create a nice page that has, let's say, two different panels. One panel shows a list of items, and the other panel shows some details about the currently selected item from the list. How do you: 1. show the details about the selected item in the second panel? 2. If you change the item name in the detail panel, will it update immediately in the list above? Solving for this will satisfy your curiosity of why a state management solution would be useful, and you'll be led to ...... yes, Vuex!
These 'challenges' would be enough for a good 90% of common web apps/SPAs, with navigation and master-detail UI.
Just one piece of advice, pick one current framework, learn it by solving these common problems, and you'll be on your way.
Source: I have built and rebuilt a complex system in Angular, Meteor, React and Vue (I do NOT recommend that kind of churn, but keep in mind each framework have had significant shortcomings over that past 2 years which made client-side state management difficult).
If you take the intellectual route and try to do all this with vanilla JS or solely jQuery, be prepared to spend a while before becoming productive (depends on your app's complexity of course).
To keep it real, I imagine your SPA will need different sections of the screen to show: a header, some kind of menu (sidebar?) and a main window that shows what the user is working with for the moment. How do you get the main window to show the relevant content if the user clicks on a menu item? If you solve that (hint: vue-router), you now understand one of the main benefits of using a front end framework for managing components and avoiding round trips to the server.
Next challenge: create a nice page that has, let's say, two different panels. One panel shows a list of items, and the other panel shows some details about the currently selected item from the list. How do you: 1. show the details about the selected item in the second panel? 2. If you change the item name in the detail panel, will it update immediately in the list above? Solving for this will satisfy your curiosity of why a state management solution would be useful, and you'll be led to ...... yes, Vuex!
These 'challenges' would be enough for a good 90% of common web apps/SPAs, with navigation and master-detail UI.
Just one piece of advice, pick one current framework, learn it by solving these common problems, and you'll be on your way. Source: I have built and rebuilt a complex system in Angular, Meteor, React and Vue (I do NOT recommend that kind of churn, but keep in mind each framework have had significant shortcomings over that past 2 years which made client-side state management difficult). If you take the intellectual route and try to do all this with vanilla JS or solely jQuery, be prepared to spend a while before becoming productive (depends on your app's complexity of course).