Windows 11 新系统前端开发环境配置参考

2,289次阅读
没有评论

共计 6970 个字符，预计需要花费 18 分钟才能阅读完成。

目录
[隐藏]

提醒：本文最后更新于2025-07-07 14:23，文中所关联的信息可能已发生改变，请知悉！

Windows 11 新系统前端开发环境配置参考

最近更换了开发用的 Windows 台式机电脑，本文主要记录其开发环境配置的过程。

1 系统初始化、基本设置

1.1 系统初始化跳过联网离线安装

Windows 11 新系统开机后会进入安装初始化过程，其中有一个步骤要求联网且无法跳过。由于内网 wifi 有认证机制，无法法直接简单联网使用。

可通过如下方法启用离线模式：

  • 按快捷键 Shift + F10（或者Fn+Shift+F10）可以打开 cmd 窗口
  • 鼠标点击一下它获取焦点，然后输入命令：oobe\BypassNRO.cmd
  • 回车执行命令，此时Win11会重启，再进入联网的界面时，会有一个暂时跳过的选项

BypassNRO.cmd 里的命令主要就是修改注册相关项然后重启，所以也可直接执行如下命令：

reg add HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\OOBE /v BypassNRO /t REG_DWORD /d 1 /f
shutdown /r /t 0

1.2 C 盘分区

由于预装系统整个磁盘只有一个 C 盘(512GB)，于是将它分为了 C、D 两个逻辑分区。主要方法步骤为：

  • 打开资源管理器，在此电脑上右键并选择 管理，会打开计算机管理应用界面。
  • 展开值 存储 -> 磁盘管理，在磁盘分区列表右键，选择 压缩卷..。
  • 在弹出的压缩卷界面，输入压缩空间大小（给新分区的大小）。建议给 C 盘预留 200G 以上空间。我这里输入了 204800，给 C 盘留了 255G。
  • 在压缩出来的分区上右键选择新建简单卷，按默认步骤继续操作即可创建一个新的 D 盘逻辑分区。

1.3 激活为专业版

系统预装了 windows 11 家庭版，如果你有专业版的秘钥，在系统->激活界面输入序列号就可以激活为专业版。

这里是使用了内网的 kms 激活方案，首先找了一个专业版的秘钥，在激活页面升级为专业版并重启，然后打开管理员权限的 CMD 命令行，依次执行如下命令使用 KMS 激活：

cd C:\WINDOWS\system32
 
# 查看当前激活信息、系统版本
slmgr /dlv
 
# 卸载已注册的序列号
slmgr /upk
# 安装 GVLK 秘钥
slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T83GX
# 设置 MKS 服务器地址
# 这里只是一个示例，实际使用了内网企业购买和搭建的KMS激活服务器
# 需要替换为你实际可用的 KMS 服务器网址或 IP 地址(如 kms.0t.net.cn、kms.msguides.com、kms.03k.org 等)
slmgr -skms 192.168.10.100
# 执行激活请求
slmgr /ato
 
# 查询过期时间
slmgr /xpr

KMS 是微软为企业级批量许可服务提供的方案。更多关于 KMS 激活为不同系统版本的信息可从如下链接了解：

https://learn.microsoft.com/zh-cn/windows-server/get-started/kms-client-activation-keys

1.4 更改应用、文档等默认保存位置

由于存在被 C 盘膨胀支配的历史，应用、文档等都习惯放在其它分区，个人文档放在其它磁盘。修改方法：

依次点开 系统设置 -> 存储 -> 高级 -> 保存新内容的地方，将所有选项都修改至非 C 盘盘符即可。

1.5 旧电脑开启局域网共享复制文件

