前端面试宝典

1. 从零搭建大型 Vue3 项目架构

1. 技术栈：Vue3 + Vite + TS + Pinia + VueRouter + Axios + ElementPlus；
2. 目录规范：按功能模块化（pages/components/hooks/utils/api/store）；
3. 工程化：ESLint+Prettier 规范代码、Husky 提交校验、CI/CD 自动部署；
4. 状态管理：Pinia 分模块，组合式 API 复用逻辑；
5. 权限系统：路由守卫+动态路由+按钮指令权限；
6. 性能优化：路由懒加载、图片懒加载、gzip、CDN、虚拟滚动。

2. 前端权限系统设计（三面必问）

• 路由权限：后端返回权限路由 → 前端过滤生成可访问路由 → 动态添加；
• 按钮权限：自定义指令 v-permission 判断权限；
• 数据权限：接口参数/返回值过滤，控制数据展示范围。

3. 组件库设计方案

1. API 设计：统一 props 规范、支持插槽/事件/指令；
2. 主题系统：CSS 变量 + SCSS 变量，一键切换主题；
3. 按需加载：ES 模块 + 插件自动导入；
4. 通用性：适配多场景、支持国际化、类型提示。