1904210

Brad Traversy is one of the popular web development authors on YouTube. My next trip on the VueJS journey was to go through his Vue JS Crash Course – 2019 video.

1. Introduction

Brad starts off by introducing VueJS and its offerings. Among the tools, I took note of Vue CLI 3 and Vuex. Vue CLI 3 is a tool for generating and building VueJS apps. It incorporates Babel (“compiles” code to browser-compatible JavaScript), TypeScript, ESLint, PostCSS and others. It includes a development server with hot reload, and a tool to manage an app in a GUI. Vuex is used to manage application state across different components, similar to Redux and Flux. It serves as a central store for all components, eliminating the need for passing state details as component parameters or props. It uses actions to update the global state which then gets sent down to components. It is very ideal for large applications. As the application to be created for the course was small, Vuex would not be used.

2. Installing Vue CLI

The documentation for CLI is found at its website. CLI is a Node.js module and the latest version 3 is named @vue/cli. To install it the following is typed at the command prompt: npm i -g @vue/cli

After installation, there are two ways to create a new app, typing vue create appname or vue ui. In the first case, directory or folder appname will be created with template and library files and inside it, typing npm run serve will start the development server with the application on port 8080.

In the second case, the development server is started on port 8000 and Vue Project Manager opens against it on the browser, with options to create, list or import a project. Choose to create and then you specify the project name and some options like presets. (Saved presets will be stored in a JSON file named .vuerc in your user home directory. If there is need to modify saved presets or options, this can also be done by editing this file.) It takes a while to install CLI plugins, additional dependencies, and after almost 20 minutes (on a 1.65 GHz laptop with Windows Experience Index 3.9), it announces success and opens the Project dashboard window. (On checking the node_modules directory I saw 802 subdirectories or modules downloaded and installed, no wonder it took so long, including express module that I previously installed globally.) It’s definitely an overkill when the project is very small and just a couple of files would do, for HTML and JavaScript code.

The newly-created project directory contained the following:

• Three subdirectories: node_modules, public, src: The application files are in public (index.html and favicon.ico) and src (assets, components, main.js, App.vue). src\assets contains logo.png (the Vue logo) while src\components contains HelloWorld.vue. The .vue extension is for component files containing <template>, <script> and optional <style> sections.
• Five files: README.md, package-lock.json, package.json, .gitignore, babel.config.js

3. GitHub registration and tutorial

While looking for a Sublime Text syntax highlighting package for .vue files I ended up at GitHub where I saw one. I read a Medium article earlier today about working with GitHub (Getting started with Git and GitHub: the complete beginner’s guide), so I decided to register my account and then went through the introductory “Hello World” tutorial:

1. Create and use a repository named hello_world
2. Start and manage a new branch: With the master branch being the original, other branches are temporary copies for modifications.
3. Make changes to a file (README.md) and push them to GitHub as commits.
4. Open and merge a pull request: Pull requests compare changes in a branch with another, for others to comment on or for you to see. Merging makes the changes permanent, after which the branch can be deleted.

I did find a .vue file syntax highlighter that is now effective in Sublime Text. Preferences > Package Control > Package Control: Install Package lists out the packages from a web repository and I could type vue to filter the results. I first selected Vue Syntax Highlight package that I saw at GitHub via Google search, but it didn’t alter the presentation of my already open .vue file. I then installed Vuejs Complete Package and it did. I also installed Babel package for JSX formatting, though I noticed that for it to be fully effective, the default JavaScript package may need to be disabled first.

4. Vue-Router

This was installed midway into the course. It allows each route to render a different component. Installing it from the Vue Package Manager has one side effect, the App.vue file is overwritten so it had to be backed up first. Along with modifying App.vue to now have two sample routes (/ and /about) to display Home and About components that it creates, the installer also creates src\main.js and src\router.js files, and a views subdirectory with the Home.vue and About.vue component files.

The new Home.vue was then replaced with the former App.vue contents. The location of the components directory within it, and the component’s name, were adjusted.

5. Run build

The build option in the Vue Package Manager “compiles” and minifies files for production use within a dist subdirectory. The first build attempt failed with errors after 320 seconds: axios dependency not found. I had to run npm install --save axios before it succeeded. What the build process does is to convert most of the VueJS and HTML into JavaScript code with all the unnecessary spacing and line breaks taken out.

6. Course summary

The course work for Traversy’s VueJS Crash Course - 2019 is the implementation of a to-do list application (image above) similar to the one for the React course I went through before. Unlike the Vue Mastery intro course this one briefly covered installing and using the CLI (that works just like React with the exception of its browser-based GUI tool, the Vue Package Manager) and also implemented HTTP calls via axios module and routing via the vue-router, along with covering the following methods and directives: $emit(), created(), v-bind, v-on (also @), v-model, v-for, scoped (styles), <template>, <router-link>, <router-view>. While several Vue.component() methods were used in the Vue Mastery course to define components in the same script file, here each component is a separate .vue file, just like in React (where they are separate .js files). Each .vue file had three sections, <template> for the HTML, <script> for the component definition and <style> for the component’s CSS, the scoped attribute allowing for a component-only style sheet. Only the first section is compulsory. A simplified props syntax was used, listing the variables in an array without any details, while in the VM course a more detailed object syntax was used. It dealt with the same issue of communicating an event from a grandchild component to a grandparent in a different manner, by having the parent also emit the same event as the grandchild did, instead of using an event bus.