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>
1.2k 声望
71 粉丝
推荐阅读
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 中。
Beverly赞 5阅读 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语法糖<script setup lang="ts">摆脱了书写声明式的代码,用起来很流畅,提升不少效率
京东云开发者赞 4阅读 816
拥抱下一代前端工具链-Vue老项目迁移Vite探索
随着项目的不断维护,代码越来越多,项目越来越大。调试代码的过程就变得极其痛苦,等待项目启动的时间也越来越长,尤其是需要处理紧急问题的时候,切换项目启动,等待的时间就会显得尤为的漫长。无法忍受这种开...
京东云开发者赞 3阅读 320
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。