组件内部状态 ：针对每个组件，确定哪些是内部状态、哪些是受控状态。内部状态适用于组件本身控制的场景，受控状态则适用于需要父级组件传递值的场景。
状态同步机制 ：例如，Ant Design 5 使用的是基于 React 的 Context 来处理跨组件的状态共享，避免在复杂场景下的 prop drilling。

样式系统与主题设计

Token System ：Ant Design 5 引入了 Token 的概念，便于通过 tokens 控制组件库的整体样式风格，提升了主题化、定制化的灵活性。
CSS-in-JS ：可使用 CSS-in-JS 实现动态样式，如 Emotion、styled-components 等，保证组件样式的隔离性和动态性。
样式优先级与覆盖 ：通过 CSS 变量和样式优先级控制，确保定制化过程中不破坏原有的设计系统。

模块设计

基础组件设计

可复用性 ：基础组件应具备高度复用性，尽量设计为无状态组件，并避免依赖于特定业务逻辑。
API 设计 ：保持 API 简洁，确保组件的输入属性（props）具备一致性，便于开发者理解和使用。

高级组件设计

组合性 ：利用组合的方式，如通过 Render Props 或者组件插槽，来实现高度自定义的组件。
组件树设计 ：模块化设计中，需明确父子组件的职责边界，例如在表单组件中，字段组件负责输入控件，而表单组件负责整体数据管理。

工具模块设计

公共工具方法 ：比如颜色处理、格式化等，可以提取成工具库独立维护。Ant Design 5 中，这些工具函数放在 @ant-design/utils 包中，便于复用。
辅助组件 ：如骨架屏（Skeleton）、加载组件（Spin）等，可以提高用户体验，保持界面的连贯性。

开发流程

项目初始化与配置

Monorepo 管理 ：使用 Monorepo 管理（如 Lerna 或 Nx）来管理组件和工具模块，便于整体维护与版本管理。
TypeScript 支持 ：使用 TypeScript 提供的静态类型检查，提升组件的健壮性，并保证在开发过程中能够即时发现类型错误。
测试工具链 ：配置 Jest、Testing Library 等测试框架，确保组件库具有较高的测试覆盖率，尤其是关键业务逻辑和状态管理部分。

组件开发流程

设计稿转换 ：从设计系统（如 Figma、Sketch）中导出设计规范，转换为组件开发的基础，确保视觉和功能的还原度。
组件编码 ：编写组件代码，关注复用性、性能优化等。同时在编码过程中实时进行单元测试，保证功能正确性。
dumi 文档 ：利用 Dumi 展示组件的不同状态和用法，为开发者提供直观的组件库使用指南。

持续集成与交付

CI/CD 配置 ：配置 GitHub Actions 或 GitLab CI 等工具，实现持续集成与自动化测试。每次代码提交后自动运行测试，并在通过后发布到 NPM。
版本管理 ：在版本管理中应用 SemVer 规范，根据功能新增、Bug 修复、重构等进行版本号递增。

性能优化

代码拆分 ：Ant Design 5 使用了基于 ES Modules 的按需加载策略，减少首次加载体积。可以利用类似技术，在构建过程中自动进行代码拆分。
Lazy Loading ：对于大体量的组件，可以在特定场景下采用 lazy loading，按需加载组件，提升首屏渲染性能。
压缩与 Tree Shaking ：通过 Babel 或 Webpack 配置，进行代码压缩和 Tree Shaking，删除未使用的代码，减小最终打包体积。

文档与用户支持

文档结构 ：提供清晰的文档结构，如基础教程、API 参考、常见问题等，帮助开发者快速上手。
示例代码 ：提供丰富的组件用法示例，便于用户理解和参考。
活跃的社区 ：通过 GitHub Issues、Discussion、Discord 等建立活跃的社区，及时响应用户的问题和反馈。

【中高级】请从零到一实现一个组件库基础框架

技术选型与方案

