I have been a programmer for over 30 years, but am relatively inexperienced in web applications. I have done a lot of research and thought Vue.js 2 seemed to be an interesting framework for web development.
I am primarily interested in developing complex enterprise applications.
I have started developing using the vue-cli template (?) and feel like I’m drowning. Here are my main issues so far:
- There is no clear “for dummies” structure of how Vue.js works, like so:
index.html -> this is the first thing your browser sees. It then loads…
main.js -> This is where the Vue object is created (?), which is accesible in the following scope(s): xxxxx, xxxx
router/index.js -> This is where modules relate to each other (?). The router object in every app is a) a reference to the main route object b) each component has its own copy of $route
…and so on
This is important because from the Vue.js documentation there’s no clear way to understand objects structure and scope. Which leads me to my next issue:
- Vue.js obviously does not provide every possible functionality necessary for an application, so I’,m sure there’s a reasonable way for inspecting and manipulating DOM elements, but it’s been a week of frantic googling to no avail. If Vue.js doesn’t like that, I’ll probably need to look elsewhere because I’m very anal about how things need to behave in my apps and usability to me is very important.
Here’s one example: I have App.vue, where my main navigation menu is, which calls Login.vue, and every time Login.vue is shown I want the focus to go to the Element UI input for the user email. I’ve read about using “directives”, but no one tells you where to put them. I’ve tried main.js, App.vue and whatnot, but nothing works. Some people say it’s easy to use this.$refs..focus(), but I haven’t been able to make that work either. Maybe I’m stupid? That sure is how it feels like.
Debugging apps has been a nightmare, all I see is endless one-line “evals”, and the chrome extension has very, very little information. Is there a better way?
So am I using the wrong starting point? Should I use a different template/boilerplate/scaffold other than vue-cli? Can anyone recommend me one, keeping in mind that my main target is enterprise web applications?
Also I’m currently using Element UI and, for lack of a better alternative, VueResource for backend access. Am I missing something that’s important for my purposes?
Just so you don’t think I’m complete idiot, here’s what I’ve done so far:
- Got the Element UI menu working with the router
- Login works, with JWT authentication using a php backend
- Per-request authentication works, even though I wasn’t able to set the global http header for the JWT token
- Navigation works well, aside the fact that I can’t focus on the inputs I want whenever I show the login or new user components.