记录前端内网开发之新入职篇

目录

正篇:

一、nvm

二、Node

三、npm

四、Git

五、VSCode

序篇:


正篇:

再次入职依旧需要进行内网开发的工作,

重温回忆记录一下内网前端开发全套环境顺序:

1、nvm → 2、Node → 3、npm → 4、Git → 5、VSCode,一步步照着装就行。


一、nvm

下载⏬node版本管理工具nvm

简单直接:找你的前端同事或领导问一下如何下载或获取。

您好XX,我这边搭建前端开发环境,需要用到nvm的node版本管理工具,麻烦您能帮忙联系一位前端的同事提供一下或者指导一下怎么下载或者获取吗?

内网 nvm + Node 正确落地思路

内网核心痛点:

  1. 不能访问外网、没法在线拉取 nvm / Node
  2. 不能用 nvm install 在线下载版本
  3. 必须 提前在外网下载好全部离线包,拷进内网部署

内网离线安装标准操作(提前掌握,不用等别人教)

  1. 在外网可上网的电脑:
    • 下载好 nvm-windows 安装程序
    • 下载项目需要的 Node 对应版本完整 zip 包
  2. 全部拷贝到 U 盘 / 内网共享文件夹,传到你的开发机
  3. 安装 nvm 到 D 盘固定目录(D:\Program\nvm)【 nvm 最好放在系统盘根目录下 】
  4. 把离线 Node 压缩包,解压放到 nvm 目录下的 vxx.xx.xx 文件夹
  5. 内网终端执行:
bash 复制代码
nvm list
nvm use 对应版本号
  1. 手动配置好内网 npm 私有源,全程不用碰外网

内网额外避坑提醒

✅ 所有路径 全程纯英文,绝对不能有中文、空格

✅ 提前和团队对齐:统一 Node 版本、内网私有 npm 地址、全局缓存目录

❌ 不要在线执行 nvm install,内网百分百超时失败


五、目录依然沿用咱们之前规划的,完美适配内网

bash 复制代码
D:\DevProgram
├── VSCode
├── nvm           # nvm本体+所有离线node版本
├── nodejs        # nvm软链接
└── WebStudy      # 你的前端项目代码

领导通过内网的 FeiQ 共享文件将 nvm 直接传送给我了。

Setup-NVM for Windows 1.1.10 的安装步骤

一、准备(必做)新电脑初次安装则无需此步骤

先卸载电脑原有全部 node、npm,干净环境

  1. 卸载旧版 Node.js 控制面板 → 程序和功能 → 卸载所有 Node.js 相关项。
  2. 清理残留环境变量 右键「此电脑」→ 属性 → 高级系统设置 → 环境变量,删除用户 / 系统变量中所有 node/npm 相关路径。

二、下载 1.1.10 安装包(内网共享文件无需此步骤)

三、安装步骤(截图对应)

1、双击 nvm-setup.exe,同意协议 → Next

2、NVM 安装目录(建议非中文、无空格)

默认:C:\Users\用户名\AppData\Roaming\nvm

可改:D:\Program\ nvmNext。【 nvm 最好放在系统盘根目录下 】

3、Node.js 软链接目录

固定默认 C:\Program Files\nodejs 不要修改

默认:C:\Program Files\nodejsNext。【 node 路径不用管 】

4、确认设置 → Install → 完成后 Finish

四、验证安装

新开 CMD / PowerShell(必须重启终端):

bash 复制代码
nvm -v
# 输出版本:1.1.10 即成功

五、常用命令(快速上手)

bash 复制代码
# 安装指定版本(如 16.20.2 LTS)
nvm install 16.20.2

# 查看已安装
nvm list

# 切换版本
nvm use 16.20.2

# 查看可安装版本
nvm list available

内网关键配置(最重要)

打开你的 nvm 文件夹 D:\Program\ nvm 找到 settings.txt

复制粘贴写入两行国内镜像(内网防拉取外网)

bash 复制代码
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

保存关闭

环境变量自动生成

安装完毕自动生成两个系统环境变量

  • NVM_HOME
  • NVM_SYMLINK path 里面自动写入,无需手动加

