Chapter 1 - Setting Up The Project

IMPORTANT: This chapter assumes that you already have installed a recent version of Node.js on your computer. If you do not have it yet, you can download it here: https://nodejs.org/en/download/

There are many different ways to create a Vue app. Here we'll be leveraging TypeScript and therefore will need to setup an project with a build/transpile process that will let us make changes and verify them in real time. You could manually create this project, install all the npm packages required, create each individual file. However, it is just much easier to do this by leveraging vite^[1]

Create Project Wizard

To set up the project, use the terminal and execute the following node.js command:

npm init vite@latest

If you do not have already installed the package create-vite@latest^[2] it will prompt you to install it. In this case, type y and then enter to proceed:

Need to install the following packages:
  create-vite@latest
Ok to proceed? (y)

The create-vite wizard will start and will ask you the name of the project. The default is vite-project, so change this to my-vue-project and hit enter:

? Project name: › my-vue-project

The second step will ask to select a framework. Use the keyboard arrows to scroll down the list and stop at vue, then hit enter:

? Select a framework: › - Use arrow-keys. Return to submit.
    vanilla
❯   vue
    react
    preact
    lit
    svelte

The third step will asking which "variant" you want o use. Scroll down to vue-ts (this is for the version that uses TypeScript) and hit enter:

? Select a variant: › - Use arrow-keys. Return to submit.
    vue
❯   vue-ts

This will create a folder called my-vue-project which is also the name of our project. At the end it should display a message similar to this:

Scaffolding project in /Volumes/projects/my-vue-project...

Done. Now run:

  cd my-vue-project
  npm install
  npm run dev

The first command will navigate to the current sub-directory called my-vue-project, the second one will install all the npm dependencies, the third one will serve the app locally. You'll see a message similar to this displayed:

vite v2.9.7 dev server running at:

  > Local: localhost:3000
  > Network: use `--host` to expose

From the web browser, navigate to the localhost:3000 address and you'll see application home page rendered:

The my-vue-project has been created with the main view called App.vue and a component called HelloWorld.vue which displays some static links to additional Vue resources plus an example of a simple counter.

Chapter 1 Recap

What We Learned

How to create the basic plumbing for a Vue app using the vite and create-vite@latest

How to serve the app locally through the command npm run dev

Observations

The app has been created with only preliminary code
The app does not do much yet, has only the main App view with some static html in it and a reference to a simple component called Counter

Based on these observations, there are a few improvements that will be making into the next chapter:

Improvements

Expand our app functionality by creating our first component

Chapter 1 - Setting Up The Project #

Create Project Wizard #

Chapter 1 Recap #

What We Learned #

Observations #