Vue3 Introduction Notes 1 ---- Creating a Vue3 Project and Explaining the Directory Structure

This series of notes will mainly focus on how to set up a project using Vue3 and interact with the backend API. It won’t introduce the basic features of Vue. For the basic features of Vue, you can refer to this video Get a Quick Start with Vue in Four Hours. I got started with Vue by watching this video and thought it was pretty good.

Code address: https://github.com/yexia553/vue_study/tree/%E9%85%8D%E7%BD%AEvue-router/vue3-notes

Preface

Actually, it’s not really an introduction because I’ve been using Vue for a while. But before, I only wrote some simple pages and components. I didn’t really know how to set up the whole Vue project. This time, I mainly want to organize this part of the content and write a set of notes from start to finish to summarize it.
Many parts of these notes refer to the videos of an UP owner on Bilibili. Here’s the link. If you’re interested, you can take a look: Vue Project Practice

Introduction to the Development Environment

I connected to WSL through VS Code on Windows 11. The WSL system is Ubuntu 20.04. So my development environment is VS Code + Ubuntu.

This is also my work development environment. Developing on Ubuntu is more convenient than on Windows, especially in terms of command - line operations. However, Ubuntu can’t meet the needs of daily work software because many work software don’t have Ubuntu versions. So the Windows11 + WSL mode is quite good. I recommend you give it a try.

The versions of npm and node are as follows:

$ npm -v
8.13.2

$ node -v
v14.19.1

Creating the Vue3 Project Framework

You can refer to the official Vue3 website: Create a Vue Application

First, execute the init command

$ npm init vue@latest

After execution, some configurations will gradually appear for us to choose. It is recommended that beginners only configure “Project name” and choose “No” for the rest. Here are my configurations.

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue3-notes
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes

Scaffolding project in /home/zhixiang_pan/learningspace/vue_study/vue3-notes...

Done. Now run:

  cd vue3-notes
  npm install
  npm run dev

I set the Project name to vue - notes, which will generate a vue3 - notes directory in the current path.
After the configuration, enter the vue3 - notes directory (the path you entered in the project name option) and execute npm install (to install necessary dependencies) and npm run dev, and you can run a Vue3 sample application locally.

By this point, the creation of a Vue3 project is completed.

Explanation of the Directory Structure

After creating the Vue3 project and installing dependencies and running the local environment for the first time, the directory structure within the project should be as shown in the following figure:

Here is a brief explanation of several directories and files that will be used later.

1. src
   The src directory is the main directory for storing source code. Generally, Vue - related code will be placed in src.
2. components
   In Vue3, there is a concept of components, which means extracting reusable code and encapsulating it into a component separately so that it can be called from different places. The components directory is where these components are stored.
3. App.vue
   You can simply understand App.vue as a root component. That is, all pages in Vue will use this component. In other words, whenever any page is refreshed, the code in App.vue will be called.
4. main.js
   You can simply understand this as the entry point of the entire site. The entire Vue project starts running from here. So generally, some global - affecting configurations and code are placed here.

There are some other files and directories that have little impact on the understanding of getting started with Vue3, so I won’t go into details. If you’re interested, you can visit the official website.