现代前端开发工程化：Vue3 + Vite 带你从 0 到 1 搭建 Vue3 项目🚀

现代前端开发工程化：从 0 到 1 搭建 Vue3 项目 🚀

在前端开发飞速发展的今天，"工程化" 已经成为提升开发效率、保证项目质量的核心关键词。不再是拿着编辑器写几行 HTML、CSS、JS 就能搞定的时代，现代前端开发需要一套完整的工具链和架构规范。今天，我们就以 Vue3 + Vite 为例，参照下面这幅 Vue3 前端技术栈架构图 ，手把手带你走进现代前端工程化的世界，从初始化项目到实现多页面开发，让你感受到规范架构带来的丝滑体验～

一、初始化一个 Vue 项目 🔧

想要开启 Vue3 项目开发，第一步就是初始化一个规范的项目结构。这里我们强烈推荐使用vite作为构建工具，操作简单又高效！

1.项目初始化步骤

打开终端，输入以下命令，跟着指引一步步操作即可：

bash

csharp 复制代码

npm init vite

执行命令后，会出现几个关键选项需要你决策：

给项目起个名字：我们这里命名为all-vue（方便后续统一管理）
选择框架：直接选中vue（毕竟我们要开发 Vue 项目呀～）
选择版本：推荐选javascript（对新手更友好，上手成本低）

不到 10 秒，一个基础的 Vue 项目框架就搭建完成了！是不是比传统的vue create快很多？这就要归功于我们使用的构建工具 ------vite 了～

2.关于 Vite 的那些事儿 🤔

很多小伙伴可能会问："vite 到底是个啥？和 Vue 又是什么关系呢？"

简单来说，vite 是 Vue 作者尤雨溪开发的现代前端构建工具，它最牛的地方在于利用浏览器原生的 ES 模块（ESM）实现了两大黑科技：

极速冷启动：传统构建工具会先打包所有文件再启动开发服务器，而 vite 直接让浏览器去解析模块，启动速度快到飞起！
热更新：修改文件后，vite 只会更新变化的部分，不会重新打包整个项目，浏览器瞬间刷新，开发体验直接拉满～

而 Vue 和 vite 的关系，可以用 "内容" 和 "工具" 来概括：

Vue：是一套用于构建用户界面的 JavaScript 框架，专注于视图层，提供了组件化、响应式等核心能力（负责 "做什么"）；
Vite：是新一代前端构建工具，负责把你写的 Vue 代码进行打包、编译、启动开发服务器（负责 "怎么做"）。
总结来说：vue 是前端框架（负责写业务逻辑、组件、界面），而 vite 是构建工具（负责把你写的 vue 代码 "打包、编译、启动开发服务器"）。

打个比方：如果 Vue 是画笔，那 vite 就是调色盘和画板，帮你更高效地创作～

3.启动项目：一行命令的事儿 🚀

项目初始化完成后，还需要安装依赖并启动开发服务器。进入项目目录，执行以下命令：

bash

bash 复制代码

# 进入项目目录
cd all-vue
# 安装依赖
npm i
# 启动开发服务器
npm run dev

这里的npm i会根据项目根目录下的package.json文件安装依赖。打开package.json看看，里面记录了项目的核心信息：

json

json 复制代码

{
  "name": "all-vue", // 项目名称
  "dependencies": {
    "vue": "^3.5.24", // Vue核心依赖
    "vue-router": "^4.6.4" // 路由依赖（后面会用到）
  },
  "devDependencies": {
    "vite": "^7.2.4" // 开发环境依赖：vite构建工具
  },
  "scripts": {
    "dev": "vite", // 启动开发服务器的脚本
    "build": "vite build", // 打包项目的脚本
    "preview": "vite preview" // 预览打包后项目的脚本
  }
}

执行npm run dev后，终端会显示项目启动信息，通常会在localhost:5173启动服务，甚至会自动打开浏览器（这是 vite 借助 Node 的 OS 模块实现的小细节～）。更爽的是，当你修改任何文件时，浏览器会自动刷新展示最新效果，这就是前面提到的 "热更新"，再也不用手动 F5 啦！

二、优秀架构：项目的 "骨架" 有多重要？ 📐

一个优秀的项目架构就像一栋大楼的骨架，决定了它的稳定性和可扩展性。Vite 初始化的 Vue 项目，自带一套非常规范的架构，我们来一一拆解～

Vue 项目结构预览：

perl 复制代码