二、Node

简单直接:找你的前端同事或领导问一下如何下载或获取。(FeiQ 直接共享文件传送)

离线安装 Node(内网不用在线下载)

  1. 外网电脑提前下载好需要的 node 压缩包 node14、node16、node18 常用开发版本
  2. 把解压好的 node 文件夹,放入 nvm 根目录【 D:*Program\* nvm 】 文件夹命名格式:v16.14.2 标准格式

内网常见报错解决

  1. 切换 node 提示权限不足:cmd 右键管理员运行
  2. 识别不到版本:文件夹命名必须带 v 例如 v14.18.0
  3. 项目报错缺少依赖:使用外网机器打包 node_modules 拷贝进来即可

三、npm

内网全部命令 直接复制

bash 复制代码
#查看nvm版本
nvm v

#查看本地离线所有node版本
nvm ls

#切换对应版本
nvm use 16.14.2

#查看node npm是否生效
node -v
npm -v

内网 npm 本地源配置(无网开发)

  1. 配置内网私有仓库地址

    npm config set registry=http://内网私有npm地址

  2. 禁止 npm 自动联网更新

    npm config set update-notifier false


四、Git

简单直接:找你的前端同事或领导问一下如何下载或获取。(FeiQ 直接共享文件传送)

Git 2.23.0 Setup 安装步骤

Git-2.23.0 内网专用完整安装步骤(一步步照着点就行)

1、双击打开 Git-2.23.0-Setup 安装程序 => 点击下一步

2、许可协议页面 => 直接【下一步】

3、安装路径

不要装 C 盘 ,改成 D 盘,路径不要中文、不要空格 示例:D:*Program* \Git 下一步

4、组件选择 默认全部勾选,不用改动 => 直接下一步

5、开始菜单文件夹,默认不变 下一步

6、编辑器选择【使用 Vim 默认编辑器】

内网开发统一选第一个,不要更换,下一步

7、Git 环境 PATH 配置【重点必选】

选择 第二项

Git from the command line and also from 3rd party software 意思:可以和 cmd、vscode 共用环境,内网开发标准选项,下一步

8、HTTPS 传输配置 默认第一项,下一步

9、换行符转换【内网前端必选】

选择 第一项 不自动转换换行 Checkout Windows-style,commit Unix-style 企业内网项目全部用这个,防止代码换行报错,下一步

10、终端模拟器 选择第二项 Windows 自带 cmd

不要 git 自带终端,适配内网老旧系统,下一步(这里其实都可以)

11、额外配置 全部默认勾选,下一步

12、无需安装额外软件,直接下一步

13、点击 Install 等待安装完成

14、安装完毕 取消两个勾选,不要查看说明,点击完成


验证是否安装成功 内网 cmd 输入

bash 复制代码
git --version

出现 git version 2.23.0 就是安装完成


五、VSCode

简单直接:找你的前端同事或领导问一下如何下载或获取。(FeiQ 直接共享文件传送)

两个同事分别传了三个版本的VSCode,我想使用最新版本的。

问豆包:

VSCodeUserSetup-x64-1.42.0-insider 和 VSCodeUserSetup-x64-1.73.1 和VSCodeUserSetup-x64-1.108.2,这三个哪个的版本是最高最新版本呢?


先把三个版本号拎出来:

  1. 1.42.0‑insider(很早的内测版,2020 年左右)
  2. 1.73.1(稳定版,2022 年 10 月左右)
  3. 1.108.2(稳定版,非常新)

VSCode 版本号规则: 主版本.次版本.修订号次版本数字越大越新

直接比较:

  • 1.42.0 < 1.73.1 < 1.108.2

所以:

  • 最高、最新:VSCodeUserSetup‑x64‑1.108.2(稳定版)
  • 其次:1.73.1(稳定)
  • 最旧:1.42.0‑insider(内测,老)

最终使用了 VSCodeUserSetup‑x64‑1.108.2 版本的,卸载了1.42.0‑insider。

VSCode 的 扩展插件包:同事那里只有一个 " Vue (Official) " 包,

从 " ··· " 中点击最下方的 "从 VSIX 安装..."


