开始搭建工程化项目
🎯 引言
学会这篇文章，我能了解传统前端项目和工程化项目的区别，掌握常用的工程化工具，知道如何一步步搭建一个现代前端工程化项目，提升开发效率和代码质量。
🏚 传统模式的项目结构是怎样的？
以前，很多刚开始做网页的小伙伴，是这样写项目的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是正文部分。</p>
</body>
</html>
所有代码集中在几个大文件里，直接写在一起，页面结构、样式和逻辑混杂。可能 CSS 和 JS 都写进了 index.html，或者分开几个文件。项目小的时候还凑合，但一旦代码多起来，维护和协作就变得困难：
- 文件内容容易混乱，没有层次感
- 代码复用差，功能耦合严重
- 没有构建流程，修改后上线很麻烦
🏗 工程化的项目结构是怎么样的？
工程化项目讲究结构清晰，有分工。典型的目录结构大概长这样：
{
"name": "my-project",
"dependencies": {
"vue": "^3.3.10"
}
}
my-project/
├─ dist/ # 构建后生成的文件夹，生产环境代码放这里
├─ node_modules/ # 项目依赖包
├─ public/ # 静态资源，比如图片、favicon 等
├─ src/ # 源代码，所有核心的页面、组件、样式、脚本放这里
│ ├─ components/ # 组件文件夹，存放可复用的 UI 组件
│ ├─ styles/ # 样式文件夹，存放 CSS 或者预处理文件
│ ├─ utils/ # 工具函数
│ ├─ App.vue # 入口文件
│ └─ main.js # 主入口，挂载页面
├─ package.json # 项目配置和依赖管理
├─ webpack.config.js# 构建工具配置文件（如果用 webpack）
└─ .eslintrc.js # 代码规范配置文件
这样的结构把代码拆分得清清楚楚，逻辑分明，有利于协作和维护。每个部分都职责单一，比如组件只负责 UI，工具函数只写通用逻辑。
⚙️ 工程化需要用到什么工具？
搭建前端工程化项目，常用的工具和技术有：
- 包管理器：用来管理项目依赖，常用 npm 或 yarn。
- 模块打包工具：把多个模块代码打包成浏览器能识别的文件。常见有 webpack、Vite、Rollup。
- 代码规范工具：保证代码风格统一，常用 ESLint、Prettier。
- 组件框架：帮助构建 UI，常见 React、Vue、Angular。
- 预处理器：写更灵活的 CSS，比如 Sass、Less。
- 自动化脚本：用 npm script 或其他工具实现自动打包、测试、部署流程。
- 版本控制工具：如 Git，方便多人协作和代码管理。
这些工具配合使用，让开发变得高效且规范。
🚀 如何从零开始搭建工程化项目？
1. 安装 Node.js
工程化项目离不开 Node.js 的支持。请先访问 Node.js 官网 下载并安装稳定版本（LTS）。安装完成后，打开终端（Terminal）检查是否成功：
node -v
npm -v
如果能看到版本号说明安装成功。
2. 创建一个新的项目目录
在任意路径下新建项目文件夹，例如：
mkdir my-project
cd my-project
3. 初始化项目配置文件
npm init
终端会提示填写一些项目配置项（如名称、版本、描述等），可以直接回车使用默认值。
运行完后，你会看到项目目录下生成了一个 package.json 文件。这个文件会记录你项目中安装了哪些工程化插件，以及对应插件版本，所以这一步是最关键的。
4. 项目初始化完成
到这里，你已经完成了一个最基础的工程化项目搭建。目录结构类似如下：
my-project/
├── package.json
5. 接下来做什么？
后续可以根据需求，安装各种工程化的插件进行使用，下一篇文章会先介绍如何在项目中安装 webpack 插件以及使用。
🧾 小节总结
- 传统项目结构简单但混乱，难维护。
- 工程化项目结构层次分明、职责清晰。
- 常用工具包括包管理器、打包器、代码规范工具和组件框架。
- 通过一系列简单步骤，可以用 Vite 快速搭建一个工程化项目。
❓ 知识问答（Q&A）
Q： 为什么要用模块打包工具？
A： 浏览器不能直接识别模块化代码，打包工具把分散的模块合并成浏览器能执行的文件。
Q： package.json 文件有什么用？
A： 它是项目的配置文件，管理依赖和自动化脚本。
🧪 小练习
- 尝试一下自己搭建一个 Node 环境，去官网下载并安装。
- 按照上面步骤，创建一个自己的工程化项目，要有
package.json
🎉 恭喜你已经掌握了如何搭建一个前端工程化项目的基本技能啦！快去实践，打造属于你自己的高效项目吧！