Vitepress编写组件文档

快速开始

安装依赖

mkdir <projectName>路径下
cd <projectName>
npm init -y
npm i -D vitepress

pkg#scripts

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

目录结构

.
-| docs
  -| index.md // 文档首页
  -| quikstart/

文档首页

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

运行npm run docs:dev,效果如下:

预览

更多配置见:https://github.com/vuejs/vite...

文档配置

新建文件docs/.vitepress/config.js

文档头

// docs/.vitepress/config.js
module.exports = {
  // 站点名称
  title: '基于element-plus二次封装组件',
  // 部署的基础路径
  base: '/',
  // 生成html的head配置:站点favicon...
  head: [

  ],
  themeConfig: {
    // 头部导航
    nav: [
      {
        text: '首页',
        link: '/'
      },
      {
        text: '百度',
        link: 'http://baidu.com' // 外部链接有特定标识
      },
    ]
  }
}

头部配置

侧边栏

sidebar配置

// docs/.vitepress/config.js
module.exports = {
  // 站点名称
  title: '基于element-plus二次封装组件',
  // 部署的基础路径
  base: '/',
  // 生成html的head配置:站点favicon...
  head: [

  ],
  themeConfig: {
    // 头部导航
    nav: [
      {
        text: '首页',
        link: '/'
      },
      {
        text: '百度',
        link: 'http://baidu.com' // 外部链接有特定标识
      },
    ],
    sidebar: [
      {
        text: '介绍',
        link: '/intro/'
      },
      {
        text: '安装',
        link: '/install/'
      },
      {
        text: '快速开始',
        link: '/quickstart/'
      }
    ]
  }
}

目录结构

.
-| docs
 ├── Install
 │   └── index.md
 ├── Intro
 │   └── index.md
 ├── Quickstart
 │   └── index.md
 └── index.md

在非根路径(非首页)下的index.md中的内容随意写一些md语法。

Notes: 目录结构即路由

首页跳转

修改根路径下的index.md

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

配置路由

Notes: 每次修改config配置文件都需要重新启动npm run docs:dev

Notes: md文件中使用非一级标题会在侧边栏生成多级锚点

集成组件库

配置主题

// docs/.vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import 'element-plus/lib/theme-chalk/index.css' // 组件依赖ElementPlus
import { FormRender } from 'custom-form'

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    // app为createApp()创建的实例
    app.component(FormRender.name, FormRender)
  }
}

集成组件

创建路由docs/Forms/

.
├── Forms
│   └── index.md
├── Install
│   └── index.md
├── Intro
│   └── index.md
├── Quickstart
│   └── index.md
└── index.md

编写文档

<!-- docs/Forms/index.md -->
# 表单
用户通过配置`schema`渲染表单。

## 基本用法
<!-- 集成组件,vite自动解析,源代码不会在页面展示 -->
<div>
  <form-render
    :schema="schema"
    :value="{}"
  >
  </form-render>
</div>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { formSchema } from '../../examples/layouts/index.ts'

export default defineComponent({
  setup () {
    const schema = reactive(formSchema)
    return {
      schema
    }
  }
})
</script>

## 代码示例
<!-- 源码 -->
'''ts
<form-render
  :schema="schema"
  :value="{}"
>
</form-render>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { formSchema } from '../../examples/layouts/index.ts'

export default defineComponent({
  setup () {
    const schema = reactive(formSchema)
    return {
      schema
    }
  }
})
'''

集成自定义组件

https://github.com/vuejs/vite...

集成ElementPlus

// docs/.vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
// import { FormRender } from 'custom-form'

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    // register global components
    app.use(ElementPlus)
    // app.component(FormRender.name, FormRender)
  }
}
<!-- docs/Forms/index.md -->
## 基本用法
<!-- 集成组件,vite自动解析,源代码不会在页面展示 -->
<div>
  <el-button type="primary" @click="alert">按钮</el-button>
  <!-- <form-render
    :schema="schema"
    :value="{}"
  >
  </form-render> -->
</div>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
// import { formSchema } from '../../examples/layouts/index.ts'

export default defineComponent({
  setup () {
    // const schema = reactive(formSchema)
    function alert () {
      window.alert('1234')
    }
    return {
      // schema,
      alert
    }
  }
})
</script>

集成ElementPlus


1.2k 声望
71 粉丝
0 条评论
推荐阅读
EIP1559与传统Gas定价模型转账逻辑
传统的gas定价模型(Txn Type===0) {代码...} 伦敦硬分叉EIP1559(Txn Type===2) {代码...} 外部签名 {代码...}

米花儿团儿阅读 428

SegmentFault 思否技术周刊 Vol.80 — 玩转新时代前端构建工具
Vite 提供了一套原生 ESM 的 HMR API。 具有 HMR 功能的框架可以利用该 API 提供即时、准确的更新,而无需重新加载页面或清除应用程序状态。Vite 内置了 HMR 到 Vue.js 单文件组件(SFC)和 React Fast Refresh 中。

Beverly5阅读 1.3k

封面图
React为什么不将Vite作为默认推荐?
CRA推出于2016年,彼时还没有成体系的React脚手架工具供大家使用,再加上这是官方工具,一经推出就受到了欢迎。截止当前,CRA仓库已经收获快10wstar。

卡颂4阅读 1.2k

封面图
[译]Vue官方成员:Vite生态发展的怎么样了
不幸的是,那时候 Vite 有坑,热更新做的也不如传统 webpack 项目,经常需要改一行代码就刷新一下浏览器。所以我趁项目还没变的很庞大之前改用 vue-cli 重构了该项目。但之后看见许多新出现的开源项目都用的 Vite...

手撕红黑树3阅读 6.9k

Vue3源码-整体渲染流程浅析
本文基于Vue 3.2.30版本源码进行分析为了增加可读性,会对源码进行删减、调整顺序、改变部分分支条件的操作,文中所有源码均可视作为伪代码由于ts版本代码携带参数过多,不利于展示,大部分伪代码会取编译后的js...

白边3阅读 683

感受 Vue3 的魔法力量
• setup语法糖&lt;script setup lang=&quot;ts&quot;&gt;摆脱了书写声明式的代码,用起来很流畅,提升不少效率

京东云开发者4阅读 816

封面图
拥抱下一代前端工具链-Vue老项目迁移Vite探索
随着项目的不断维护,代码越来越多,项目越来越大。调试代码的过程就变得极其痛苦,等待项目启动的时间也越来越长,尤其是需要处理紧急问题的时候,切换项目启动,等待的时间就会显得尤为的漫长。无法忍受这种开...

京东云开发者3阅读 320

封面图
1.2k 声望
71 粉丝
宣传栏