用 Vite 搭建现代化 Vue 3 项目：从零到工程化入门

在现代前端开发中，"工程化"已经不再是锦上添花，而是必需品。它帮助我们解决项目结构混乱、构建缓慢、调试困难等问题，让开发体验和项目可维护性都上一个台阶。

这篇文章结合一个实际的 Vue 3 + Vite 项目模板，从搭建、目录结构、开发调试到多页面路由，系统梳理一套现代前端工程化实践思路。

一、用 Vite 创建你的第一个 Vue3 项目

我们会用到一个关键角色：Vite 。

它是由 Vue 作者尤雨溪（Evan You）打造的现代前端构建工具，特点可以概括成一句话：

极速冷启动 + 极速热更新

1. 初始化项目

在终端中输入：

bash 复制代码

npm init vite

接下来按提示操作，如图：

图中已经选择默认启动了

正常的话然后进入文件目录

bash 复制代码

cd ./first-vue

启动开发服务器：

bash 复制代码

npm run dev

🛠️`npm run dev` 背后的操作

在package.json中

npm run dev 的 dev 是脚本名
npm 会在 package.json 的 scripts 里找到同名键：
json 复制代码
```
"dev": "vite"
```
然后执行这一串命令字符串：vite

所以对当前项目来说：

npm run dev = "请 npm 按照 package.json 里的配置，帮我启动 Vite 的开发服务器"。

Vite 启动开发服务器（vite dev 模式）
浏览器打开本地地址（如 http://localhost:5173/）
同时开启热更新，监听文件变化

打开浏览器访问 http://localhost:5173，你会看到一个默认的 Vite + Vue 欢迎页。

二、项目文件结构

csharp 复制代码

first-vue/
├── node_modules/
├── public/
│   ├── favicon.ico
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/         # 组件目录
│   │   └── HelloWorld.vue  # 示例组件
│   ├── views/              # 放页面级组件（自行引入）     
│   ├── App.vue             # 根组件
│   ├── main.js             # 入口文件
|   ├── style.css           # 全局样式
│   └── router/             # 存放路由配置文件 
│       └── index.js        # 路由的配置文件 
| --------
├── .gitignore
├── babel.config.js
├── package.json            # 项目的依赖、脚本和其他元数据
├── README.md
├── index.html              # 应用的主 HTML 文件
├── vue.config.js
└── yarn.lock or package-lock.json

三、引入 vue-router 实现多页面

1. 安装 Vue Router

bash 复制代码

npm install vue-router@4

2. 简单创建页面组件: `Home.vue` `About.vue`

3. 创建路由配置文件：`src/router/index.js`

js 复制代码

// router 模块 定义路由
import {
    createRouter,// 创建路由实例的工厂函数
    createWebHashHistory// hash 模式的 history 实例 路由模式
} from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];
// 实例化 负责前端路由 
const router = createRouter({
  //访问历史 hash 路由 #/about
  history: createWebHashHistory(),
  // 路由配置数组
  routes
})

export default router;

1. `const router = createRouter({...})`

const router = ...
- 声明一个常量变量 router，以后不能被重新赋值。
- 它用来保存"路由实例"，后面会在入口文件里 .use(router)。
createRouter({...})
- 调用从 vue-router 导入的工厂函数 createRouter。
- 传进去的是一个配置对象 （花括号 { ... } 里面的内容）。
- 返回值就是"前端路由实例"。

2. `history: createWebHashHistory()`

指定路由的历史模式 ：history 配置项用于决定路由如何管理浏览器的历史记录，以及 URL 的表现形式。
createWebHashHistory() ：创建Hash 模式的历史记录对象，其特点是：

1、 URL 中会带有 # 符号（比如 http://localhost:5173/#/About，正常情况下没有#）；

2、 # 后面的内容不会被发送到服务器，因此无需后端配置支持，适合快速开发或静态部署的场景；

3、兼容性好，支持所有主流浏览器（包括低版本 IE）。

4.在`main.js` 中导入并使用

js 复制代码

// vue createApp 创建一个App
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入路由实例
import router from './router'
// 现代前端应用
// 组件化，响应式
// 跟DOM树不一样
createApp(App)
    .use(router)  // 注册路由实例 启用路由
// 挂载在#app上
    .mount('#app')

也就是说：

从这里开始，浏览器会执行你的入口脚本，创建 Vue 应用，挂载到 <div id="app"></div> 上，SPA 整个就跑起来了。