包管理工具：pnpm workspace - 实现多包管理，提升安装速度并减少磁盘空间占用。
组件库开发语言：TypeScript - 提供类型安全，增强代码健壮性，并支持静态类型检查。
文档与组件展示：dumi - 构建文档站点，支持组件展示、API 文档生成以及实时预览。
构建工具：TypeScript 编译器 - 使用 tsc 进行代码编译，生成 ES 模块和 CommonJS 模块，保证兼容性。
样式管理：CSS-in-JS（可选） - 可选使用 CSS-in-JS（如 Emotion、styled-components）实现动态样式和主题化。
组件组织：模块化与分层设计 - 按模块化组织，基础组件与复合组件分离，确保复用性和解耦性。
测试框架：Jest + Testing Library（扩展） - 使用 Jest 和 Testing Library 进行单元测试和集成测试，确保组件库功能正确性。
版本控制与 CI/CD：GitHub Actions（扩展） - 配置 GitHub Actions 实现自动化测试和发布流程，保证代码提交后的质量。
构建产物发布：NPM - 使用 pnpm publish 发布构建产物，便于组件库的版本管理和分发。

构建：esbuild
整体架构：pnpm workspace 改良
CI/CD 流水线编排
docker-compose 服务编排部署

初始化项目

创建项目目录

创建一个新的项目文件夹，进入文件夹后初始化项目：

mkdir miaoma-tiny-ui
cd miaoma-tiny-ui
pnpm init

初始化 pnpm workspace

创建 pnpm-workspace.yaml 文件，将项目配置为 pnpm workspace 管理。

# pnpm-workspace.yaml
packages:
  - 'packages/*'
  - 'docs'

创建项目结构

在项目根目录下创建以下文件夹结构：

miaoma-tiny-ui
├── docs         # 文档目录
├── packages     # 组件包目录
│   └── core     # 核心组件库
└── pnpm-workspace.yaml

安装基础依赖

安装 pnpm workspace 依赖

进入项目根目录并安装 dumi 、 typescript 、 @types/react 、 react 和 react-dom ：

pnpm add dumi typescript @types/react react react-dom -w

-w 参数会把这些依赖安装到 workspace 根目录。

配置 TypeScript

在根目录下创建 `tsconfig.json`

配置 TypeScript ，确保项目组件和文档都可以使用 TypeScript 。

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ES6",
    "jsx": "react",
    "declaration": true,
    "declarationDir": "./types",
    "outDir": "./lib",
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "strict": true
  },
  "include": ["packages/*/src", "docs"]
}

创建组件库核心包

创建核心组件库目录

进入 packages/core 目录并初始化一个 package.json 文件：

cd packages/core
pnpm init

配置 `package.json`

在核心组件库的 package.json 中，配置包名、入口文件等信息：

{
  "name": "@miaoma-tiny-ui/core",
  "version": "1.0.0",
  "main": "lib/index.js",
  "module": "lib/index.esm.js",
  "types": "types/index.d.ts",
  "scripts": {
    "build": "tsc"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "typescript": "^4.0.0"
  }
}

创建组件目录和文件

在 packages/core 中创建 src 目录和一个示例组件 Button ：

packages/core
└── src
    ├── index.ts
    └── Button.tsx

`Button.tsx`

import React from 'react';

interface ButtonProps {
  children: React.ReactNode;
}

const Button: React.FC<ButtonProps> = ({ children }) => {
  return <button>{children}</button>;
};

export default Button;

`index.ts`

export { default as Button } from './Button';

构建文档系统

初始化 dumi 项目

在 docs 目录下初始化 dumi 项目：

cd docs
pnpm init

安装 dumi 相关依赖并配置 dumi 的入口：

{
  "name": "@miaoma-tiny-ui/docs",
  "scripts": {
    "dev": "dumi dev",
    "build": "dumi build"
  },
  "dependencies": {
    "dumi": "^2.0.0"
  }
}

配置 dumi 文档

在 docs 目录中创建 .dumirc.ts 配置文件：

import { defineConfig } from 'dumi';

export default defineConfig({
  title: '妙码学院'
});

添加示例文档