旧电脑为 Windows 10 系统，可以在网络共享设置中启用局域网共享以复制文件到新电脑中。步骤参考：

  • 网络 -> 高级共享设置 -> 所有网络 -> 启用共享以便可以访问网络
  • 在希望共享的文件夹或磁盘上右键，选择 共享 -> 特定用户 -> Everyone -> 读取
  • 也可以在这里统一添加文件夹共享： 计算机管理 -> 系统工具 -> 共享文件夹 -> 共享 -> 新建共享
  • 记得复制完毕后及时关闭共享设置、移除重要的共享目录，否则应设置需密码访问的共享方式

我这里将新电脑的 D 盘设置为共享，并在旧电脑里映射为本地 Z 盘驱动器。由于有数十个 git 仓库需要同步过去，之间简单的 Copy 是行不通的。正好用上了之前写的一个小工具lzwme/dir-fast-copy，效果参考下图：

Windows 11 新系统前端开发环境配置参考

2 应用安装与开发环境配置

2.1 更新 PowerShell 至最新版

系统默认的 PowerShell 为 5.1 版本，在使用 Scoop 安装有些软件时可能会报错。

配置 PowerShell

如果你喜欢 oh-my-posh 风格，可以参考该文：安装与配置 oh-my-posh

但实际体验过程中 oh-my-posh 带来的延迟太严重，所以不再考虑它，改为自定义部分配置，参考如下。

执行命令 notepad $PROFILE，在打开的配置文件中填写如下内容（参考）：

# 设置预测文本来源为历史记录
Set-PSReadLineOption -PredictionSource History
 
# 设置 Tab 键补全
Set-PSReadlineKeyHandler -Key Tab -Function Complete
# 设置 Ctrl+d 为菜单补全和 Intellisense
Set-PSReadLineKeyHandler -Key "Ctrl+d" -Function MenuComplete
# 设置 Ctrl+z 为撤销
Set-PSReadLineKeyHandler -Key "Ctrl+z" -Function Undo
 
# 设置向上键为后向搜索历史记录
# Set-PSReadLineKeyHandler -Key UpArrow -Function HistorySearchBackward
Set-PSReadLineKeyHandler -Key UpArrow -ScriptBlock {
  [Microsoft.PowerShell.PSConsoleReadLine]::HistorySearchBackward()
  [Microsoft.PowerShell.PSConsoleReadLine]::EndOfLine()
}
 
# 设置向下键为前向搜索历史纪录
# Set-PSReadLineKeyHandler -Key DownArrow -Function HistorySearchForward
Set-PSReadLineKeyHandler -Key DownArrow -ScriptBlock {
  [Microsoft.PowerShell.PSConsoleReadLine]::HistorySearchForward()
  [Microsoft.PowerShell.PSConsoleReadLine]::EndOfLine()
}
 
# 自定义 prompt 格式
function prompt {
    Write-Host " $pwd>"  -ForegroundColor:green
    return " "
}

2.2 安装 Git 及 Visual Studio 或 MSVC 工具集

在开发的过程中，很多时候都可能需要 MSVC 工具集支持。

2.3 安装和配置 Scoop

首先自定义 Scoop 安装路径（软件安装位置在 C 盘，这里指定到其他盘符）。打开 PowerShell 并执行如下命令：

# 修改当前用户应用的安装路径
$env:SCOOP='D:\scoop\user-apps'
[environment]::setEnvironmentVariable('SCOOP',$env:SCOOP,'User')
 
# 修改全局应用的安装路径(需要管理员权限的应用一般需全局安装，尽量保持放在 C 盘)
$env:SCOOP_GLOBAL='C:\scoop\apps'
[environment]::setEnvironmentVariable('SCOOP_GLOBAL',$env:SCOOP_GLOBAL,'Machine')

然后执行如下命令安装和配置 Scoop：

# install
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
# irm -useb get.scoop.sh | iex
irm https://mirror.ghproxy.com/raw.githubusercontent.com/lzwme/scoop-proxy-cn/master/install.ps1 | iex
 