5.访问 `index.html` 应用的主 HTML 文件

html 复制代码

<!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>
    <!-- 组件的挂载点 -->
    <div id="app"></div>
    <!-- 构建工作，前端界面开发的分水岭 -->
     <!-- vue 很快 ，基于最新的ESM type="module" -> 好处 只需要解析需要的文件，如果其他的文件没有用到，就不会解析 -->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

type="module" src="/src/main.js"

这是一个 ES 模块脚本，不是传统的"全局脚本"
浏览器加载 /src/main.js
看到里面 import './App.vue'、import './router' 等
它会 按需逐个请求这些被 import 的模块

四、热更新与开发工具：为什么"改完就生效"这么爽？

当你运行开发服务器后，试着去改一个页面组件里的文案，比如从：

vue 复制代码

<template>
  <div>Home</div>
</template>

改成：

vue 复制代码

<template>
  <div>Welcome to My First Vue App!</div>
</template>

保存的一瞬间，你会发现浏览器里的页面几乎立刻更新了，这就是 热模块替换 带来的体验。

它能做到：

修改组件模板 → 页面局部更新，状态尽量保持
修改样式 → 几乎实时生效
修改逻辑代码 → 尽量在不整页刷新的前提下替换对应模块

这也是为什么现在的前端开发节奏可以这么快。

必备开发工具推荐

Volar（VS Code 插件）
- 为 Vue3 提供语法高亮、类型推断、错误检查等能力
- 完美支持 <script setup> 和 TypeScript
- 如果你之前装过旧的 Vue 插件，记得禁用，避免冲突
Vue Devtools（浏览器插件）
- 可视化查看组件树
- 查看每个组件的 props、本地状态、计算属性
- 配合状态管理库还能做"时间旅行调试"

有了这些工具，你不仅"能写"，而且"写得舒服、调得清楚"。

五、全流程总结

从你按下回车执行 npm run dev 到浏览器看到 "Home / About"：

npm run dev

npm 读取 package.json → 找到 "dev": "vite" → 启动本地 Vite 开发服务器。
Vite 启动

监听根目录，接管对 index.html、/src/* 等资源的请求。
浏览器访问本地地址

Vite 返回 index.html。

浏览器解析出 <div id="app"> 和 <script type="module" src="/src/main.js">。
加载 src/main.js

浏览器请求 /src/main.js，Vite 按需编译并返回。

main.js 执行：
- 导入 Vue、样式、App 根组件和 router。
- createApp(App).use(router).mount('#app') → Vue 接管 #app 这个节点。
创建路由实例

router/index.js 中的 createRouter({ history, routes }) 被执行。配好 / → Home，/about → About 等映射关系。
**渲染根组件 **

App.vue

Vue 把 App 组件渲染进 #app。

显示出顶部导航（两个 <router-link>），中间是一个空的 <router-view> 占位符。
路由匹配 & 渲染页面组件

初始 URL 是 /#/，路由匹配到 / → 使用 Home 组件。

Home 组件的内容 <div>Home</div> 被插入到 <router-view> 里。

当你点击导航里的 "About"：
- URL 变为 /#/about
- 路由匹配到 /about → 渲染 About 组件到 <router-view>。
开发时热更新

你修改 Home.vue、App.vue、style.css 等文件时，Vite 监听到变更。

通过 HMR（热模块替换）只刷新相关组件，浏览器几乎瞬时更新。

用 Vite 搭建现代化 Vue 3 项目：从零到工程化入门

一、用 Vite 创建你的第一个 Vue3 项目

1. 初始化项目

🛠️npm run dev 背后的操作

二、项目文件结构

三、引入 vue-router 实现多页面

1. 安装 Vue Router

2. 简单创建页面组件: Home.vue About.vue

3. 创建路由配置文件：src/router/index.js

1. const router = createRouter({...})

2. history: createWebHashHistory()

4.在main.js 中导入并使用

5.访问 index.html 应用的主 HTML 文件

type="module" src="/src/main.js"

四、热更新与开发工具：为什么"改完就生效"这么爽？

必备开发工具推荐

五、全流程总结

🛠️`npm run dev` 背后的操作

2. 简单创建页面组件: `Home.vue` `About.vue`

3. 创建路由配置文件：`src/router/index.js`

1. `const router = createRouter({...})`

2. `history: createWebHashHistory()`

4.在`main.js` 中导入并使用

5.访问 `index.html` 应用的主 HTML 文件