my-vue-app/
├── node_modules/    # 依赖包
├── src/
│   ├── App.vue      # Vue 根组件（核心）
│   ├── main.js      # 入口文件：创建 Vue 实例并挂载
│   ├── components/  # 组件目录
│   └── style.css    # 全局样式
├── index.html       # Vite 入口（区别于 Webpack，Vite 以 HTML 为入口）
├── package.json     # 脚本和依赖（含 Vite、Vue 核心依赖）
└── vite.config.js   # Vite 配置文件（可选，自定义端口、插件等）

1.根目录的 "灵魂文件"：index.html

打开项目根目录，你会看到index.html，它是整个应用的入口页面，相当于大楼的 "地基"：

html

xml 复制代码

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>all-vue</title>
  </head>
  <body>
    <!-- 组件的挂载点：Vue应用会在这里"生根发芽" -->
    <div id="app"></div>
    <!-- 加载Vue应用的入口脚本 -->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

这里有两个关键知识点：

挂载点 ：<div id="app"></div>是 Vue 应用的 "落脚点"，后续所有的 Vue 组件都会被渲染到这个元素里，它是 Vue 与原生 DOM 的唯一连接点。
ES 模块脚本 ：<script type="module" src="/src/main.js"></script>中的type="module"是 Vite 实现极速启动的核心！它告诉浏览器这是一个 ES 模块脚本，支持import/export语法，浏览器会直接按需加载模块，不用等待全量打包。

2.src 目录：前端开发的 "主战场" 📂

所有的业务代码都集中在src目录下，就像大楼里的各个房间，分工明确：

main.js：应用入口文件（相当于 "大门"，所有资源从这里进入）
App.vue：根组件（相当于 "客厅"，是所有页面的共同容器）
style.css：全局样式文件（统一管理整个应用的样式风格）
components/：组件目录（存放可复用的 UI 组件，比如按钮、卡片等）

（1）入口文件：main.js 的 "总指挥" 角色

main.js是整个 Vue 应用的启动入口，就像乐队的指挥，负责把所有资源整合起来：

javascript

javascript 复制代码

// 从Vue核心库中导入创建应用实例的方法
import { createApp } from 'vue'
// 导入全局样式（让整个应用都能用上这些样式）
import './style.css'
// 导入根组件App（整个应用的"总容器"）
import App from './App.vue'
// 导入路由模块（后面实现多页面会用到）
import router from './router';

// 创建Vue应用实例 → 启用路由 → 挂载到#app上
createApp(App)
  .use(router) // 让应用拥有路由能力
  .mount('#app') // 把App组件渲染到index.html的#app元素里

这几行代码看似简单，却完成了从 "创建应用" 到 "启动应用" 的全流程：先创建 Vue 实例，关联根组件App.vue，再通过mount('#app')把组件渲染到index.html的挂载点上，一个 Vue 应用就正式启动了！

（2）根组件：App.vue 的 "总容器" 作用

App.vue是 Vue 应用的根组件，所有页面和组件都会嵌套在它里面，就像一个大礼盒，装着应用的所有内容。它的结构分为三部分：模板（HTML）、脚本（JS）、样式（CSS）：

vue

xml 复制代码

<script setup>
// 这里可以写组件的逻辑代码（目前我们暂时不需要复杂逻辑）
</script>

<template>
  <div>
    <!-- 头部导航 -->
    <header>
      <nav>
        <ul>
          <!-- 路由导航链接：vue-router提供的全局组件 -->
          <li><router-link to="/">Home</router-link></li>
          <li><router-link to="/about">About</router-link></li>
        </ul>
      </nav>
    </header>
    <!-- 页面内容区域：路由出口，页面组件会在这里显示 -->
    <main>
      <router-view></router-view>
    </main>
    <!-- 页脚 -->
    <footer></footer>
  </div>
</template>

<style scoped>
/* scoped表示样式只作用于当前组件，避免样式冲突 */
</style>

可以看到，App.vue定义了应用的整体布局（头部、主体、底部），其中<router-view>是路由出口（后面讲多页面开发时会详细说），<router-link>是路由导航链接，这些都是vue-router提供的能力。

3.开发工具：效率提升的 "神器" ✨

工欲善其事，必先利其器。开发 Vue3 项目，这两个工具一定要安排上：

Volar 插件 （VS Code）：Vue 官方推出的语法提示工具，能识别 Vue3 的新语法（比如<script setup>），提供精准的代码补全和错误提示，比以前的 Vetur 好用太多！安装后，写 Vue 代码就像 "开了挂"，再也不用死记硬背 API 了～
Vue Devtools 插件（Chrome 浏览器）：调试 Vue 应用的 "显微镜"。安装后，在浏览器开发者工具里会多出一个 "Vue" 标签，能查看组件树、组件状态、路由信息等，帮你快速定位问题。比如修改组件数据后，能实时看到界面变化，调试效率翻倍！

