Creating a New Vue SPA

Follow the instructions below to create a new Vue SPA.

Install and Update Tools

In this course you’ll need the following installed on your laptop.  Please follow the links below, then download the tools and install them if you don’t have the tools installed on your laptop.

  1. Git (and GitBash)
  2. Visual Studio Code (VSC)
  3. node.js

If you already have node installed, be sure to update node.js and npm.  A quick google search can show you how.

Create a Directory for Your Class Work

Create a directory on your laptop named csci432-code for the code you will be writing for this class.

Create a New Vue Project Using the Vue CLI

Launch VSC and Open the csci432-code directory that you created in the previous step.

Next, open the Terminal in VSC (ctrl + `).

Make sure your current working directory is csci432-code.  If not, change your current working directory.

Create a new Vue app using the following command.

$  npm create vue@latest

Type y to install the create-vue tool if prompted.

You will then be presented with prompts to configure your project.  Name your project project1 and select No for everything except the following:

  • Add Vue Router for Single Page Application development? – Yes
  • Add Pinia for state management? – Yes
  • Add ESLint for code quality? – Yes

The Vue tool will create a new folder named project1.  Change your working directory to project1.

$ cd project1

Run the following commands to install dependencies (needed libraries) and start the dev server.

$ npm install
$ npm run dev

The last command will print a localhost link.  Hover your cursor over the link and click Follow link.  A browser will open the new app you just created.

Begin to Understand the Source Code

Inspect the source code and try to understand the structure of the code.  When doing, answer the following questions.

  1. What sort of files are in node_modules?
  2. What sort of files are in src/assets?
  3. What sort of files are in src/components?
  4. What 3 aspects are a web component are encapsulated in files that have a .vue file extension?
  5. We’ll talk about the files in src/router and src/stores later.
  6. What sort of files are in src/views?
  7. What 3 directories contain Vue components (files with a .vue file extension)?
  8. List all 6 of the Vue components that are in this app.
  9. Components are often nested in other components.  For example, inside App.vue (a component) you can see a <HelloWorld> element (also a component) that is defined in /src/components/HelloWorld.vue. Draw a picture that describes how all of the components are pieced together.
  10. How many files in the project have the .html file extension?
  11. What is the id of the solitary <div> element inside index.html?
  12. What is the name of the JavaScript file that is loaded by index.html?
  13. What do the following lines of code in src/main.js do?
import App from './App.vue'
const app = createApp(App)
app.mount('#app')

Generate Production Code

In the VSC terminal, run the following command to have Vite build a production ready app that can hosted on a server.

# npm run build

Notice that we now have a subdirectory named dist. Take a few minutes to inspect the contents of dist.

  1. What is the primary purpose of index.html?
  2. What is in dist/assets?

Test the Production Code

In a terminal install the serve npm module using the following command.  This module will allow us to power up a node web server to test the production code similar to using VSC’s Live Server.

$ npm install -g serve

Now start serve using the command below and click on the Local link displayed in the terminal.

$ serve -s dist

If successful, your web app should be running in your browser.