前端手册
PC端前端从0开始

本地部署运行

# 环境准备

# 1. node.js 和 npm

# a. 安装

目前统一使用的版本是 18.20.3 (opens new window) 基于对其他项目的本地运行node版本兼容，应该直接下载一个nvm (opens new window)。

NVM（Node Version Manager）是一种用于管理多个Node.js版本的工具。它允许用户使用简单的命令在本地下载任何远程长期支持（LTS）版本的Node.js，并直接从命令行在Node.js的多个版本之间轻松切换。此外，NVM还允许用户设置别名以轻松在不同下载版本的Node.js之间切换。NVM的目的是解决在工作中可能需要同时进行多个不同NodeJS版本的项目开发时，维护多个版本的node将会是一件非常麻烦的问题。通过NVM，用户可以在同一台设备上进行多个node版本之间切换，从而方便地管理不同项目的Node.js环境需求。

i. nvm下载和安装（不推荐放C盘）基本是点【下一步】傻瓜式安装。

ii. node.js下载和安装基本是点【下一步】傻瓜式安装。安装 node.js 时，会自动安装 npm。

# b. 检查是否安装成功

# 查看 nvm 版本号，有提示版本号说明安装成功
nvm -v

# 查看 node.js 版本号，有提示版本号说明安装成功
node -v

# 查看 npm 版本号，有提示版本号说明安装成功
npm -v

1
2
3
4
5
6
7
8

# c. nvm 安装 Node v18.20.3

i. 找到 nvm 安装路径所在的文件夹，打开 settings.txt 文件

# 在 settings.txt 文件里配置镜像源（淘宝源）
node_mirror: http://npmmirror.com/mirrors/node/
npm_mirror: http://registry.npmmirror.com/mirrors/npm/

1
2
3

ii. 安装 Node v18.20.3

# 安装对应的版本
nvm install 18.20.3

# 切换到使用指定的版本
nvm use 18.20.3

# 检查是否切换成功（查看node、npm版本）
node -v
npm -v

# 检查已安装的所有node.js版本列表
nvm list

1
2
3
4
5
6
7
8
9
10
11
12

# 2. yarn

# a. 安装

# 全局安装yarn
npm install -g yarn

1
2

# b. 检查是否安装成功

# 查看 yarn 版本号，有提示版本号说明安装成功
yarn -v

1
2

# 3. pnpm

# a. 安装

# 全局安装pnpm
npm install -g pnpm

1
2

# b. 检查是否安装成功

# 查看 pnpm 版本号，有提示版本号说明安装成功
pnpm -v

1
2

# 4. 代码编辑器

为了很好地解决“因编辑器及其插件、代码格式化等问题而导致代码内容冲突”，建议还是使用 VSCode (opens new window)，安装最新版本即可。下面提供了一份 VSCode 基础配置和插件配置：

# VSCode_配置

下载 VSCode_配置.code-profile 文件；
VSCode 左下角，点击设置图标，选择【导入配置文件】

在上方点击【选择文件...】，导入步骤一下载的 CODE-PROFILE 文件。

点击【创建配置文件】，并自定义一个配置名称，再按【创建】

选择刚才导入的配置，插件会自动安装

# 5. 前端项目启动

拉取项目到本地后，在项目根目录下启用终端，执行安装依赖包命令；

# 目前发现用yarn 安装依赖包比较齐全（类似npm install）
yarn install

1
2

执行启动项目命令。

npm run dev

# 6. npm包开发

# 配置准备工作

！按照以下步骤执行：

# 1.设置上传的源服务器

# ①设置上传的源服务器
npm config set registry http://192.168.181.114:8081/repository/npm-hosted/ # 设置npm使用npm-hosted源
npm config get registry # 查看镜像源是否设置成功

1
2
3

# 2.登录

# ②登录
npm login
# Username: admin
# Password: sie123456 # 输入密码不会显示
# Logged in on http://192.168.181.114:8081/repository/taobao_npm. # 登陆成功

1
2
3
4
5

# 3.切换dme的npm私库源

# ③设置源集合
npm config set registry http://192.168.181.114:8081/repository/npm-group/	# 部门私库集合，包含其他npm源

1
2

# 打包与发布

！按照自己需要执行相关命令，不是全部都要执行

# 仅打包，不更新版本号，不发布。可用于测试代码是否正常，正常则能打包成功
npm run build