在 docs 目录下创建 index.md ，用于展示组件使用方法：

# My Component Library

欢迎使用 My Component Library！

## 示例

### Button

启动 dumi 开发环境

在 docs 目录下运行以下命令，启动 dumi 文档站点：

pnpm dev

访问 http://localhost:8000 可以查看组件库的文档页面。

构建与发布

构建组件库

在 packages/core 目录下执行以下命令，编译 TypeScript 代码并生成构建产物：

pnpm build

发布组件库

在 packages/core 目录中运行以下命令，将组件库发布到 NPM：

pnpm publish --access public

文档发布

文档发布可以结合 docker 与 github action 或 Jenkins 来完成。详细内容可 VIP 了解。

【专家级】如果让你架构设计一个类似 Ant Design 组件库，如何设计并落地？

Ant Design 组件库的源码目录结构概览

在设计组件库之前，先了解 Ant Design 的目录结构和各模块的功能是很有帮助的。

Ant Design 5 的源码目录结构大致分为以下几个主要部分：

components ：包含核心组件。每个文件夹是一个独立的组件，包含 index.tsx （组件实现）、 style.ts （样式）、 test.tsx （测试）等。
rc-components ：基础组件库，提供逻辑独立、无样式的基础功能组件，例如 rc-tree 、 rc-tabs 等。
styles ：Ant Design 的样式解决方案 antd-style ，实现 cssinjs ，支持主题定制与动态切换。
tools ：构建和发布工具 antd-tools ，用于打包、构建、发布和测试自动化。
scripts ：构建和发布相关的脚本，例如自动化打包、文档生成、CI/CD 脚本。
docs ：文档文件夹，主要用来管理组件文档、演示代码和网站配置。
tests ：测试文件夹，包含单元测试和集成测试。

为什么需要 RC Components？

Ant Design 使用 rc-components 是为了模块化和复用。 rc-* 系列组件是独立、低耦合的基础组件，不仅 Ant Design，其他项目也能使用，提升了代码复用性。这些组件通常包含底层逻辑（例如 rc-tree 的树形结构逻辑）而不处理样式。Ant Design 在这些基础组件之上再添加样式和特定逻辑，以满足设计系统需求。

设计一个组件库的总体思路

在设计一个类似 Ant Design 的组件库时，以下几点至关重要：

组件解耦与复用 ：考虑使用独立的基础组件库（类似 rc-components），使组件逻辑和样式分离，确保逻辑的可移植性。
UI 设计规范的统一 ：制定一套设计规范，如颜色、排版、间距等，确保组件的风格一致。
文档和示例 ：组件库的文档和示例代码是关键，用户需要清晰了解如何使用每个组件。
模块化 ：将通用逻辑抽离成独立模块，例如主题、国际化、动画等，便于复用和维护。
性能优化 ：支持按需加载、SSR、轻量化等优化手段，以提升性能和用户体验。

各个模块的详细设计与实现

基础组件模块设计

组件库需要从最常用的基础组件开始设计，如按钮、输入框、下拉菜单等。每个组件应包含以下部分：

结构：组件的 HTML 结构和基本功能。
样式：按照设计规范编写样式，并支持主题定制。
交互逻辑 ：处理用户输入和事件，如按钮点击、输入框验证等。
文档：提供清晰的组件使用说明、属性介绍和示例代码。

样式和主题模块

设计主题系统，支持自定义主题和动态切换主题。可以借助 CSS 变量或 JS-in-CSS（如 Emotion、styled-components）实现，达到按需加载、动态换肤的效果。

国际化模块

实现国际化支持，使组件库适应全球化需求。可以借助 i18n 库或自定义实现，确保组件文本、时间、货币等信息能够根据地区进行自动转换。

测试模块

测试是保证组件库质量的关键。常用的测试策略包括：

单元测试 ：测试组件的核心逻辑和功能。
快照测试 ：确保组件 UI 不被意外更改。
集成测试 ：测试组件的组合效果和边缘情况。

组件库的落地与优化

构建与发布

