热门 UI 组件库离线文档制作教程（iView、Arco Design、Naive UI）

本文主要是介绍热门 UI 组件库离线文档制作教程（iView、Arco Design、Naive UI），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

概述

前端 UI 组件库层出不穷，版本更新又是你追我赶，查看官方文档网站是前端工程师日常行为，如果开发机无法连接互联网就会非常不方便（CTRL+C / CTRL+V 已然不香 😭）。

为了能够在内网查询 UI 组件库文档，我将自己平时常用的库制作成离线版，配合 nginx 进行访问。目录结构如下：

/www
|---- /docs/
|----|---- /iview
|----|---- /arco-design# 用户通过 http://IP/docs/iview、http://IP/docs/arco-design 进行访问# nginx 配置如下
location /docs/iview {alias   /www/docs/iview;try_files $uri $uri/ /docs/iview/index.html;
}
location /docs/arco-design {alias   /www/docs/arco-design;try_files $uri $uri/ /docs/arco-design/index.html;
}

iView

View UI®，即原先的 iView，是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。
该库目前仅支持 VUE2
2023-04更新 由于官网已经迁移，离线文档生成器已经无法使用，如需文档可以私聊我哈

iVIew 官网没有文档仓库（没办法本地编译），需要将官网的资源下载到本地然后进行配置，基本思路为：

下载 js、css 资源（vendors、main、相关 chunk、字体文件等）
修改 vendors.xxx.js 中资源路径前缀（搜索 https://file.iviewui.com/dist/ 即可找到，改为 /docs/iview）
修改 main.xxx.js 中路由的设置（修改 HISTORY 模式的 base 为 /docs/iview）

第三步为可选，并不影响使用。如果不修改则地址栏中的路由是以根目录为准，比如按钮页面为/components/button而不是我们想要的/docs/iview/components/button。

人工操作太费时间，我写了个工具：ViewUI 离线文档生成器，执行结果如下图所示：
在这里插入图片描述

Arco Design

Arco Design 是字节跳动出品的 UI 库，这里专指VUE版本

克隆仓库到本地
按照官网文档安装 yarn 及 lerna，接着执行 yarn install
修改 packages\arco-vue-scripts\src\configs\vite.site.prod.ts 的 base 为 /docs/arco-design/
修改 packages\arco-vue-docs\router.ts 中 createWebHistory("/docs/arco-design/")
执行 npm run init
执行 npm run build:site（得到 packages\arco-vue-docs\dist 的内容即可）

Naive UI

官方说明一个 Vue 3 组件库；比较完整，主题可调，使用 TypeScript，快；有点意思
升级到 vue3 后，这是我用的最多的 UI 库，设计得非常棒，墙推 👍

克隆代码仓库到本地
执行依赖安装，我用的是pnpm i（理论上 npm i 也是可以的）
修改vite.config.js文件，增加base:'./'配置项（这样就能部署到任意目录）
执行pnpm build:site（经过耐心等待，就能得到 site 目录）
部署上一步编译好的文件到服务器

[进阶]修改默认的路由地址

我希望访问首页时，直接进入到组件文档（button 页）

修改demo\routes\routes.js

找到 path:'button'的两个（中英文）路由定义，增加 name:'button' 属性
修改not-found路由直接跳转到button

{name:"button",path: 'button',component: () => import('../../src/button/demos/zhCN/index.demo-entry.md')
},
{name: 'not-found',path: '/:pathMatch(.*)*',redirect: {name: 'button',	//源码是 homeparams: {lang: navigator.language === 'zh-CN' ? 'zh-CN' : 'en-US',theme: 'os-theme'}}
}