游乐游手机版
首页/前端开发/文章详情

Vue完整项目实战：从零搭建组件化路由的现代前端应用

时间：2026-06-20 09:36
通过Vite构建工具、VueRouter路由和组件化架构，从零搭建包含多页面、路由导航的现代前端应用，实现无刷新页面切换。项目采用ESM模块化，包含入口文件、路由配置、根组件及views目录下的页面组件，形成完整开发骨架。

前言

上回我们把 Vue 的响应式数据、ref、还有 Todos 任务清单都过了一遍，但说到底，那些都只在一个文件里打转——就像是在练习册上画画，还没真正盖房子。

今天咱们要搞点真家伙：一个拥有多页面、路由导航、组件化架构的现代前端应用。别看它小，麻雀虽小五脏俱全，Vue 3 项目开发的核心骨架一个不落：

  • Vite 构建工具 —— 现代前端工程化的基石；
  • Vue Router —— 前端路由，实现无刷新页面切换；
  • 组件化架构 —— App.vue + views 目录结构；
  • ESM 模块化 —— import/export 这变钱代 JS 规范。

Vue 完整项目实战：从 0 搭建一个组件化 + 路由的现代前端应用

一、项目结构：一个 Vue 项目的"五脏六腑"

 复制代码all-vue/
├── public/
│   └── fa vicon.svg
├── src/
│   ├── router/
│   │   └── index.js        # 路由配置
│   ├── views/
│   │   ├── Home.vue         # 首页组件
│   │   └── About.vue        # 关于页组件
│   ├── App.vue              # 根组件
│   ├── main.js              # 入口文件
│   └── style.css            # 全局样式
├── index.html               # HTML 入口
├── package.json
└── vite.config.js           # Vite 配置

文件/目录职责类比
index.html整个应用的 HTML 入口房子的地基
main.jsJS 入口，创建 Vue 应用实例房子的总开关
App.vue根组件，包裹所有页面房子的框架
router/index.js路由配置，决定 URL 对应哪个页面房子的门牌号
views/*.vue具体的页面组件房子的各个房间
style.css全局样式房子的装修风格
vite.config.js构建工具配置施工图纸

二、HTML 入口：一切的起点

 复制代码
html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/fa vicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>all-vuetitle>
  head>
  <body>
    
    <div id="app">div>
    
    <script type="module" src="/src/main.js">script>
  body>
html>

逐行解析：

 复制代码<div id="app">div>
  • 这就是 Vue 的挂载点——一个空的 div。Vue 会把整个 App.vue 组件渲染到这里，页面上其他内容都会被它接管。
 复制代码<script type="module" src="/src/main.js">script>
  • type="module" 表示使用 ESM（ES Modules）规范。为什么 Vite 要这么搞？因为 Vite 的开发服务器直接依赖浏览器的原生 ESM 能力，无需打包，所以 启动快得像闪电。

三、入口文件 main.js：Vue 应用的"总开关"

 复制代码// main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router';createApp(App)
  .use(router)  // 启用路由
  .mount('#app') // 挂载到 #app

逐行拆解：

 复制代码import { createApp } from 'vue'
  • Vue 3 用 createApp 创建应用实例，不再是 Vue 2 的 new Vue()。这是一个工厂函数，返回一个应用实例对象。
 复制代码import './style.css'
  • 引入全局样式，Vite 会处理 CSS 的加载，这个样式对整个应用的所有组件生效。
 复制代码import App from './App.vue'
  • 引入根组件 App.vue。.vue 文件是 Vue 的单文件组件（SFC），里面包含了模板、脚本和样式三件套。
 复制代码import router from './router';
  • 引入路由实例，路由是一个独立模块，负责 URL 和页面的映射。
 复制代码createApp(App)
  .use(router)
  .mount('#app')
  • 链式调用：createApp(App) 创建实例 → .use(router) 安装路由插件 → .mount('#app') 挂载到 DOM。.use() 返回的还是同一个实例，所以可以继续调用。

四、路由配置：URL 和页面的"门牌号"

 复制代码// router/index.js
import {
  createRouter,        // 创建路由实例
  createWebHashHistory // 路由模式
} from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';const routes = [
  {
    path: '/',           // URL 路径
    name: 'Home',        // 路由名称（可选，用于命名导航）
    component: Home      // 对应的组件
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];const router = createRouter({
  history: createWebHashHistory(), // Hash 模式
  routes                           // 路由配置
})export default router;

关键点来了：

  • createRouter 和 createWebHashHistory 是 vue-router 的两个核心函数。
    Hash 模式 URL 会带 /#/，好处是无需服务器配置，兼容性最好。
  • routes 数组定义了 URL 到组件的映射。每个路由都有 path（路径）、name（名称，方便编程式导航）、component（要渲染的组件）。
  • 还有另一种 History 模式（createWebHistory()），URL 不带 #，更美观，但需要后端服务器配合处理 404 问题。
模式APIURL 格式特点
Hash 模式createWebHashHistory()/#/about不需要服务器配置，兼容性好
History 模式createWebHistory()/aboutURL 更美观，需要服务器配置

五、根组件 App.vue：所有页面的"容器"

 复制代码

核心部件解析：

  • Home：这是 vue-router 注册的全局组件，最终渲染成 Home。点击它时不会刷新页面，而是通过 Ja vaScript 切换路由，实现无刷新跳转。
  • ：路由的出口，匹配到的页面组件会渲染在这里。访问 /#/ 时渲染 Home.vue，访问 /#/about 时渲染 About.vue——它是动态的，跟随 URL 变化。

六、页面组件：views 目录下的各个"房间"

 复制代码


 复制代码

这两个是最简单的页面组件，目前只有