Lessons learned when writing the first Vue.js application.

The application I wrote and shared at https://1drv.ms/u/s!Ashlm-Nw-wnWyB2rx30dmeEoNxt_?e=ZHiGjt for the purposes of a Feedback user interface as discussed here was a series of trial and error because I was experimenting with different vue packages. As such the Vue framework works very well out of the box in terms of organizing and maintaining the code and data for a user interface but there was a learning curve associated due to the following reasons: 

1. The rendering library to package the single composable file (SCF) for a view in terms of a template, style and script are better chosen to be WebPack rather than relying exclusively on Vue-CLI-service although both allow compiling and running the Vue code. By the way, I love the similar sounding ‘Vue’ name since it rhymes with ‘View’ 

2. The Vue-CLI-service requires a separate set of commands to be put on the package.json scripts section as opposed to the webpack which is rather nifty with simple “npm run dev”. That is just the surface, the chores required to get to that stage can cost you if you did not plan ahead with one of the two choices rather than both. 

3. The webpack also performs well when the application is clearly written in the form of the file organization required by the webpack because the module compilation and invocation on the console as well as on the browser developer tools is helpful to walk through. Any deviation for whatever reason might require a wild goose chase. 

4. Packages that help with logging when running ‘npm run dev’ with vue.js applications. Please note that we skip the discussion on ‘-ddd loglevel’ with that command. 

5. Npm require loglevel 

• Single lightweight  

• Invocable in page with the script tag 

• Small footprint 

• Npm install Winston 

• One of the most popular configurable logging block 

• By default or for redundant logging 

• Npm install Jaeger 

• Specifically helpful to vue applications for trace.

• Prefer advanced functionality 

•  

6. There are quite a few dependencies that are tempting to add to the application with “vue add” or “npm install” but less is more in this case and while you are at it, prefer the npm install over the other. 

7. The HTML, style and script have their place and yes the composability is appealing but please stick to getting the HTML right because typos are extremely hard to find overall unless you are willing to view the page source and search for the section that will let you know where you made it. 

8. Please prefer the host as ‘0.0.0.0’ and port in the upper 8000 if you are using your environment for hosting other applications and allow disableHostCheck in build/webpack.dev.conf.js 

Sample Application: https://1drv.ms/u/s!Ashlm-Nw-wnWyB2rx30dmeEoNxt_?e=QPBgRa