序篇:

以下内容个人感觉有助于新手小白更快适应与上手工作,老手无内网开发经验的可以了解一下。

一、头天上班,自我介绍

本以为会简单做个自我介绍啥的,所以提前准备了一下,结果并没有,不过也没事,反正最好不要打无准备之仗,心里有底踏实最好。

三款简短不尴尬,适合职场新人开会用

版本一|最简单通用(首选最合适)

各位领导同事大家好。 我是今天新入职的员工XXX,很高兴能够加入咱们这个大家庭。 往后工作当中还有很多不懂的地方,希望各位前辈多多指教。 之后我会认真踏实做好本职工作,好好配合团队,谢谢大家。

版本二|干练沉稳一点

大家好,我是新来的XXX。非常荣幸来到公司和各位共事。 本人性格比较随和,做事踏实认真。后续工作里面很多方面需要向大家学习,往后多多相处,也请大家多多包容,今后一起好好努力。

版本三|极简很短 不爱说话就用

各位同事大家好,我叫XXX,今日刚来入职。 初次入职很多地方不太熟悉,往后工作麻烦大家多多照顾,我会好好认真工作,谢谢大家。


二、虚拟桌面开发

内网开发一般都不是在自己本地本机进行开发的,一般都会登录至另一个桌面上开发。【可能是基于安全考虑,安全系数会更高吧】

上一家是登录华为的云桌面开发,这一家是登录 " 需桌(虚桌)" 开发

等待领导帮你申请下来其账号和密码,然后配置远程桌面连接地址,

"需桌"首次登录需要初始化密码,这里有点坑的地方就是密码要求很严格,

我调整了好几次密码都失败了,总结就是:不能使用姓名拼音,再一个密码长度至少12位,

其他要求就是基本的高等级要求那一套了,没想到在改密码上花费较长时间。


三、Svn 账号,Svn 是啥?

背景:项目负责人给分配配置了Git和Svn的管理账号,但因为我只接触过Git,没接触过Svn,所以我也不懂这个,就豆包了解了一下。【结论:现代不常用,忽略不用管也行】

1、SVN 是什么

SVN 就是 代码仓库、文件版本管理工具

简单理解:

公司存放 所有项目代码、文档、资料的 共享服务器文件夹

所有人写的代码全部统一存在 SVN 服务器里面

2、SVN 账号密码

就是登录公司代码库的 用户名 + 密码

  • 用来下载公司项目源码
  • 写完代码上传保存
  • 查看别人修改的文件

对比好懂

  1. Git / Gitee / Github :现在 年轻人 常用 代码工具
  2. SVN:老公司、传统后端、老旧项目 全部在用

日常三个操作

  1. 更新:把别人改的代码下载到自己电脑

  2. 提交:自己写完代码上传保存

  3. 冲突:两个人改了同一处代码,需要合并


四、Windows 锁屏及设置密码

因为但凡是内网环境开发的工作,安全方面的工作一般都会要求比较严,就比如说"场地安全"会要求你:"离开工位必须锁屏",但我之前一直使用Mac本,内网一般都是用Windows,且需要你锁屏密码等级要高(起码包含大小写、符合、数字三种)。

Windows 锁屏快捷键

  • 一键锁屏(最常用)Win + L

  • 备用(卡死也能用)Ctrl + Alt + Del → 选择 "锁定"

Mac 锁屏快捷键

  • 一键锁屏Control + Command + Q

  • 带 Touch ID 的 Mac:轻按 Touch ID 即可锁屏。

小提示

  • Windows:先设好账户密码 / PIN,锁屏后才需要验证。
  • Mac:在系统设置 → 锁定屏幕里,把 "需要密码" 设为 "立即"。

Windows 10/11 设置锁屏密码(最稳最快)

1)图形界面(推荐)

  1. Win + I 打开设置。

  2. 进入 账户 → 登录选项

  3. 密码 处点添加 (已有密码点更改)。

  4. 输入新密码→确认→密码提示,下一步→完成。

  5. 锁屏测试:按 Win + L,现在需要密码才能进。