三、如何进行多个页面开发呢？ 📄→📑

单页面应用（SPA）是现代前端的主流，但 "单页面" 不代表只有一个页面，而是通过路由实现多个页面的切换（无需刷新浏览器）。Vue 项目中，我们用vue-router来实现路由功能。

第一步：安装 vue-router

在终端执行以下命令，安装路由依赖：

bash

css 复制代码

npm i vue-router

安装完成后，package.json的dependencies里会多出"vue-router": "^4.6.4"，表示路由插件已成功引入。

第二步：配置路由规则

路由就像 "地图"，告诉应用 "访问哪个路径该显示哪个页面"。我们需要创建一个路由配置文件：

在src目录下新建router文件夹，然后在里面创建index.js（路由配置的核心文件）；
在src目录下新建views文件夹，存放页面组件（Home.vue和About.vue）。

先看页面组件的代码，非常简单：

vue

xml 复制代码

<!-- src/views/Home.vue -->
<template>
  <div>Home Page 🏠</div>
</template>

vue

xml 复制代码

<!-- src/views/About.vue -->
<template>
  <div>About Page 🔍</div>
</template>

再来看路由配置文件src/router/index.js：

javascript

javascript 复制代码

// 从vue-router中导入核心方法
import {
  createRouter, // 创建路由实例
  createWebHashHistory // 路由模式（hash模式，路径带#）
} from 'vue-router'
// 导入页面组件
import Home from '../views/Home.vue'
import About from '../views/About.vue'

// 路由规则：路径和组件的对应关系
const routes = [
  {
    path: '/', // 访问根路径（http://localhost:5173/#/）
    name: 'Home',
    component: Home // 显示Home组件
  },
  {
    path: '/about', // 访问/about路径（http://localhost:5173/#/about）
    name: 'About',
    component: About // 显示About组件
  }
];

// 创建路由实例
const router = createRouter({
  history: createWebHashHistory(), // 使用hash模式（路径带#，兼容性好）
  routes // 关联路由规则
})

// 导出路由实例，供main.js使用
export default router;

这里的createWebHashHistory表示使用 hash 模式，路径中会带#（比如#/about），好处是部署时不需要服务器额外配置；如果想去掉#，可以用createWebHistory（需要服务器支持）。

第三步：让应用 "拥有" 路由能力

配置好路由后，需要在main.js中注册路由，让整个应用都能使用路由功能：

javascript

javascript 复制代码

// 导入路由实例
import router from './router';

// 创建应用时，通过.use(router)启用路由
createApp(App)
  .use(router) 
  .mount('#app')

这一步非常关键，相当于给应用 "装上导航系统"，没有它，<router-link>和<router-view>都无法生效。

第四步：在 App.vue 中使用路由

最后，在根组件App.vue中添加路由导航和路由出口：

<router-link to="路径">：路由导航链接（相当于<a>标签，但不会刷新页面）；
<router-view>：路由出口（匹配的页面组件会在这里显示）。

代码我们前面已经见过了，再重点看一下核心部分：

vue

xml 复制代码

<template>
  <div>
    <header>
      <nav>
        <ul>
          <!-- 点击跳转到首页 -->
          <li><router-link to="/">Home</router-link></li>
          <!-- 点击跳转到关于页 -->
          <li><router-link to="/about">About</router-link></li>
        </ul>
      </nav>
    </header>
    <main>
      <!-- 页面内容会在这里显示 -->
      <router-view></router-view>
    </main>
  </div>
</template>

此时启动项目，点击导航链接，页面会在Home和About之间无缝切换，地址栏的路径也会跟着变化，这就是单页面应用的路由效果～

效果亮个相：观察界面中央和地址栏的变化

结语 🌟

到这里，我们已经完整走通了 "用 Vite 初始化 Vue3 项目→理解项目架构→实现多页面路由" 的全流程。回顾整个过程，你会发现现代前端工程化的核心优势：

工具链简化开发：Vite 的极速启动和热更新，让开发效率提升数倍；
架构规范清晰 ：从index.html到src目录，每个文件的职责明确，项目再大也不会乱；
生态完善 ：vue-router等官方插件无缝衔接，轻松实现复杂功能。

前端开发不再是 "写几行代码" 那么简单，而是一套 "工具 + 规范 + 生态" 的协同体系。掌握这些基础，你就已经跨进了现代前端开发的大门～接下来，不妨试试在这个基础上添加更多页面、组件和交互，感受 Vue3+Vite 的魅力吧！💪