Vue3 Blog Project
This chapter takes you from scratch to create a Vue3 blog project using Vite, and helps you understand the role of every file in the project.
Environment Preparation
Before you start, make sure Node.js is installed on your computer.
Node.js is a JavaScript runtime environment that allows us to run JS code outside the browser.
Vue3's development toolchain (Vite, npm) relies on Node.js.
Check whether Node.js is installed
Open a terminal (use CMD or PowerShell on Windows, Terminal on Mac) and enter the following command:
$ node -v v20.10.0
If it shows a version number (recommended v16 or above), it is installed.
If not, go tonodejs.orgDownload the LTS version and install it.
Installing Node.js automatically includes npm (Node package manager).
Verification command:
npm -v
Create a Vue3 project
Vue officially recommends usingcreate-vuethe scaffolding tool to initialize the project.
In the terminal, go to the directory where you want to place the project and run:
npm create vue@latest blog-app
After running, a series of options will appear. Select them 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 | Routing will be used later |
| Add Pinia? | Yes | State management, will be used later |
| Add Vitest? | No | No testing needed for now |
| Add ESLint? | No | Beginners don't need it for now |
After making the selections, run the following commands in order as prompted:
$ cd blog-app $ npm install $ npm run dev
At this point, the browser will automatically open http://localhost:5173. If you see Vue's default welcome page, the project started successfully.
npm installIt will download all dependency packages to the node_modules directory according to package.json. This step requires an internet connection and may take a few minutes on first run.
Detailed explanation of project directory structure
Open the blog-app folder and you will see the following structure:
blog-app/ ├── index.html # 入口 HTML 文件 ├── package.json # 项目配置与依赖列表 ├── vite.config.js # Vite 构建工具配置 ├── public/ # 不经过编译的静态资源 ├── src/ │ ├── main.js # JS 入口，创建并挂载 Vue 应用 │ ├── App.vue # 根组件，所有页面的外壳 │ ├── assets/ # 需要编译的静态资源（CSS、图片） │ ├── components/ # 可复用的 Vue 组件 │ ├── views/ # 页面级组件（路由对应的页面） │ ├── router/ # 路由配置 │ └── stores/ # Pinia 状态管理
Purpose of core files
index.html— The entry file accessed by the browser.
Vite automatically injects 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 (router, state management), and mounting the application to the HTML page.
src/App.vue— The root component.
It is the outermost container of all pages, usually containing a navigation bar, footer, and router outlet.
Single File Components (SFC)
In Vue, each.vuefile 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
// Part 3: Logic — write JS here
const message = 'Hello Vue3!'
</script>
<template>
<!-- Part 1: Template — write HTML here -->
<h1>{{ message }}</h1>
</template>
<style scoped>
/* Part 2: Styles — write CSS here */
h1 {
color: #427DB8;
}
</style>
The order of these three tags can be arbitrary, but the industry convention is:script → template → style。
| Block | Purpose | One-sentence understanding |
|---|---|---|
<script setup> | Write JS logic, define data and methods | Controls what the component does |
<template> | Write HTML structure, bind data | Controls what the component looks like |
<style scoped> | Write CSS styles | Controls whether the component looks good |
scopedThe `scoped` attribute makes the current component's styles apply only to itself and will not pollute other components. This is one of the core features of Vue single-file components.
Template syntax vs JSX
Vue uses by defaulttemplate syntaxto build interfaces.
Template syntax is written in<template>HTML with Vue-specific directives.
| Feature | Template syntax | JSX |
|---|---|---|
| Syntax form | HTML + Vue directives | Writing HTML-like code in JavaScript |
| Learning cost | Low, close to native HTML | Requires understanding of the JSX compilation mechanism |
| Flexibility | Medium, declarative | High, can be freely manipulated with JS |
| Vue's recommendation level | Recommended by default | Optional support |
| Applicable scenarios | Most page development | Requires complex logic to dynamically generate UI |
This tutorial uses template syntax throughout, because it is the most natural and beginner-friendly way to write Vue.
Hands-on: Clear the template and write the blog skeleton
Now clear the default generated App.vue content and replace it with the basic skeleton of our blog.
Example
// Logic will be added here later
</script>
<template>
<div id="app">
<!-- Top navigation bar -->
<header class="navbar">
<h1>My Blog</h1>
<nav>
<a href="/">Home</a>
<a href="#">About</a>
</nav>
</header>
<!-- Main content area -->
<main class="container">
<p>Blog content will be displayed here</p>
</main>
<!-- Footer -->
<footer class="footer">
<p>© 2024 My Blog. Powered by Vue3.</p>
</footer>
</div>
</template>
<style>
/* Global reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f5f5f5;
color: #333;
}
/* Navigation bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 40px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.navbar h1 {
font-size: 24px;
color: #427DB8;
}
.navbar a {
margin-left: 20px;
text-decoration: none;
color: #333;
}
/* Main content area */
.container {
max-width: 960px;
margin: 40px auto;
padding: 0 20px;
}
/* Footer */
.footer {
text-align: center;
padding: 20px;
color: #999;
border-top: 1px solid #eee;
}
</style>
After saving, the browser will automatically refresh, and you will see a clean blog skeleton: top navigation bar + middle content area + bottom footer.
This is the starting point for all subsequent chapters.
Chapter summary
In this chapter, you completed three things: created a Vue3 project with Vite, understood the directory structure and the SFC three-part structure, and wrote the basic HTML skeleton of the blog.
Core takeaway: know that a.vuefile consists of three parts: template / script / style, and how to get a Vue project running.