vitepress 组件库文档

1. 创建文件夹【huanyou-element-components-doc】并打开终端初始化,默认生成【package.json】文件

npm init -y

2. 安装vitepress

安装在开发环境，并指定版本，避免语法不一致导致效果不出现

cnpm i -D vitepress@0.20.1

3. 在 【package.json】修改 script

{
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "serve": "vitepress serve docs"
  }
}

4. 根目录下创建【docs】 → 【index.md】

---
home: true,
heroText: 基于element-plus二次封装组件
tagline: 高扩展性的组件库
actionText: 快速开始
actionLink: / /
features:
  - title: 简介至上
    details: 所有组件支持全量引入和按需引入，并且用法简单
  - title: 高扩展性
    details: 全新的组件API设计，支持高度自定义
  - title: 全面覆盖
    details: 涵盖基础组件、通用组件和业务组件
---

5. 运行项目

npm run dev

效果如图所示

6. 创建配置文件【docs → .vitepress → config.js】

module.exports = {
  // 网站标题
  title: "基于element-plus二次封装组件库",
  // 部署的基础路径
  base: "/",
  // 配置网站html的head标签 网站图标
  head: [],
  themeConfig: {
    // 头部导航
    nav: [
      {
        // 导航名称
        text: "首页",
        // 跳转项目链接（路由）
        link: "/",
      },
      {
        text: "gitee站点",
        link: "xxx",
        target: "_blank",
      },
    ],
    // 侧边导航栏
    sidebar: [
      {
        text: "快速上手",
        link: "/quickStart/",
      },
      {
        text: "图标选择器",
        link: "/chooseIcon/",
      },
      {
        text: "省市区选择",
        link: "/chooseArea/",
      },
      {
        text: "趋势选择",
        link: "/trend/",
      },
      {
        text: "时间选择",
        link: "/chooseTime/",
      },
      {
        text: "通知菜单",
        link: "/notification/",
      },
      {
        text: "导航菜单",
        link: "/menu/",
      },
      {
        text: "城市选择",
        link: "/chooseCity/",
      },
      {
        text: "进度条",
        link: "/progress/",
      },
      {
        text: "日历",
        link: "/calendar/",
      },
      {
        text: "表单",
        link: "/form/",
      },
      {
        text: "弹出框表单",
        link: "/modalForm/",
      },
      {
        text: "表格",
        link: "/table/",
      },
    ],
  },
};

7. 侧边栏link导航由文件名决定【docs → xxx文件夹 →index.md】 

8. 安装插件并导入组件库【docs → .vitepress →theme → index.js】基础配置

// 当前组件库依赖element-plus，因此必须同时安装
cnpm i -S element-plus @element-plus/icons-vue huanyou-element-components

// theme > index.js 
import DefaultTheme from "vitepress/theme";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import mUI from "huanyou-element-components";
import "huanyou-element-components/style.css";

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    app.use(ElementPlus);
    app.use(mUI);
  },
};

 9. 使用组件库

 选择图标：【chooseIcon → index.md】

## 图标选择器
用户点击按钮，弹出框显示所有图标，点击图标可以复制图标代码

### 基本用法
<br>
<div>
  <m-choose-icon title='选择图标' v-model:visible="visible">选择图标</m-choose-icon>
</div>
<br>

### 代码示例
<script setup>
  import {ref} from 'vue'
  let visible = ref(false)
</script>


``` js
<m-choose-icon title='选择图标' v-model:visible="visible"></m-choose-icon>

<script setup lang="ts">
  import {ref} from 'vue'
  let visible = ref<boolean>(false)
</script>
```

图示