# 仅发布，不打包，不更新版本号（必须有打包文件才能发布，不然会报错）
npm run publish:hosted

# 半自动：先更新版本号->发布到私库
npm run publish:r # 0.0.0-1 => 0.0.0-2
npm run publish:z # 0.0.1-2 => 0.0.2-0
npm run publish:y # 0.1.2-3 => 0.2.0-0
npm run publish:x # 1.2.3-4 => 2.0.0-0

# 自动：先打包->更新版本号->发布到私库
npm run build:r # 0.0.0-1 => 0.0.0-2
npm run build:z # 0.0.1-2 => 0.0.2-0
npm run build:y # 0.1.2-3 => 0.2.0-0
npm run build:x # 1.2.3-4 => 2.0.0-0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 版本号说明

版本号格式为 MAJOR.MINOR.PATCH-PRERELEASE，其中：

MAJOR：主版本号，当有不兼容的 API 修改时递增。
MINOR：次版本号，当有向下兼容的功能性新增时递增。
PATCH：修订号，当有向下兼容的问题修正时递增。
PRERELEASE：特殊版本号
- 先行版本：在修订号后加上连接号和标识符，如 1.0.0-alpha.1、1.0.0-beta.2、1.0.0-rc.3，表示版本不稳定。
- 版本编译信息：在版本号后加上加号和标识符，如 1.0.0+20130313144700，用于提供额外信息。

提示

升级前重点关注可能造成【破坏性】的更新。

版本号规则：主版本号.次版本号.修订版本号-开发版本号

主版本号: 当功能模块有较大的变动，比如增加多个模块或者整体架构发生变化。此版本号由项目决定是否修改。

次版本号: 当功能有一定的增加或变化，比如增加菜单、增加自定义视图等功能。此版本号由项目经理或架构师决定是否修改。

修订版本号: 一般是 Bug 修复或是一些小的变动，要经常发布修订版，时间间隔不限，修复一个严重的bug即可发布一个修订版。此版本号由开发负责人决定是否修改。

开发版本号: 用于记录APP的临时修改，每次对当前APP的项目的临时修改都需要更改临时版本号。此版本号由开发人员决定是否修改。

主版本号 加1 的情况：
- 功能模块有较大的变动
- 整体架构发生变化
次版本号 加1 的情况：
- 新增基础、业务组件
- 增加多个模块
- 不完全能兼容原有功能的更新
- 模块代码的重构
修订版本号 加1 的情况：
- 【确认】为框架 bug 并且已修复
- 组件有变更
- 新增拓展包
开发版本号 加1 的情况：
- 开发人员增加、重构了模块，或修复了bug之后用于调试

# 更新规则

版本号的更新遵循以下规则：

版本号只升不降，不得在数字前面加0。例如不能是 1.01.0，应该是 1.1.0。
当主版本号升级时，次版本号和修订版本号需要归零。例如 1.1.1 -> 2.0.0。
当次版本号升级时，主版本号不变，修订版本号归零。例如 1.1.1 -> 1.2.0。
当修订版本号升级时，主版本和次版本号都不变。例如 1.1.1 -> 1.1.2。
一般第一个正式版本应为 1.0.0。
处于开发测试阶段的版本一般为 0.y.z，如果不发布，则默认为 0.0.0，如果发布第一个测试版本则是 0.1.0，如果修复第一个测试版本则是 0.1.1，如果更新第二个测试版本则是 0.2.0。

# 版本范围指定

在 package.json 文件中，可以使用不同的符号来指定版本范围：

^：仅接受次要版本和补丁版本的更新。例如 ^0.13.0 将匹配 0.13.1 和 0.14.0。
~：仅接受补丁版本的更新。例如 ~0.13.0 将匹配 0.13.1（不是 0.14.0）。
>：接受任何高于指定版本的更新。
<：接受低于指定版本的任何版本的更新。
>=：接受大于或等于指定版本的任何版本。
<=：接受小于或等于指定版本的任何版本。
=：仅接受确切指定的版本。
-：接受一系列版本。例如 1.0.0 - 1.10.10 将匹配 1.5.0（不是 1.11.0）。
x.x.x：仅接受指定版本（无符号）。例如 =3.0.0 将匹配 3.0.0，而不是 3.0.1。
latest：始终获得可用的最新版本。

# nexus查看发布的npm包

DME的nexus(IP)地址：http://192.168.181.114:8081/#browse/browse:npm-hosted (opens new window)

在线编辑