前端Wiki/CSS 框架/基础/为什么用 CSS 框架

引入方式与目录结构

引入框架有两条路。CDN 方式：一个 <link> 引入 CSS、一个 <script> 引入 JS，双击 HTML 就能跑，适合学习和原型；缺点是无法定制主题、体积不可控。

npm 工程方式：正式项目标准做法，npm install bootstrap 后在入口 JS 里 import，可以配合 Sass 定制主题、按需引入组件、享受构建优化。Tailwind 则必须走 npm 流程（它需要在构建时扫描代码生成工具类，CDN 版仅适合练手）。

工程项目的目录约定：src/styles/ 放全局样式与框架定制文件、src/assets/ 放图片字体、入口文件（main.js/main.ts）负责引入框架样式与全局样式，顺序是「先框架、后自己的覆盖样式」。

本节要点CDN 引入适合学习，npm 工程方式适合生产；Tailwind 必须走 npm 构建流程；自己的样式要在框架样式之后引入才能覆盖。

代码

<!-- 方式一：CDN（学习/原型，双击即用） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- 方式二：npm 工程（正式项目推荐） -->
<!-- npm install bootstrap
     main.js 中引入：
     import 'bootstrap/dist/css/bootstrap.min.css';
     import 'bootstrap';                    // JS 组件 -->

<!-- Tailwind 必须走 npm（构建时按需生成工具类）：
     npm install -D tailwindcss
     npx tailwindcss init                   // 生成配置文件
     在主 css 中：@import "tailwindcss";    // v4 写法 -->

<!-- 工程目录约定：
     src/
       styles/     全局样式与框架定制
       assets/     图片、字体
       main.js     入口：先引框架样式，再引自己的样式 -->

🔗 相关词条Bootstrap Tailwind import HTML Sass CSS 工具类 JS

📚 推荐阅读

Element Plus v2.2 组件库教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读