2)顺便把 "屏保后也要密码" 打开(更安全)

  1. 设置 → 个性化 → 锁屏界面 → 屏幕保护程序设置。
  2. 勾选 在恢复时显示登录屏幕,确定。

3)更推荐:设个 PIN(更快、只本机用)

  1. 同样在登录选项PIN (Windows Hello)添加
  2. 验证账户密码后,设 4--6 位数字,解锁超快。

4)命令行(备用,适合管理员)

  1. 以管理员身份打开 cmd。
  2. 输入:plaintext
bash 复制代码
net user 你的用户名 新密码

例如:plaintext

bash 复制代码
net user Zhang 123456

提示 "命令成功完成" 即可。


五、文件夹目录名称

想着D盘下新建几个文件夹用来分门别类存放前端所需各类东西,起点规范名字看着舒服。

D 盘新建总文件夹 最好简约干净,以后所有编程软件全部放这里

1、首选名称:ProgramCode 最适合程序员

专门存放编辑器、开发软件、前端全部工具,不乱杂乱

2、次选名称:DevProgram(全部开发软件都装这里)

3、简约名称:Program

里面再分别新建子文件夹

1、D:\ProgramCode\VScode【代码编辑器,存放 vscode 安装包+安装路径】

2、D:\ProgramCode\nodejs【node.js 专门存放】

3、D:\ProgramCode\Git【后续 git】

4、D:\ProgramCode\Web【前端工具 放你所有前端学习文件】

5、D:\ProgramCode\WebStudy【前端所有练习代码、作业文件全部放这里】

6、D:\ProgramCode\ 软件程序【以后别的编程软件全部装这里】

不要使用中文文件夹!!千万别用

中文后期代码会报错乱码

备用好听可以直接选用总文件夹名字

  • DevFile (开发者文件)
  • CodeData
  • 程序开发库

六、Notepad Plus 是啥?

旁边的同事将VSCode和Notepad Plus一块通过FeiQ传送给我了,没有使用过Notepad Plus

Notepad Plus 就是 Notepad++(常被口语说成 "Notepad plus")

简单说:Windows 自带记事本的超级增强版,免费、轻量、适合写代码

✅ 它能干啥(比系统记事本强太多)

  • 语法高亮:写 HTML / CSS / JS、Python 等代码会自动上色,看得清楚。
  • 多标签页:一个窗口打开多个文件,不乱。
  • 代码折叠:大段代码可以收起来,结构清晰。
  • 编码齐全:UTF-8 / GBK 等不乱码。
  • 插件扩展:可装 FTP、对比文件、格式化等插件。
  • 免费无广告

✅ 和 VS Code 怎么选

  • Notepad++超快、极简、占内存小,适合快速改配置、写脚本、临时看代码。
  • VS Code :功能更全(调试、Git、终端),适合正式项目开发,启动稍重。

✅ 安装目录建议(和你前面统一)

  • 安装路径:D:\DevProgram\Notepad++
  • 纯英文路径,不中文、不空格,避免乱码。

一句话总结:日常轻量编辑用 Notepad++,正经项目开发用 VS Code

相关推荐
杨运交1 小时前
[025][Web模块]基于 Spring Boot 的请求日志过滤器设计与实现
前端·spring boot·后端
IT_陈寒1 小时前
React的useEffect里设状态?我又踩雷了
前端·人工智能·后端
恋猫de小郭1 小时前
GSY 史上最全跨平台/架构/语言的项目,七大项目召唤「神龙」
android·前端·flutter
范什么特西2 小时前
狂神Vue
前端·javascript·vue.js
怕浪猫2 小时前
Electron 开发实战(六):系统交互与原生功能实战全解
前端·javascript·electron
爱喝热水的呀哈喽2 小时前
npm 双网切换
前端·npm·node.js
玄米乌龙茶1232 小时前
Web 框架(FastAPI / Flask)核心概念
前端·flask·fastapi
问心无愧05132 小时前
ctf show web 入门66
前端·笔记
Rain5092 小时前
mini-cc 权限安全:给 AI 戴上枷锁
前端·人工智能·安全·架构·node.js·ai编程