# config
scoop config SCOOP_REPO https://mirror.ghproxy.com/github.com/ScoopInstaller/Scoop
scoop bucket rm main
# scoop bucket add main https://mirror.ghproxy.com/github.com/ScoopInstaller/Main
scoop bucket add spc https://mirror.ghproxy.com/github.com/lzwme/scoop-proxy-cn
 
# show help
scoop help
 
# 安装必备应用： scoop-search、aria2...
scoop install spc/scoop-search spc/aria2 spc/sudo

这里使用了我个人定制的同步加速仓库作为软件安装源 lzwme/scoop-proxy-cn，详细了解可参考该文：Scoop 的安装、使用与软件源定制。

2.3 使用 Scoop 安装应用

使用 Scoop 直接安装常用软件（不需要的行删除即可）：

  • 7zip 压缩解压缩工具
    –TortoiseGit Git 小乌龟。 sourcetree 也是一个可替代选项
  • chrome chrome 浏览器
  • FiraCode 为编程而生的等宽字体
  • JetBrains-Mono 为编程开发设计的无衬线等宽字体
  • 3270-NF A font for the nostalgic
  • vscode vscode 编辑器
  • nvm nvm-windows (这里也可以换为使用 fnm)
  • finalshell SSH 终端。如果你不喜欢它，推荐安装开源免费的 NxShell，在应用商店即可搜索和安装
  • switchhosts Hosts 切换管理
  • fiddler 抓包工具，开发助手
  • openssl TLS/SSL toolkit
  • docker
  • nginx
  • rust
  • android-studio
  • python2 python 2
  • python python 3 最新版
  • qq
  • tim
  • wechat 微信
  • WeChatWork 企业微信
  • RevokeMsgPatcher 微信/QQ/TIM防撤回补丁
  • DingTalk 钉钉
  • feishu 飞书
  • ADrive 阿里网盘
  • BaiduNetDisk 百度网盘
  • Tencent-Meeting 腾讯会议
  • WPSOffice-cn WPS
  • ffmpeg 音视频编辑的基础支持工具
  • hub USE GITHUB FROM THE COMMAND-LINE
  • act Github Actions 脚本本地执行工具
  • everything 文件与目录索引，文件快速查找
  • treesize 磁盘占用分析：空间去哪儿了
  • wiztree treesize 同类工具
  • vlc 开源的直播视频观看工具
  • Clash-for-Windows_Chinese 你懂的

可将以下安装命令保存为 D:\scoop-install.ps1 然后在 PowerShell 中执行它。有部分应用可能会因为更新信息不匹配报错无法安装，可以先删除掉再重新执行，已经安装成功的会自动跳过。

# 全局安装的工具或应用
sudo scoop install -g `
  openssl `
  JetBrains-Mono `
  FiraCode `
  3270-NF
 