使用 Rollup 或 Webpack 构建，确保打包的组件库体积小、性能好。支持按需加载，降低首屏加载时间。

文档与示例站点

文档是组件库的重要部分。可以使用 dumi 、 storybook 或 next.js 构建文档站点，提供丰富的示例、代码演示和文档说明。

CI/CD 与持续集成

利用 GitHub Actions 或 Jenkins 等 CI/CD 工具实现自动化测试、构建和发布，确保组件库的质量稳定和快速迭代。

核心技术实现示例

`cssinjs` 实现

Ant Design 使用 antd-style 来实现 cssinjs ，支持动态主题切换。下面是一个基础的 cssinjs 示例：

import { createGlobalStyle } from 'antd-style';

export const GlobalStyle = createGlobalStyle`
  body {
    font-family: Arial, sans-serif;
    background-color: ${({ theme }) => theme.backgroundColor};
    color: ${({ theme }) => theme.textColor};
  }
`;

基础组件模块 - `rc-components`

以 rc-tree 为例，它是一个无样式的树形结构组件，Ant Design 通过 rc-components 组织基础逻辑，样式与 Ant Design 主题保持一致：

import Tree from 'rc-tree';
import 'rc-tree/assets/index.css';

const MyTreeComponent = () => (
  <Tree
    treeData={[
      { title: 'Node1', key: '0-0' },
      { title: 'Node2', key: '0-1' },
    ]}
  />
);
export default MyTreeComponent;

在实际开发中，Ant Design 会在此基础上通过样式装饰，使其符合设计系统规范。

打包构建 - `antd-tools`

antd-tools 是一个基于 Rollup 或 Webpack 的自定义工具包，提供自动化构建和发布功能：

// 安装 antd-tools
npm install antd-tools --save-dev

配置文件 rollup.config.js 示例：

import { defineConfig } from 'rollup';
import antdTools from 'antd-tools';

export default defineConfig({
  input: 'src/index.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs',
  },
  plugins: [antdTools()],
});

Ant Design 工程结构与技术图

⚠️ 暂不支持的文档区域，【文档小组件】

简历优化（35K+ 简历模板）

技能描述

熟练掌握 HTML、CSS、JavaScript、Typescript 以及 OOP、FP、 AOP 等设计思想
掌握样式体系构建与落地，对 css 预编译、css in js、module css 以及 utility-first CSS 有深入研究，并从零改良过样式体系以支持 SSR、SSG
熟悉 React、Vue 相关技术栈，熟悉 React、Vue 及相关技术框架的实现原理
掌握构建工具 Webpack、Vite 等，掌握编译工具 Babel，并深入理解其原理，并参与 Rspack 构建
丰富的数据可视化经验，熟悉 Canvas、svg 开发范式，理解 Echarts、Antv 原理，能根据业务需求基于 d3、zrender 开发自定义渲染引擎
丰富的跨端开发经验，熟练使用 Taro、Flutter、React-Native 开发跨端应用，对构建 hybird App 有丰富经验，深入理解跨端开发编译原理
基于 Node.js 开发脚手架、打包构建优化工具及中间件服务
掌握常用设计模式、算法与安全知识，追求开发高质量、高可维护性代码，追求极致产品体验
团队管理经验，并在项目架构设计与性能优化方面具有丰富经验
算法与编程技术
- 精通各种算法题的分类及解决方法，包括排序与查找、数据结构、动态规划、贪心算法、回溯算法、分治算法、图论算法、数学算法等。
- 重点掌握动态规划的基本概念、解题步骤和经典题目。
3D 数字孪生平台开发经验
- 熟练使用 WebGL 和 WebAssembly 技术，开发高效的 3D 渲染引擎。
- 精通正射影像和倾斜摄影技术，具备 Tile 和模型（包括白膜和精模）的处理经验，能够使用 Blender 进行模型制作。
- 熟悉材质、光效和粒子系统的实现与优化。
全面性能优化能力
- 具备打包构建优化经验，熟练使用 Webpack 进行模块打包，掌握 chunk、treeshaking、happypack、cache-loader 等优化技巧，并使用 Webpack Module Federation 进行模块联邦管理。
- 精通资源优化，能够有效进行图片、字体压缩，管理请求队列，并通过 OSS 和 CDN 提升资源加载速度。
- 具有应用性能优化经验，包括数据结构优化和应用模块更新。
- 深入了解缓存机制，熟悉强缓存（Expiration、Cache-Control）、协商缓存（Etag）和策略缓存（Service-Worker）的配置与管理。

