10wms 前端技术文档
这是前端项目的文档，其中包括了组件说明文档，api 生成出来的文档等等。
关于此文档
IDE设置要求
本项目目前仅仅考虑使用 vscode 来启动项目。
请下载 vscode。
另外，vscode 是免费软件，不需要付费，也不需要破解。如果你下载了付费软件，那么你就被骗了。
赋予 vscode 管理员运行权限
我们要在 vscode 的终端内运行 node 命令，大多数操作都需要管理员权限，请阅读以下文章，按要求设置你的 vscode。
将 vscode 设置成中文
当你第一次使用 vscode 时，他是纯英文的。请按照以下教程完成中文设置。
git 分支操作规范
我们前端组的主分支是 f1 分支。
如果你是后端成员，想单纯的运行本项目，就切换到 f1 分支。
如果你是前端成员，请不要直接在 f1 分支内直接提交，这不符合规范。
选择正确的项目根目录
首先你需要在 git 内切换到 f1 分支。
我们前端项目的根目录是 wms-frontend，你应该先进入到 wms-frontend 文件夹内，在这个文件夹打开 vscode。
当你用 vscode 打开项目时，你的顶部标题应该是这样的：
vscode 顶部标题
为项目准备好必要的 vscode 插件
你并不需要专门去下载这些插件，我们前端组已经为你准备好了一份项目启动所需要的 vscode 插件清单。清单列表如下：
vscode 插件清单
{
"recommendations": [
// vue3的 .vue SFCs 的 LSP 语言支持服务
"Vue.volar",
// 使用 prettier 实现格式化
"esbenp.prettier-vscode",
// 使用 eslint 实现代码检查
"dbaeumer.vscode-eslint",
// 使用 gitlens 插件 实现git代码管理
"eamodio.gitlens",
// 使用 git-graph 插件 实现git提交分支图的查看
"mhutchie.git-graph",
"christian-kohler.npm-intellisense",
"christian-kohler.path-intellisense",
// UI交互增强插件 TODO高亮
"wayou.vscode-todo-highlight",
// UI交互增强插件 TODO树统计
"Gruntfuggly.todo-tree",
// UI交互增强插件 自动导入文件的智能跳转
"antfu.goto-alias",
// UI交互增强插件 对iconify的图标做图标提示
"antfu.iconify",
// UI交互增强插件 自定义代码颜色
"warmthsea.vscode-custom-code-color",
"lokalise.i18n-ally",
"csstools.postcss",
"redhat.vscode-yaml",
"bradlc.vscode-tailwindcss",
"vscode-icons-team.vscode-icons",
"mikestead.dotenv",
],
"unwantedRecommendations": [
// 不使用该插件 该插件事实上被官方弃用了
"Vue.vscode-typescript-vue-plugin",
// 不使用 cSpell 插件，该插件提出了太多没必要的语言拼写错误 干扰了大多数人的开发
// 故不推荐该插件
"streetsidesoftware.code-spell-checker"
]
}你也并不需要逐个安装，在你第一次用 vscode 打开项目时，你的右下角会弹出弹框，提示你是否要批量安装本项目推荐的插件，你点击是即可。
手动批量安装项目推荐插件
假设你不小心错过了这个弹框，你仍旧有办法批量安装插件。
如下图所示：
- 点击拓展。
- 输入命令
@recommended。
你逐个点击安装并启用即可。
本项目推荐的插件
准备 node 环境
我们的 node 环境版本范围在 20.15.0 以上。你安装 20.15.1 即可。
你并不需要辛苦地去找指定版本的 node 环境去安装，我们有高效率的安装方案。我们推荐你使用 nvm-desktop 来安装、切换、管理你的全部 node 环境。
点击 releases，看情况下载好本工具。
nvm-desktop 看起来应该是这样的：
nvm-desktop
配置 nvm-desktop 的镜像地址
你应该配置成淘宝源，否则你下载 node 环境的速度会非常慢，配置过程请看以下动图：
配置镜像源
安装并启用 node 环境
如图所示：
启用 node 环境
校验 node 是否安装成功
在控制台输入以下命令，显示出对应的 node 版本号，就说明已经安装好对应的 node 环境了。
node -v输出 node 版本号
配置 npm 镜像源
接下来我们需要设置镜像源。否则我们安装依赖时容易出错。
npm config set registry https://registry.npmmirror.com/
npm config set COREPACK_NPM_REGISTRY https://registry.npmmirror.com/为 npx 准备全局镜像源
我们项目会运行 npx only-allow pnpm 命令，该命令会安装一次性的 only-allow 包，如果没有安装，那么项目就会出现卡死，类似于下面这样：
项目会长期无反应。
为 corepack 准备镜像源
具体细节可以阅读该笔记。
安装项目依赖
在终端内输入以下命令：
npm i你并不需要担心镜像源的事情，在本项目内已经为你配置好了默认的淘宝镜像源。
.npmrc 包管理器配置
# 默认 淘宝镜像
registry=https://registry.npmmirror.com/
# 阮喵喵 的依赖包必须安装最新的 故镜像源只能选择官方源
@ruan-cat:registry=https://registry.npmjs.org/
# vercel 的依赖包必须安装最新的 故镜像源只能选择官方源
@vercel:registry=https://registry.npmjs.org/
# 依赖提升
# https://pnpm.io/zh/npmrc#shamefully-hoist
shamefully-hoist=true
# 关闭严格的对等依赖
# https://pnpm.io/zh/npmrc#strict-peer-dependencies
strict-peer-dependencies=false
# 跨平台脚本
# https://pnpm.io/zh/cli/run#shell-emulator
shell-emulator=true
# 不自动安装对等依赖
# https://pnpm.io/zh/npmrc#auto-install-peers
auto-install-peers=false
# 可以连接本地的包 让monorepo的包可以互相引用
# https://pnpm.io/zh/cli/recursive#--link-workspace-packages
link-workspace-packages=deep
# 处理类型识别失败的故障
# https://blog.csdn.net/qq_41499782/article/details/128723054
public-hoist-pattern[]=*vue*
# 忽略根包检查 允许在不增加 -w 选项的情况下在工作区根目录中安装包
# https://pnpm.io/zh/cli/add#--ignore-workspace-root-check
# https://juejin.cn/post/7215608036394827836
# https://blog.csdn.net/qq_40028324/article/details/131081148
ignore-workspace-root-check = true仍旧安装失败？
你应该在保证网络条件能翻墙的情况下，安装依赖。本项目有少数几个依赖不在淘宝源内。
选用高性能的 pnpm 作为包管理器
点此文章专门阅读关于 pnpm 设置的内容。如果你的电脑环境适合安装 pnpm，那么你可以试试看。
调出 vscode 的 npm 脚本菜单栏
我们推荐你点击命令，而不是去输入命令。vscode 已经为我们集成好可视化的，可点击的 npm 命令栏了。
显示出 npm 脚本栏
你应该要看到该页面：
本项目的 npm 命令
认识这些命令
如果你是后端成员，你只需要认识这两个命令即可：
本地运行
鼠标点击 dev 即可。
也可以手动运行此命令：
npm run dev打包项目
鼠标点击 build 即可。
也可以手动运行此命令：
npm run build其他命令
如果你是前端成员，请点击此学习其他的命令。
目录结构说明
请点此链接另外学习。
本项目路线图
- 组件库文档
- 组合式 api 文档
- typedoc 生成的文档