格子表单GRID-FORM | 文档网站搭建（VitePress）与部署（Github Pages）-优快云博客

格子表单/GRID-FORM已在Github 开源，如能帮到您麻烦给个星🤝

GRID-FORM 系列文章

效果预览

格子表单/GRID-FORM 文档站点已上线：https://0604hx.github.io/grid-form/，效果如下：

本文将介绍如何使用 VitePress、GithubPages 搭建静态网站，相关源码请查阅GRID-FORM。

文档开发

VitePress 简介

VitePress，由 Vite 和 Vue 驱动的静态站点生成器，基于 markdown 文件混搭 Vue 组件构建成 HTML，提供开箱即用的模板，特别适合做组件文档😄。下面是一些线上的实例：

VitePress 目录包含以下内容：

docs/					# 文档根目录
	.vitepress/			# VitePress 专用目录
		dist/			# 打包后产物目录
		theme/
			custom.css	# 自定义的样式文件
			index.js	# 自定义主题
		config.js		# VitePress 配置文件
	public/				# 静态资源
	index.md			# 首页
	README.txt			# 改用 txt（否则 vitepress 会生成对应的 READMD.html 😂）

首页

从上面几个官网就能看出，首页布局如出一辙😀，这是因为使用了 VitePress 默认的首页模板。

---
# https://vitepress.dev/reference/default-theme-home-page
layout: home

hero:
  name: "格子表单/GRID-FORM"
  tagline: 基于 GRID 布局的 VUE3 表单工具<br>包含可视化设计器、渲染器（多UI库）
  actions