前端基建、架构
项目初始化，webpack 自定义脚手架【目的：提效增质，统一规范】
vue可以使用vue-cli创建项目,但是也可以使用webpack自定义的创建前端项目
- 1:项目初始化：
npm init - 2:自定义安装项目所有的插件
// 1:安装webpack
npm i webpack webpack-cli webpack-dev-server -D
// 2:安装css解析
npm i lesss less-loader css-loader style-loader -D
// 3:安装模版解析
npm i html-webpack-plugin -D
// 4:安装处理图片的插件
npm i url-loader -D
// 5:处理TS
npm i typescript ts-loader --save-dev
- 3:新建webpack配置项
webpack.config.js //公共配置项
webpack.config.dev.js // 开发环境的配置项
webpack.config.pro.js //生产环境的配置项
- 4:配置npm 命令(配置生产环境、开发环境的打包命令)
- 5:网络请求axios的封装
代码规范（eslint + prettier + stylelint ，外加 .editorconfig 文件）
- .editorconfig文件统一编辑时的规范
- .eslitrc.js文件检测代码是否符合编码规范，语法逻辑、代码格式等
- .prettier.js文件，美化代码
- stylelint.config.js文件，处理样式
UI框架
Vue全家桶（Vue-router，Vuex）
安全防护：CSP、XSS
Git工作流
Mock数据、接口管理
单元测试
CI、CD
前端监控系统sentry
项目优化
前端负责人主要做哪些工作
- 技术指导：带领团队成员做一些技术基建相关的工作，并给成员的技术方案做一些指导意见
- 资源协调：当存在项目或者需求前端资源不足时，统一协调前端人员的工作，保证人力有效利用
- 任务分配：根据不同人员的能力情况，进行合理的任务分配，实现前端人效最大化
前端负责人在前端基础设施做哪些事情
-
开发阶段，包含了技术选型、项目创建、模板化、脚手架工具等方面的工作
-
部署阶段，如何去做自动化的CI/CD、如何将项目部署到服务器
-
质量保证，尝试使用一些自动化测试框架进行项目测试，同时对项目配置进行收敛，减少配置的修改，以保证每个项目的基础设施统一
-
如何提效，通过脚手架工具来实现零配置启动部署项目，通过模板、组件以及对应的schema调用方式来降低开发门槛和效率提升
好的架构师的任务
- 创造价值：先选一个好的挑战
- 控制风险和准备未来：把简单的东西想复杂
- 做好产品且控制成本：把复杂的东西做简单
- 做好传承：把复杂的东西讲简单
如何选择一个适合的前端框架
上线时间 、开发效率影响技术选型
- 几个星期时间做一个网站，可能 找一个模版
- 几个月时间做一个网站，选框架
- 几年时间做一个网站，造轮子 选择技术栈：构建该项目所基于的框架、主要语言、样式预处理、数据层、状态管理、测试、代码整理、构建系统等
vue、react的对比
react 组件化提高复用，虚拟DOM的操作，JSX语法 vue 简单高效，html,css编写代码
怎么与后端配合
怎么做性能优化
前端如何管理、涉及规范
代码结构
背景：团队项目有很多，一个人不可能负责一个项目，可能负责多个项目的开发。出现了规范
- 项目中的文件夹结构
- 配置或依赖文件的
- 文件类型的固定位置
- 组件内部结构
- 命名的规范
- 编码约定
自动化测试
前端项目部署上线
处理紧急bug
代码CodeReview
前端架构考虑的点
- 基础层：基础设施建设
- Gitlab进行版本控制，代码管理 、权限管理、日志查询
- 自动编译发布jenkins
- 定期备份
- 基础组件库的建设
- 应用层：贴近用户，解决某一个问题
前端工具
- Prettier:格式化工具
- ESlint：静态代码分析工具，用于检查JS和TS代码中的潜在温和和编码规范
构建工具
- webpack:模块打包器，提供插件和加载器，压缩、转换、热替换等
前端架构师的思想：（解决首屏加载速度慢问题？？？）
- 了解业务：当前业务与竞品之间的差距
- 寻找方案：SSR、预渲染、预加载等
- 评估方案：评估方案的合适度、复杂度，选出一个候选方案
- Demo开发：验证风险和方案的可行性
- 方案设计产出RFC文档
- RFC评审：确定开发和团队分工，保证方案完善可执行
- 落到实处：推进项目开发，多沟通
- 沉淀传承：整理文档、分享
- 不断演进：个性化设置
