前端技术栈&工具
Ionic 是一个基于 Web 技术 的跨平台应用开发框架。它主要基于：
#前端
大前端:
📱 移动端开发
| 技术 | 简介 |
|---|---|
| React Native | 使用 React 编写，运行在原生应用环境中，能调用原生组件，性能接近原生 App。 |
| Ionic | 基于 Web 技术（HTML/CSS/JS）构建移动 App，通过 WebView 运行，开发效率高但性能略低于原生。 |
Ionic 是一个基于 Web 技术 的跨平台应用开发框架。它主要基于：
- HTML + CSS + JavaScript —— 核心基础
- Web Components —— UI 组件体系
- 前端框架支持
- 最初基于 Angular
- 现在同时支持 Angular、React、Vue
此外，Ionic 用于打包原生 App 时依赖：
- Apache Cordova（旧方案）
- Capacitor（官方新推荐）
简而言之： Ionic = Web 技术 + 前端框架 + Capacitor/Cordova = 构建跨平台 App（iOS/Android/Web）
💬 小程序开发
| 技术 | 简介 |
|---|---|
| 微信小程序 | 运行在微信环境中的轻量应用，使用 WXML + WXSS + JS 编写。 |
| uni-app | 使用 Vue 语法一次开发，可同时发布到微信小程序、App、H5 等多端。 |
| Remax | 使用 React 语法开发多端小程序，统一 React 技术栈。 |
🖥 桌面端开发
| 技术 | 简介 |
|---|---|
| Electron | 使用 HTML/CSS/JS 构建跨平台桌面应用（如 VSCode），基于 Chromium + Node.js。 |
| NodeGUI | 使用原生 GUI 组件渲染的桌面框架，比 Electron 更轻量、性能更高。 |
PostCSS
| 项目 | 简介 |
|---|---|
| PostCSS | 一个基于 插件机制 的 CSS 处理工具，用来在构建阶段对 CSS 进行转换、优化和增强。 |
| 核心功能 | 自身不做任何处理，而是通过插件实现功能，如自动加前缀、压缩、支持新语法等。 |
| 常用插件 | autoprefixer（自动加前缀）、postcss-preset-env（未来 CSS 语法）、cssnano（压缩优化）、postcss-nested（支持嵌套语法）。 |
| 应用场景 | 构建工具（Webpack、Vite、Rollup）中的 CSS 编译流程；Tailwind CSS 也是基于 PostCSS 实现的。 |
| 一句话总结 | PostCSS 是 “CSS 的 Babel”，通过插件系统实现代码转换和优化。 |
前端工程化
工具链：
| 名称 | 简介 |
|---|---|
| ESLint / Prettier / StyleLint | 代码质量与风格统一工具。 • ESLint：检查 JS/TS 语法与潜在错误。 • Prettier：统一代码格式（缩进、引号等）。 • StyleLint：规范 CSS / SCSS / Less 样式规则。 |
| CI/CD（持续集成 / 持续部署） | 自动化构建、测试、部署流程。常见工具：GitHub Actions、GitLab CI、Jenkins。让代码推送后自动完成构建与上线，减少人工操作。 |
| Husky / lint-staged | 提交前代码检查工具。 • Husky：在 git commit、push 等操作前执行钩子。• lint-staged：只对改动的文件执行 Lint 检查，加快速度。 |
| Babel / SWC / ESBuild | 编译与构建工具链。 • Babel：传统 JS 编译器，将 ES6+ 转为兼容旧浏览器的代码。 • SWC：Rust 编写的高速编译器，比 Babel 快很多。 • ESBuild：Go 编写的超快打包器，常用于开发阶段的快速构建。 |
TypeScript:
必学。不要求非常会做体操，简单的类型要会写。然后项目开始用 TypeScript 重构。
架构：
| 名称 | 简介 |
|---|---|
| Monorepo | 一种将多个项目或包统一管理在同一个代码仓库中的架构方式，便于代码复用、依赖共享和团队协作。常见工具：pnpm workspaces、Nx、Turborepo。 |
| 微前端（Micro Frontends） | 将大型前端项目拆分为多个独立可运行的子应用，每个子应用可独立开发、部署与更新。常见方案：qiankun、single-spa、Module Federation。 |
| 独立组件库 | 将通用 UI 组件、业务组件抽离成独立库，便于多个项目共享与统一风格。常见工具链：Storybook、Rollup、Vite。 |
| SSR / SPA / CSR / SSG，同构实践 | SPA（单页应用）：仅在客户端渲染，典型代表 React、Vue。 CSR（客户端渲染）：页面内容由浏览器执行 JS 渲染。 SSR（服务端渲染）：首屏由服务端生成 HTML，提升首屏性能与 SEO，代表框架：Next.js、Nuxt。 SSG（静态站点生成）：构建时生成静态 HTML，加载快且部署简单，如 Astro、Next.js 静态模式。 同构（Isomorphic）：客户端与服务端共享同一套代码逻辑，实现前后端统一渲染。 |
Font Awesome
当 Font Awesome 刚推出（大约 2012 年）时，它的核心理念是：
“用 字体（font） 的方式来展示图标（icons）。”
也就是说：
- 每一个图标其实是一个字体字符（glyph）；
- 浏览器加载
.woff/.ttf等字体文件；- 显示图标时，只是用 CSS 把对应的“字体字符”显示出来；
- 所以这些图标都是用字体技术实现的图标。
于是，它被命名为 Font Awesome（意为：很棒的字体）， 因为它是一种“用字体渲染出来的超棒的图标集”。
| 名称 | 简介 |
|---|---|
| Font Awesome | 一个 最流行的图标字体库，用于网页和应用中的矢量图标展示。通过 CSS 类名即可快速插入图标，无需导入图片。 |
| 特点 | 提供数千个免费和专业图标（社交、操作、品牌等）。 支持 SVG 与 Web Font 两种方式。可通过 ::before 伪元素或 <i> 标签使用。兼容 React、Vue、Angular 等框架。 |
| 示例 | <i class="fa-solid fa-user"></i> |
| 安装 | CDN 引入：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">NPM 安装： npm install @fortawesome/fontawesome-free |
| 常用分类 | Solid（实心）：fa-solid fa-xxxRegular（线框）： fa-regular fa-xxxBrands（品牌）： fa-brands fa-xxx |
Headless UI
无样式的交互逻辑组件库（和 Tailwind 最配）
💡 核心理念
“逻辑和样式分离”。 它提供交互逻辑（如弹窗开关、焦点管理、ARIA无障碍）， 但不提供样式。你用自己的 CSS（通常是 Tailwind）去渲染外观。
📦 典型组件
<Dialog />（模态框）<Menu />（下拉菜单）<Listbox />（选择器）<Transition />（动画控制）
其他
- 了解 CSS 预处理器是什么，解决了什么问题（Less、SCSS、Stylus 等）
- CSS Module 是什么，解决了什么问题。
- CSS in JS 是什么。
评论
评论加载中……