项目描述

这个环节至关重要，很多同学不重视，简历随便写一写就开始投递了，结果投出去几百份可能一家公司面试都没有，结果就在怀疑前端行情出问题了

STAR 法则：

遇到了什么问题 question，需求
怎么评估解决方案，方案对比，方案落地 react 状态管理（redux、mobx、jotai、recoil）Vue3 -> Pinia
具体方案落地
结果反思，细节优化思考

大家先看这段描述：

技术栈：Java、Vue2、echarts、WEui、BaiduMap、JavaScript 、HTTP数据库：MySQL管理工具：SVN

责任描述：

1）产品前端研发负责人，主要负责整体样式沟通，样式调配实现；门户、管理平台、移动端、智端、可视化等前端内容实现；

2）实现组织管理、人员管理、党员关系转接、待办通知、绩效考核（复杂功能算法实现）、发展党员（25个流程）、可视化等主体功能，兼容性优化、适配1920*1080屏幕以及响应式布局实现；

3）相关功能开发，包含前后端、数据库；

4）门户框架搭建、门户整体设计、后端接口、门户前端 UI 实现等；

5）微信小程序框架搭建、小程序页面设计及开发、知识图谱技术预演；

6 ）项目经理工作辅助，包含需求沟通、UI设计沟通、交付材料项目经历整理、前端代码质量管理、部分功能设计。

深度优化一下

工作内容和成果

【 架构设计 】参与智慧管理平台整体架构设计、技术选型与方案评审，担任全栈开发，完成相关核心模块
【 企微开发 】对接企业微信生态，基于企微 SDK 完成平台支付、消息推送、机器人等功能开发
【 可视化 】主导完成平台可视化渲染引擎（可视化图表的组件，数据协议）设计与开发，基于 echarts （svgRenderer、canvasRenderer 一千万行数据的表格渲染【不能使用 虚拟滚动 】 canvas table，chunk）封装业务图表库，服务于平台可视化场景
【 地图开发 】使用百度地图 SDK，封装业务地图渲染器（MapRenderer），包含：地图撒点、地区数据下钻等功能
【 小程序与App 】基于 uniapp 实现智慧党建用户端多端开发落地，产物编译为 H5、微信小程序两端应用
【 团队基建 】推进团队业务组件库、图表库与基础库沉淀，完成 10+ 个业务组件沉淀，以此提升了团队协同开发效率
【优化】设计产品响应式系统，基于 media query 设计响应式端点规则，适配不同端应用的展示
【 自研 OA 打通 】...

STAR

【技术栈】

Java、Vue2、ECharts、WEui、BaiduMap、JavaScript、HTTP
数据库 ：MySQL
管理工具 ：SVN

【产品前端研发负责人】

情境 (Situation) ：担任产品前端研发负责人，负责门户、管理平台、移动端、智端、可视化等前端内容的实现。
任务 (Task) ：主要任务是与设计团队沟通，调配和实现整体样式，确保产品界面的一致性和用户体验。
行动 (Action) ：我协调设计与开发团队，定期召开样式沟通会，亲自进行样式的调配与实现，并负责不同平台和设备的前端内容开发。
结果 (Result) ：成功实现了多个平台的前端开发工作，提升了产品的用户体验和一致性，获得了团队和用户的高度评价。

【实现复杂功能及优化】

