Objective

An introduction to how to setup a modern frontend project using everything you've learnt so far.

Use the Vue CLI toolchain to bootstrap the development process.

Here's where you get a better sense of how modularity / compartmentalization works in dev teams.

NPM basics

NPM, or node package manager, is the world's largest software registry (library)

The easiest way to start using is to just download node.js as NPM is bundled with it.

Install npm, and make sure you have the permissions setup.

On a terminal command line (or powershell), make sure you can run npm, e.g: npm -v

Vue CLI

The Vue CLI is a simple, fully configurable scaffold for Vue projects.

You can then install the Vue CLI with npm install -g @vue/cli command.

This installs the Vue CLI (Command line interface) on the global path, but you can also do this on a local directory. Just make sure the path is set correctly.

A useful way to list packages installed is npm list -g --depth 0. Leave out the -g flag is checking for local directory.

You can of course install the Vue CLI using yarn, if you prefer that package manager.

Vue CLI 2

Use Vue to create your project: e.g. vue create test

Suggest you pick defaults (Vue 2)

Then change to the project directory and npm run serve to run it.

Check that the project is served on localhost.

Vue components

Check and take a look at the basic App.vue.

You can see that the base template is decomposed into Vue components.

Each Vue component is its own self-contained file. HTML Vue template, Vue script code, and also CSS is one file.

This is a design philosophy that this is more readable than separate HTML templates, HS code and CSS.

Tip: Have a Vue context highlighter, e.g. Vetur for VSC. WIll make spotting bugs easier.

Tip: Install Vue.js dev tools extension for Chrome. Will make debugging a lot easier.

Vue: Router

Vue router is useful if you are setting up a single-page app.

Either install using the vue ui GUI, or use the Vue CLI vue add router, or npm install the package directly.

Install, and check how the scaffolding files have been changed.

It is a design pattern framework of routes, views, and components.

Add a CSS / UI framework

There are tons of UI frameworks for Vue - just pick what you like.

Vuetify, Buetify, vue-bootstrap, etc.

Follow instructions on the various sites, and install away.

Typically it is installed using npm or vue CLI.

Vue Ecosystem

The Vue ecosystem comes with lots of tools. Whatever you have in the React or Angular ecosystem, you will find something similar here.

E.g. Vuex (state management pattern + store), Nuxt.js (server-side rendering)

Investigate on your own! Beyond the scope of this module.

Build for production

When you want to build your app for production, do npm run build.

It will remove all unneeded code and minimize the files.

Typically it is pushed into the dist directory. You can just push this out into your production server.

Likely for this CSC2005 HCI project it means on GitPages.

Your HCI Project

You may not need a scaffolding tool unless you think it makes your coding process easier.

You can use any framework (or no framework) - up to you. You can use whatever libraries (or not) as you wish.

Frameworks are designed to make your life easier, and to setup a structure to scaffold a project.

Assignment

Lab 5 redux extra, extra challenge: Componentize / route Lab 5!

Assignment Lab 5: Redux (extra, extra challenge!)

To be completed by 9-11-2020(Mon) 2359hrs

• There is no new lab 6 assignment this week.
• Instead, remember your assignment from Lab 5?
• I want you to split up the interface into two route pages.
• Each page will be written as its own component.

Assignment Lab 5 redux: Extra, extra challenge

• This assignment is non-trivial, as there is probably a lot of reading to do.
• I will walkthrough my example in class.
• Make sure you install the CSS framework you're using properly (instead of using CDNs).
• You have to read-up on passing parameters either through components or the Vue router.
• Then build the whole project and make sure the version is visible on GitPages in your correct Lab 5 folder.

Assignment Lab 5 redux: grading

• This is only an extra, extra challenge for those of you that want to attempt.
• If you submit the basic one in lab 5 you will be awarded full marks for lab 5.
• If you submit a componentized one with routing you will get super extra marks that will add to the whole lab score total (if you need the extra marks)

Questions?

Chi-Loong | V/R