1904280

I next gave myself the task of converting the Vue CLI Todo List app from the Traversy course to a plain HTML/JavaScript version, to see how it would go. The CLI version had 1 .html file, 2 .js files, 7 .vue files or components distributed across different directories, as shown in the image, plus two external modules uuid and axios.

At the end of the successful exercise, the non-CLI version had just three files, for the HTML, JavaScript and CSS.

The conversion process and new file structure

1. HTML

The public/index.html file became the new application html file and it was expanded to reference the .js and .css files using <script> and <link> tags. Versions of the two external modules that could be referenced via the <script> tag had to be found. For axios, this was the file axios/dist/axios.min.js within its node_modules directory, while for uuid this was downloaded from http://wzrd.in/standalone/uuid%2Fv4@latest as listed in its documentation.

2. JavaScript

My attempt to use something like import About from "About" to reference the component files atop the .js file produced the following error at the browser: SyntaxError: import declarations may only appear at top level of a module. So the <template> and relevant parts of the <script> sections of the component .vue files had to be merged together into one JavaScript file. Each component was declared as an object variable and this had to be done before it was referenced, otherwise an error like the following resulted: ReferenceError: can't access lexical declaration 'TodoItem' before initialization.

Later I checked to see if I could use require() to reference the files, learning in the process that require() that I saw in the code for some Node modules was not a JavaScript function but one implemented by Node.js and later that there was a RequireJS library that also implemented it, which I looked at and downloaded but saw that using it would rather introduce extra complexity.

For some reason using Vue.component() to declare the components resulted in ReferenceError: x is not defined errors. And none of these components could be placed in the .html file as custom tags as they were said to be undefined too: Because of the router implementation, the Vue instance that was created at the end of the src/main.js file was

new Vue({
  router,
  render: h => h(App)
}).$mount("#app")

It did not have an options variable with el property pointing to an .html root element; maybe this was the reason. After the components were declared, the routes array was declared with the root components, the router instance was instantiated and finally the Vue instance was instantiated using the router.

...
const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About }
]

const router = new VueRouter({routes}) // short for "routes: routes"

const app = new Vue({
  ...
})

3. Stylesheet

The <style> sections of the .vue files were merged together into one .css file, and fortunately there were no conflicting definitions for the same style item.

Conclusion

The .html file can now be opened with the browser, doing exactly the same thing as before, without a build process taking place first to create production files. The CLI method of creating apps is fine for large applications. What it produces in the build process has virtually all of the HTML replaced with dynamic element-creation JavaScript code, with all the human-aiding spacing and punctuation in the code taken out, making it much smaller. The one drawback to using scoped style sheets for components is that although each component is being styled independent of the other during development, a bigger .css file would result after the build process, as each similarly-named style item will be represented in the .css file as a separate item: If componentA has a style item named header and componentB has the same header with different definition, the build process will produce both styles named like header[componentA] and header[componentB] in the the final .css file.