热门 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 官网没有文档仓库（没办法本地编译），需要将官网的资源下载到本地然后进行配置，基本思路为：

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

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

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

Arco Design

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

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

Naive UI

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

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

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

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

修改demo\routes\routes.js

1. 找到 path:'button'的两个（中英文）路由定义，增加 name:'button' 属性
2. 修改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',	//源码是 home
    params: {
      lang: navigator.language === 'zh-CN' ? 'zh-CN' : 'en-US',
      theme: 'os-theme'
    }
  }
}