前端开发环境准备

Posted 2023-04-23 EvilChan

目录

• scoop
  • 安装到指定目录（推荐）
• git
• node
  • 配置国内镜像
• vscode
  • 推荐安装插件
  • 字体安装
  • 编辑器配置
• Windows Terminal
• NxShell（安利）

前情提示，适合有点计算机基础的，然后尽量有自己的梯子

scoop

个人推荐的windows安装包管理器
官网传送门

安装到指定目录（推荐）

下方命令建议在桌面路径下执行

irm get.scoop.sh -outfile \'install.ps1\'

-ScoopDir指定scoop的路径

.\\install.ps1 -ScoopDir \'D:\\tools\\Scoop\'

git

个人推荐安装mingit

scoop安装（要点运气，国内时不时墙了Github）

scoop install mingit

备用方案：git GitHub传送门

node

scoop安装（要点运气，国内时不时墙了Github）

scoop install nodejs-lts

备用方案：下载传送门

配置国内镜像

npm config set registry https://registry.npmmirror.com

vscode

官网传送门

推荐安装插件

• Auto Complete Tag
• EditorConfig for VS Code
• Error Lens
• ESLint
• GitLens — Git supercharged
• Live Server
• Path Intellisense
• Prettier - Code formatter
• Todo Tree
• vscode-icons

字体安装

字体下载传送门
个人比较喜欢JetbrainsMono字体，Nerd Font里自带一些icon可以配合windows terminal显示

编辑器配置

  "editor.fontFamily": "\'JetbrainsMono Nerd Font Mono\'",// 可选
  "editor.fontLigatures": true,
  "editor.fontSize": 16,
  "editor.linkedEditing": true,
  "files.encoding": "utf8",
  "files.eol": "\\n",
  "workbench.colorTheme": "Default Dark+",
  "workbench.iconTheme": "vscode-icons",
  "editor.unicodeHighlight.allowedLocales": 
    "zh-hans": true
  

Windows Terminal

去microsoft store下载即可，windows11系统自带

NxShell（安利）

去microsoft store下载即可，好用的ssh工具，ftp、sftp工具

前端框架选型

一、项目的实施周期

技术准备期

• 架构设计
• 概念验证（poc）：架构的原型证明
• 迭代0：搭建完整环境
• 示例项目代码：体现规范与原则

业务回补期

• 追补业务
• 测试：实施测试策略
• 上线准备
• 第一次部署：验证部署架构
• 提升团队能力

成长优化期

• 偿还技术债务
• 优化开发体验
• 带来技术挑战
• 架构完善及演进

---

二、架构的设计

1. 收集利益相关者的需求。倾听业务人员、项目负责人等相关者的需求，进行用户访谈，收集相关的需求
2. 与相应的技术人员（如开发人员、测试人员）讨论，了解架构上的潜在限制。
3. 寻找潜在的可行性技术方案。
4. 整理出功能列表中的功能需求和跨功能性需求。
5. 找出会严重影响开发的风险点。
6. 和技术委员会、利益相关者反复确认方案（可选）。
7. 对架构设计进行概念证明。
8. 细化架构的部分实施细节。
9. 结合技术和业务，进行需求排期。

---

 

三、收集架构需求

1.了解相关者利益

• 高层领导 组织战略
• 产品负责人 按时上线
• 项目经理 所需要资源，预算、人力
• 业务分析人员  项目的迭代计划
• 测试人员 测试策略
• 技术负责人 架构的设计和演进

2.寻找架构的关注点

• 性能 性能需要达到怎样的性能指标、可以实现多少用户的并发
• 安全 如何保障用户安全、如何应对客户端攻击、如何应对服务端攻击
• 平台化 是否需要作为一个平台，来承载其他系统
• 代码维护 是否稍微有经验的开发人员都能快速上手
• 用户体验 用户体验是否比其他几个维度更重要

3.明确跨功能需求

• 从源头划分：运行质量（安全性、易用性） 演进质量（软件可测试性、可维护性、可扩展性、可伸缩性）
• 性能（后端）指标相关（支持的并发数、接受的宕机时间）：可用性、可维护性、可变性、容错性、可伸缩性
• 前端应用（兼容性、跨平台的相关需求）：浏览器的支持范围、移动端设备的支持版本

4.罗列技术风险点

• 技术风险
• 第三方系统集成
• 受限制的线上运行环境

---

 

四、前端框架选型

　　前端框架选型，

　　出现在项目准备期和成长优化期，

项目准备期的前端框架选型：

　　是架构设计1~6步中的一个决策，

　　例如我们决定支持早期的IE8浏览器（兼容性），那么就无法选择流行的前端框架React、Vue、Angular，便不得不从jQuery、Knockout、Backbone中选择。

　　例如我们的项目的周期特别长，维护成本大于开发成本，我们选择TypeScript + React。

　　例如团队中的核心是测试人员，为了降低管理成本，那么在技术选型的更偏向于测试人员的技术栈。