# 无需管理员权限安装的应用
scoop install `
  7zip `
  nvm `
  switchhosts `
  fiddler `
  docker `
  nginx `
  rust `
  android-studio `
  python2 `
  python `
  RevokeMsgPatcher `
  ffmpeg `
  hub `
  act `
  everything `
  treesize `
  wiztree `
  vlc `
  Clash-for-Windows_Chinese

一些你想安装的工具软件可能在 scoop 仓库中是可以搜的（当前 spc 仓库源收集有 1.6w+ 应用），可通过 scoop-search 命令搜索，选择合适的版本进行安装。示例：

scoop-search jdk
scoop info jdk
scoop install orcalejdk8

2.5 手工下载安装的应用

由于 scoop 安装的应用适合使用 scoop update 进行更新，而一些常用应用可能会经常自动升级，此时就可能存在问题。
故一般来说，不需要经常升级版本的应用推荐使用 scoop 安装，重度使用并需要依赖自动更新升级新版本的应用，则推荐手工下载安装。

  • TortoiseGit
  • chrome
  • vscode
  • qq
  • tim
  • wechat
  • BaiduNetDisk
  • WeChatWork
  • DingTalk
  • feishu
  • ADrive
  • Tencent-Meeting
  • WPSOffice-cn

2.4 使用 nvm 安装 Node.js

nvm node_mirror https://npmmirror.com/mirrors/node/
nvm npm_mirror https://npmmirror.com/mirrors/npm/
nvm install 18 && nvm use 18 # 安装 Node.js 18 版本
 
npm set registry https://registry.npmmirror.com
# 安装包管理工具
npm i -g @lzwme/nrm yarn pnpm
nvm use taobao
 
# 示例：nrm 添加内网 npm 私有仓库配置
# nrm add lzw https://registry.demo.me https://lzw.me
 
# 安装个人开发辅助工具
npm i -g tsx npm-check-updates @lzwme/git-helper @lzwme/m3u8-dl

3 其他配置

3.1 git 配置

# 默认账号与邮箱
$ git config --global user.name "renxia"
$ git config --global user.email "邮箱"
 
# 生成 ssh 公私钥
ssh-keygen -t rsa
# 查看公钥（复制并配置至 gitlab、github 等）
cat ~/.ssh/id_rsa.pub

3.2 python 使用国内镜像

在当前用户目录下新建 pip/pip.ini 文件，内容为：

[global]
index-url = https://mirrors.aliyun.com/pypi/simple/
 
[install]
trusted-host=mirrors.aliyun.com

3.3 恢复右键菜单显示所有项

win11 右键菜单模式将超过x项的选项放到了”更多”中，导致许多右键操作需要多点一次菜单，非常不方便。若需改为 win10 的右键菜单模式，可参考如下方法操作。

使用管理员权限打开 cmd，然后执行命令，然后重启系统或重启资源管理器(explorer.exe)即可：

reg add "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32" /f /ve

若需恢复 win11 右键模式，可重新执行如下命令：

reg delete "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32" /va /f

3.4 常用工具缓存位置设置

对于 python、npm、yarn、pnpm 等工具，在涉及包下载时都会下载到缓存目录中，随着时间的增长，缓存文件会越来越多，占用磁盘空间。
我们可以将他们统一设置在一个目录位置下，以便于统一查看分析和快速清理。

新建目录 D:\cache，然后参考执行如下命令：

# 设置 npm 缓存目录
npm config set cache "D:\cache\npm"
# 设置 yarn 缓存目录
yarn config set cache-folder "D:\cache\yarn"
# 设置 yarn global 缓存目录
yarn config set global-folder "D:\cache\yarn"
# 设置 pnpm 缓存目录
pnpm config set store "D:\cache\pnpm"
# 设置 python 包缓存目录
python -m pip config set global.cache-dir "D:\cache\pipcache"
  • 设置 gradle 缓存目录：新增环境变量 GRADLE_USER_HOME，值为 D:\cache\.gradle。

4 小结

整个过程还是挺费时间的。由于内网限制了下载速度为 1M 以内，在使用 Scoop 批量安装应用时耗非了较多的时间。可以在旧电脑上使用 mstsc 远程协助方式连接，在工作的空隙去间歇性的配置。

在此记录以上流程备忘，也希望能对有类似情况的同学提供些许帮助。

正文完
Windows
发表至： 电脑基础
2023-03-27
 0
任侠
版权声明：本站原创文章，由 任侠 于2023-03-27发表，共计6970字。
转载说明：除特殊说明外本站文章皆由CC-4.0协议发布，转载请注明出处。
如何给手机贴膜：给手机屏幕贴保护膜的方法步骤（视频）
合理地使用 git rebase 代替 git merge 操作
几句简单代码，教你实现图片显示IP
vmware虚拟机网络配置出错提示：不能更改网络为桥接:已没有未桥接的主机网络适配器
一种自动获取并同步CK至NAS青龙面板的方法
卡巴斯基更新源：卡巴升级服务器更换地址+具体方法+图解示范
window10 自带防病毒软件 Antimalware Service Executable CPU 、磁盘和内存占用高问题
几种常见WindowsXP系统故障实用修复方法
评论（没有评论）
验证码