情境 (Situation) ：项目需要实现复杂功能算法和大规模功能模块，包括组织管理、人员管理、党员关系转接、待办通知、绩效考核、发展党员（25个流程）和可视化功能。
任务 (Task) ：负责上述复杂功能的实现，并优化其兼容性和响应式布局。
行动 (Action) ：通过设计和实现复杂算法，确保各模块的功能性；进行兼容性优化，使系统适配1920*1080屏幕和响应式布局。
结果 (Result) ：成功实现并优化了所有复杂功能，系统在不同设备和分辨率下均表现良好，提高了用户操作的流畅度和满意度。

【全面功能开发】

情境 (Situation) ：需要进行前后端和数据库的全面开发，确保系统各功能模块的无缝集成。
任务 (Task) ：开发和实现相关功能，包括前端UI、后端接口和数据库交互。
行动 (Action) ：采用Java、Vue2等技术，开发并调试各功能模块，与后端团队密切合作，确保接口的准确性和数据的一致性。
结果 (Result) ：成功完成了所有功能模块的开发和集成，系统运行稳定，性能优异，受到了客户的好评。

【微信小程序开发与知识图谱预演】

情境 (Situation) ：项目需要开发微信小程序，并进行知识图谱技术的预演。
任务 (Task) ：负责小程序框架的搭建、页面设计及开发，同时进行知识图谱的技术预演。
行动 (Action) ：使用WEui、JavaScript等技术，设计并开发小程序页面，进行知识图谱的技术预演和验证。
结果 (Result) ：成功搭建了微信小程序框架，完成了页面设计和开发工作，知识图谱技术预演顺利，通过了技术验证。

【项目经理工作辅助】

情境 (Situation) ：在项目中辅助项目经理，确保项目需求沟通顺畅，UI设计协调到位，交付材料齐全，前端代码质量高。
任务 (Task) ：辅助项目经理进行需求沟通、UI设计沟通、交付材料整理、前端代码质量管理以及部分功能设计。
行动 (Action) ：积极参与需求和UI设计的沟通，整理和管理项目交付材料，进行代码审查和质量管理，并参与功能设计。
结果 (Result) ：成功辅助项目经理完成了项目的各项工作，提高了项目的开发效率和交付质量，确保了项目的顺利进行。

其实还不够，这些项目才是求职香饽饽

你可能不具备这些项目的实战经验，很多同学写了很多年管理系统，简单增删改查项目，如果不跳出这个圈子，很难在薪资上有非常大的突破！

大厂 UI 组件库（Vue3）整体设计与开发实践(monorepo 架构)
大厂业务 Hooks 库（React 18）整体设计与开发实践(从零到一的架构、规范流程)
企业级脚手架工具开发实践
企业级文档编辑器飞书文档开发实践
前端性能、异常与行为监控
3D 可视化数字孪生低代码实战 💥
- 基于 cesium（arcGis、超图）方案的 WebGIS 开发实践
- 基于 openlayer、mapbox 开发
- 基于 WebGL 3D 可视化开发实践

年包 50W+ 薪资长线规划

核心要素

全面的技术储备
1. 框架基础
  - Vue 和 React 经验：包括 Vue3 + Typescript 和 React18（Hooks、Concurrent）
  - 掌握框架原理：React 生态库（React-Router、Redux）和 Vue 生态库原理
2. 工程化能力
  - 构建工具：Webpack、Vite、Rspack、ESBuild、swc
  - CI/CD 自动化：自动化构建和自动化部署
3. 基建能力
  - Node.js、命令行工具开发（Cli）
  - UI 库、图表库、工具库开发
4. 业务领域经验
  - 管理系统和图表类应用
  - 可视化、编辑器、云表格、低代码平台、SaaS 产品、数字孪生、三维可视化
项目经验
- 参与过至少两个大型项目，并主导过一个复杂项目
1. 管理系统：包括项目搭建、技术方案选择、技术栈构建、CI/CD 流程
2. 其他领域项目：如可视化、编辑器、云表格、低代码平台、SaaS 产品、数字孪生、三维可视化
面试表现
1. 个人介绍
  - 准备个人介绍草稿，涵盖基本信息、技术栈和项目重难点
