Tutorial 04 - Vue.js 3

[braughtg]

Tutorial 04 - Vue.js 3

In this tutorial you will use what you have learned to build a functional version of the FlashWord application. When that is working you'll learn about the Vite (pronounced "veet") build system.

Getting Started

You will start and work on this tutorial in the same way as you have for the previous tutorials. You should be starting to internalize this process making you less reliant on reading the detailed instructions each time.

Tasks

1. If you don't remember all of the steps for getting started and working on the tutorial tasks, you should review the CONTRIBUTING.md document as necessary.
2. Open Susan Buck's Vue.js Simplified Course.

Building FlashWord

Tasks

1. Watch and follow along with the "Building FlashWord" video (11:54).
   • Notes:
     • If you do not see expected updates when you reload the FlashWords page after making a change:
       • Try holding Shift while reloading or use the keyboard shortcut (see the QuickReference).
       • Check the Developer Tools console for errors.
     • You may notice that sometimes the word cards will change order when you first type in the text input. This is due to a bug in the way Susan implemented the app. You'll figure out a fix for that bug in the extensions to this tutorial.
2. Self Check:
   a. What bits of code cause the text input to change to plain text when the correct answer is entered?
   b. What bits of code cause the card to turn green when the correct answer is entered? How do they work together?
   c. What bits of code cause the "completed" message to appear? How do they work together?

Vite Build System

Build systems like Vite are used to package a web application and all of its dependencies so that it can be served efficiently and without relying on an external CDN.

Tasks

1. Watch and follow along with the "Vite Build System" video (13:44).

   • Notes:
     • NPM is already installed in the codespace you are using. So when Susan asks you to run npm you should see output.
     • Susan mentions special instructions for setting the PATH variable if you are using a Mac. You will not need to set the PATH variable because you are actually working on Linux in the codespace, not on your Mac.

2. Self Check:
   a. What are main the advantages of using a build system like Vite?
   b.

Working with Vite and Vue

Tasks

Turning in Your Work

Once you have finished all of the work in this tutorial you will need to officially submit it.

1. Use the steps in the Completing a Tutorial section of the CONTRIBUTING.md document to submit your work on this tutorial. You should be starting to internalize this process making you less reliant on reading the detailed instructions each time.

---

This Tutorial is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Licensethat you ahve