YouTipVue3 Blog Project
This chapter takes you from scratch, creating a Vue3 blog project with Vite, and understanding the role of each file in the project.
* * *
## Environment Preparation
Before starting, make sure Node.js is installed on your computer.
Node.js is the JavaScript runtime environment that allows us to run JS code outside the browser.
Vue3's development toolchain (Vite, npm) all depend on Node.js.
### Check if Node.js is Installed
Open the terminal (Windows use CMD or PowerShell, Mac use Terminal), enter the following command:
$ node -v v20.10.0
If a version number is displayed (v16 or higher is recommended), it's already installed.
If not, go to [nodejs.org](https://nodejs.org/) to download and install the LTS version.
> Installing Node.js will automatically include npm (Node Package Manager).
>
>
> Verification command:
>
> npm -v
* * *
## Create Vue3 Project
Vue officially recommends using the create-vue scaffolding tool to initialize the project.
In the terminal, enter the directory where you want to store the project, and execute:
npm create vue@latest blog-app
After execution, a series of options will appear. Select as follows:
| Option | Selection | Description |
| --- | --- | --- |
| Add TypeScript? | No | Beginners use plain JS first |
| Add JSX Support? | No | Template syntax is more intuitive |
| Add Vue Router? | Yes | Will use routing later |
| Add Pinia? | Yes | State management, will use later |
| Add Vitest? | No | Testing not needed for now |
| Add ESLint? | No | Beginners don't need it for now |
After completing the selection, follow the prompts to execute in order:
$ cd blog-app $ npm install $ npm run dev
At this point, the browser will automatically open http://localhost:5173, and you'll see Vue's default welcome page, indicating the project started successfully.
> `npm install` will download all dependencies to the node_modules directory based on package.json. This step requires an internet connection and may take a few minutes on first execution.
* * *
## Project Directory Structure Explained
Open the blog-app folder, you'll see the following structure:
blog-app/├── index.html # Entry HTML file├── package.json # Project configuration and dependency list├── vite.config.js # Vite build tool configuration├── public/ # Static assets that don't go through compilation├── src/│ ├── main.js # JS entry, creates and mounts Vue app│ ├── App.vue # Root component, shell for all pages│ ├── assets/ # Static assets that need compilation (CSS, images)│ ├── components/ # Reusable Vue components│ ├── views/ # Page-level components (pages corresponding to routes)│ ├── router/ # Route configuration│ └── stores/ # Pinia state management
### Core File Functions
index.html — The entry file that browsers access.
Vite will automatically inject src/main.js into this file, you don't need to manually import any JS.
src/main.js — The startup file of the Vue application.
It is responsible for creating the Vue application instance, registering plugins (routing, state management), and mounting the application to the HTML page.
src/App.vue — Root component.
It is the outermost container for all pages, usually containing navigation bar, footer, and router outlet.
* * *
## Single File Component (SFC)
In Vue, each `.vue` file is called a "Single File Component" (SFC).
It encapsulates the template, logic, and styles of the same component together; one file is an independent functional unit.
### SFC Three-Part Structure
## Example