目 录CONTENT

文章目录

离线文档搭建(ElementPlus)

筱晶哥哥
2024-12-01 / 0 评论 / 1 点赞 / 61 阅读 / 2771 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2024-12-01,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

前端开发的时候,需要去寻找对应的三方开源组件,以ElementPlus为例,肯定要去他的官网,它有自己的国内地址,这没问题,如果你是内网开发,不能直接访问它的官网,这就很蛋疼了。

本文介绍如何在自己的服务器,或者(公司的)内网服务器,部署一份属于自己的ElementPlus离线文档。

开始

我们先打开ElementPlus官网 https://element-plus.org/zh-CN/

点击右上角 Github 图标,去Github上把项目克隆下来

地址:https://github.com/element-plus/element-plus.git

国内用户建议使用Gitee:https://gitee.com/element-plus/element-plus.git

项目有点大,克隆可能有点慢,需要耐心等待。

由于ElementPlus这个项目是Monorepo架构,我们可以看到它的配置 pnpm-workspace.yaml,因此需要使用pnpm下载依赖和启动项目。

打开项目:

我们大概介绍一下目录

packages/:

这个目录通常用于存放多个子包或模块。每个子包可能有自己的 package.json 文件,定义其依赖和脚本。

play/:

这个目录可能用于存放示例或演示代码,帮助开发者测试和展示项目功能。

docs/:

这个目录通常用于存放项目的文档。可能包含文档的源文件和构建后的静态文件。

scripts/:

这个目录通常用于存放自定义脚本,如构建、生成版本信息等。

internal/:

这个目录可能用于存放内部工具或构建脚本,可能包括 build 和 metadata 子目录。

ssr-testing/:

这个目录可能用于存放与服务端渲染(SSR)相关的测试配置。

patches/:

这个目录可能用于存放对某些依赖包的补丁文件

那么根据目录的分析我们已经知道文档在docs

我们来观察一下docs目录,发现他使用的vitepress构建的

其次观察package.json文件运行启动命令,我们到 docs 目录执行

npm install pnpm -g
pnpm install 
pnpm run dev

我们启动了此项目然后发现居然不是中文的,切换语言处也没有中文,我们需要设置国际化中文。

他的国际化是基于 crowdin 实现的非常厉害的国际化插件

打开国际化插件对用ElementPlus 网址:https://crowdin.com/project/element-plus

需要先登录 crowdin ,可以用Github认证登录

选择中文:

把下载的压缩包打开解压,复制粘贴到到docs目录

最后重新启动即可。

可以看到,多了一个中文切换项,切换即可。

1

评论区