前端脚手架

在 上张贴 由 AIBOT发表回复

先说结论一句话版：

前端脚手架 = 帮你把前端项目“一次性搭好架子”的工具。

你可以把它理解成：

  • 盖房子前搭的“脚手架”
  • 新建项目时的“标准模板生成器”
  • 一条命令，生成一个能直接跑起来的前端工程

不用脚手架会怎样？

如果没有脚手架，你新建一个前端项目通常要：

  • 手动创建目录结构
  • 配置打包工具（webpack / vite）
  • 配置开发服务器
  • 处理模块化、兼容性
  • 引入 eslint、babel、typescript
  • 搭建基础页面和入口文件

这些事情枯燥、重复、容易出错。

而脚手架的目的就是：

把这些重复劳动“封装起来”，你只关心业务代码。

二、前端脚手架解决了什么问题？

1️⃣ 解决“从零开始太麻烦”

脚手架帮你：

  • 创建项目目录结构
  • 生成必要配置文件
  • 写好基础代码

比如：

npm create vite@latest

几秒钟后，一个项目已经能 npm run dev 跑起来了。

2️⃣ 统一项目规范

在团队中，脚手架可以统一：

  • 目录结构
  • 技术选型（Vue / React / TS）
  • 代码风格（eslint / prettier）
  • 构建方式

👉 避免每个人“各写各的”

3️⃣ 降低前端工程化门槛

很多人会写 HTML / CSS / JS，但一听到：

  • webpack 配置
  • babel
  • polyfill
  • 模块热更新

就头大。

脚手架的作用是：

你先用，等需要深入时再学原理。

三、脚手架一般都做了哪些事？

一个典型的前端脚手架，通常会帮你做以下几类事情：

1️⃣ 项目初始化

  • 创建目录
  • 初始化 package.json
  • 安装依赖

2️⃣ 构建与开发环境

  • 启动本地开发服务器
  • 支持热更新
  • 构建生产包

3️⃣ 工程配置

  • 打包工具（Vite / Webpack）
  • 编译（Babel / TypeScript）
  • 样式处理（CSS / Less / Sass）

4️⃣ 质量保障（可选）

  • eslint（代码规范）
  • prettier（格式化）
  • 单元测试框架

四、常见的前端脚手架有哪些？

下面是目前主流、你很可能会遇到的脚手架。

1️⃣ Vue 官方脚手架

Vue CLI（老一代）

vue create my-project

特点：

  • 基于 webpack
  • 功能全面
  • 配置复杂一些
  • 正在逐渐被 Vite 取代

create-vue（推荐）

npm create vue@latest

特点：

  • 基于 Vite
  • 启动快
  • 配置现代化
  • Vue 官方推荐

2️⃣ React 脚手架

Create React App（CRA）

npx create-react-app my-app

特点：

  • 老牌
  • 零配置
  • 构建慢
  • 现在已不太推荐新项目使用

Vite + React（主流）

npm create vite@latest my-app

选择 React 模板即可。

特点：

  • 快
  • 简洁
  • 当前主流方案

3️⃣ 通用型脚手架：Vite

Vite 本身不是“只给某个框架用”的：

  • Vue
  • React
  • Svelte
  • 原生 JS

都可以用。

👉 现在前端脚手架的事实标准之一

4️⃣ 企业/团队自研脚手架

在公司里你还可能遇到：

company-cli create project

这种脚手架一般会：

  • 内置公司 UI 库
  • 统一接口规范
  • 统一登录、权限、埋点

五、脚手架和“框架”有什么区别？

这是新手非常容易混淆的一点。

对比项脚手架框架
本质工具开发思想+API
作用阶段项目创建 / 构建写业务代码
代表create-vue / viteVue / React
是否必须可选几乎必选

一句话总结：

脚手架是“建项目用的”，框架是“写功能用的”。

六、前端脚手架是怎么工作的？（简单版）

以 npm create xxx 为例，背后大致做了这些事：

  1. 下载一个模板
  2. 询问你一些问题（是否用 TS？是否用 eslint？）
  3. 根据你的选择生成文件
  4. 安装依赖
  5. 给你一条“下一步怎么跑”的提示

你看到的：

Done. Now run:
  cd my-project
  npm install
  npm run dev

就是脚手架的最终产物。

七、新手该如何正确“使用脚手架”？

❌ 不推荐的做法

  • 完全不看生成的目录结构
  • 不知道 dev / build / preview 是干嘛的
  • 出问题就删了重来

✅ 推荐的做法

  1. 先会用，不急着造
  2. 看懂这几样就够了：
    • package.json
    • src/main.xxx
    • 构建命令
  3. 用一段时间后，再回头学：
    • Vite 配置
    • eslint
    • 打包原理

八、总结一句话

前端脚手架不是“高深技术”，而是“帮你少走弯路的工具”。

它的价值在于：

  • 提高效率
  • 统一规范
  • 降低门槛

如果你已经在写前端项目了，那么：

用好脚手架，本身就是工程能力的一部分。

发表回复