2. STAR 法则
  - 问题描述：阐述遇到的问题或需求
  - 解决方案评估：方案对比与选择（如 React 状态管理：redux、mobx、jotai、recoil，Vue3 使用 Pinia）
  - 方案实施：具体的实施步骤
  - 反思与优化：项目反思及优化建议
3. 面试准备
  - 重点复习知识点：如 v8 内存管理、Promise A+ 规范、事件循环、this、面向对象编程原型
  - 技术储备：结合项目经验展示技术在项目中的应用
学历提升
1. 现有学历：大专
2. 未来计划：尽快取得本科证书（不需要注明具体年限）
3. 学历背景：民办学校
4. 内推建议：应对学历和工作经历问题，通过内推提升机会

补足短板

项目简单，管理后台一做就是大半年，天天 CRUD
- 看开源项目（react-hook-form ts 类型、hook 处理、状态管理、架构 Provider，keyPath）
- 找一些不错的项目练手
- 拿好的项目，学习完放在简历里， 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化
- 1.自研：15K， 2.外包：20K ，这个火坑， 灰（供需决定）
技术栈掌握不深不广，只会用 Vue2 （Vue3 + Typescript），React18（React stack reconciler）
架构、方案设计没碰过
- React，create-react-app、umi，没有真正从零到一去设计初始化过一个项目
- Vue，Vue CLI，Vite/Webpack。Vue2 CLI 创出来项目 1. webpack、2.vite
没有专精的技能或业务
- 自驱（假定自己是 Leader），项目的赢利点、商业价值【 可视化、编辑器、白板、团队基建、AI产品 】
- 与生俱来有些东西，好奇心、自驱力、清晰规划
- 我：管理平台，HPE（官网、后台管理），云表格（维格表、飞书云表格）、云编辑器（CKEditor 老【html string】）（语雀、【石墨文档】）

妙码学院——全程陪跑、督学、内推

⚠️ 暂不支持的文档区域，【文档小组件】

跨端开发 Taro（Taro 编译器 compiler、运行时 runtime）、uniapp
协同编辑器（文档类、画板类）wangEditor、CKEditor
团队基建工程（UI 库、图表库、Cli -> 产生产物 npm 包）
3D 可视化数字孪生 bigdata
低代码平台

课程体系 2.0 升级，除了基础知识夯实，融入了更多项目实战内容，包含：

企业级脚手架工具开发实践
企业级文档编辑器飞书文档开发实践
大厂 UI 组件库（Vue3）整体设计与开发实践
大厂业务 Hooks 库（React 18）整体设计与开发实践
埋点与数据监控平台实战
3D 可视化数字孪生实战 💥
- 基于 cesium 方案的 WebGIS 开发实践
- 基于 WebGL 3D 可视化开发实践

妙码学院全网独家项目实战矩阵

所有项目实战，均完全 从零到一手写 ， 纯原创 ，项目架构与编码规范真一线大厂级。

微前端在分拆原子应用场景下的落地与实践
协同编辑器从零到一架构实现
推动团队基建落地
- React UI 库
- Vue Composition API 库
- 企业级脚手架
数字孪生平台整体架构设计
企业级无代码可视化平台实践（Vue3）
低代码平台设计与实现
- 编排引擎
- 流程引擎
- 编辑器
- 代码执行器与 JavaScript 沙箱
用户行为分析 SDK 及监控可视化整体实现
可视化渲染引擎设计与实现
基于 RAG / Agent 前端 AI 应用流程编排平台

不同阶段对前端人的硬性要求

以下是对您提供的内容进行权威和专业化改写的建议：

1~3年

在此阶段，重点在于评估个人的基础知识和热情。对前端基础、计算机原理、网络通信和算法等领域的要求较高。由于在此阶段难以评估业务深度，因此更多关注基础知识的掌握程度。

关键在于通过学术教育或网络资源加强基础知识；
在简历中以多种方式展示对前端的热情，展现个人潜力；
积极探索前沿技术，关注国内外技术动态；
尝试开发小型项目或参与社区开源项目；
建立技术博客，以输出促进知识吸收。

