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.
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 client-side-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 client-side-code directory that you created in the previous step.
Next, open the Terminal in VSC (ctrl + `).
Make sure your current working directory is client-side-code. If not, change your current working directory.
Create a new Vue app using the following command.
$ npm create vue@latest
At the prompt, name your project app1.
Use your arrow keys to go up and down between the choices and use the spacebar to select the following – then press enter to continue.
- Router (SPA development)
- Pinia (state management)
- ESLint (error prevention)
- Prettier (code formatting)
Do not select any experimental features, just press Enter to continue.
Typically we will “Skip all example code”, but for this build leave No selected and press enter to continue.
Build the Project
The Vue tool you just ran will create a new folder named app1. Change your working directory to app1.
$ cd app1
Run the following commands to install the npm module dependencies (needed libraries). The name and version of the modules are defined in package.json.
$ npm install
Prettify the source code by running the following command.
$npm run format
User the next command to start the Vite server which will create a runtime build of your app.
$ npm run dev
The last command will print to the terminal a Local link. Click on the link. A browser will open and run the new app you just created.