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, 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
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.
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.
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 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.
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.
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.
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.
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.
To be completed by 9-11-2020(Mon) 2359hrs
Chi-Loong | V/R