3~5年

此阶段通常是向成为独立工程师发展的关键时期，避免重复使用有限的经验。

关注社区中关于进阶的资料和路线，强化基础知识；
深入掌握常用框架的高级用法，探索其原理；
在业务开发中不仅完成功能，还需考虑项目结构设计、封装基础工具、设计和开发基础组件；
思考提高团队效率的方法，例如：
- 集成代码检验和风格统一插件（如 eslint、stylelint、prettier、spellcheck）；
- 从工程化角度提高本地开发效率，优化webpack构建，探索esbuild、vite等工具；
- 对于多项目开发，整理差异和统一部分，建立内部脚手架以减少重复工作；
- 尝试搭建CI/CD平台，维护公司内部的通用npm包；
- 培养软技能，如沟通协作，协调各角色共同推进目标。

5年以上

进入此阶段，可能朝技术专家或管理方向发展。期望您能够独立负责高复杂度项目，突破关键技术难题。

负责技术调研，关注行业趋势，选择最优技术方案，具备决策能力；
拥有丰富的技术经验和技术储备，能够解决遇到的困难，并有自己的方法论；
协助或主导业务目标制定，合理推动项目达成预期效果；
是否具有团队领导经验，能够协调跨团队项目，处理团队成员情绪问题，解决技能分布不平衡等问题；
打造技术氛围，促进团队共同成长。

职业规划指导

评论区选取三位同学互动，其他同学也可以联系咨询老师，文字方式提供辅导解答。

【未知组件reminder】

前端前沿技术爱好者

Ant Design 组件库架构设计与开发实践，高级前端专家带你掌握基建面试技巧

【 初中级 】开发过组件库吗，请说说你的设计与开发思路（要细节）？

组件库架构设计

总体架构设计

状态管理

样式系统与主题设计

模块设计

基础组件设计

高级组件设计

工具模块设计

开发流程

项目初始化与配置

组件开发流程

持续集成与交付

性能优化

文档与用户支持

【 中高级 】请从零到一实现一个组件库基础框架

技术选型与方案

初始化项目

创建项目目录

初始化 pnpm workspace

创建项目结构

安装基础依赖

安装 pnpm workspace 依赖

配置 TypeScript

在根目录下创建 tsconfig.json

创建组件库核心包

创建核心组件库目录

配置 package.json

创建组件目录和文件

Button.tsx

index.ts

构建文档系统

初始化 dumi 项目

配置 dumi 文档

添加示例文档

启动 dumi 开发环境

构建与发布

构建组件库

发布组件库

文档发布

【 专家级 】如果让你架构设计一个类似 Ant Design 组件库，如何设计并落地？

Ant Design 组件库的源码目录结构概览

为什么需要 RC Components？

设计一个组件库的总体思路

各个模块的详细设计与实现

基础组件模块设计

样式和主题模块

国际化模块

测试模块

组件库的落地与优化

构建与发布

文档与示例站点

CI/CD 与持续集成

核心技术实现示例

cssinjs 实现

基础组件模块 - rc-components

打包构建 - antd-tools

Ant Design 工程结构与技术图

简历优化（35K+ 简历模板）

技能描述

项目描述

大家先看这段描述：

深度优化一下

STAR

其实还不够，这些项目才是求职香饽饽

年包 50W+ 薪资长线规划

核心要素

补足短板

妙码学院——全程陪跑、督学、内推

妙码学院全网独家项目实战矩阵

不同阶段对前端人的硬性要求

1~3年

3~5年

5年以上

职业规划指导

【初中级】开发过组件库吗，请说说你的设计与开发思路（要细节）？

【中高级】请从零到一实现一个组件库基础框架

在根目录下创建 `tsconfig.json`

配置 `package.json`

`Button.tsx`

`index.ts`

【专家级】如果让你架构设计一个类似 Ant Design 组件库，如何设计并落地？

`cssinjs` 实现

基础组件模块 - `rc-components`

打包构建 - `antd-tools`