vitepress安装新建文件夹 site 在 ./site 路径下打开命令行窗口新建 docs/index.md

安装

新建文件夹 site

在 ./site 路径下打开命令行窗口

// 初始化一个新项目,并生成 package.json 文件
pnpm init

// 安装vitepress 和 vite,生成node_modules文件 和 pnpm-lock.yaml
pnpm install -D vitepress vue

新建 docs/index.md 文件

mkdir docs && echo ## Hello Vitepress >  docs/index.md

在package.json 中新增scripts命令

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

执行 npm run docs:dev 项目就可以跑起来了

docs内出现文件夹.vitepress
需要什么页面，可以在docs下新建XXX.md文件

配置

在 docs - .vitepress文件夹下新建 config.js文件

顶部导航

效果图

// docs - .vitepress - config.js

export default {
	themeConfig: {
		nav: [
			{ text: '指南', link: '/guild/quickstart' },
			{ text: '掌握', items: [
				{ text: 'item01',link: '/master/quickstart'},
				{ text: 'item02',link: '/master/quickstart'}
			] },
			{ text: '操作', items: [
				{
					items: [
						{ text: 'item01',link: '/master/quickstart'},
						{ text: 'item02',link: '/master/quickstart'}
					]
				},
				{
					items: [
						{ text: 'item01',link: '/master/quickstart'},
						{ text: 'item02',link: '/master/quickstart'}
					]
				},
			] },
		]
	}
}

侧边栏

效果

效果图：折叠侧边栏

// config.js

export default {
	themeConfig: {
		nav: [
			{ text: '指南', link: '/guild/quickstart' },
			{ text: '掌握', items: [
				{ text: 'item01',link: '/master/quickstart01'},
				{ text: 'item02',link: '/master/quickstart02'}
			] },
			{ text: '操作', items: [
				{
					items: [
						{ text: 'item01',link: '/master/quickstart'},
						{ text: 'item02',link: '/master/quickstart'}
					]
				},
				{
					items: [
						{ text: 'item01',link: '/master/quickstart'},
						{ text: 'item02',link: '/master/quickstart'}
					]
				},
			] },
		],
		sidebar: {
			'/guild': [
				{
					text: "指导01",
					collapsible: true,
          			collapsed:true,
					items: [
						{
							text: "1",
							link: "./guild/01"
						},
						{
							text: "2",
							link: "./guild/02"
						}
					]
				}
			]
		}
	}
}

配置社交链接socialLinks

支持的社交链接

type SocialLinkIcon =
  | 'discord'
  | 'facebook'
  | 'github'
  | 'instagram'
  | 'linkedin'
  | 'slack'
  | 'twitter'
  | 'youtube'
  | { svg: string }

// themeConfig: {}内

socialLinks: [
      { icon: "github", link: "https://www.baidu.com" },
      { icon: "twitter", link: "..." },
      // You can also add custom icons by passing SVG as string:
      {
        icon: {
          svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Dribbble</title><path d="M12...6.38z"/></svg>',
        },
        link: "...",
      },
    ],

全部代码

export default {
	title: '网页标题',
	description: '描述',
	lang: 'zh-CN',
	themeConfig: {
		siteTitle: '侧边栏上方显示,点击跳转到docs/index.md文件',
		nav: [
			{ text: '指南', link: '/guild/quickstart' },
			{ text: '掌握', items: [
				{ text: 'item01',link: '/master/quickstart01'},
				{ text: 'item02',link: '/master/quickstart02'}
			] },
			{ text: '操作', items: [
				{
					items: [
						{ text: 'item01',link: '/master/quickstart'},
						{ text: 'item02',link: '/master/quickstart'}
					]
				},
				{
					items: [
						{ text: 'item01',link: '/master/quickstart'},
						{ text: 'item02',link: '/master/quickstart'}
					]
				},
			] },
		],
		sidebar: {
			'/guild': [
				{
					text: "指导01",
					collapsible: true,
          			collapsed:true,
					items: [
						{
							text: "1",
							link: "./guild/01"
						},
						{
							text: "2",
							link: "./guild/02"
						}
					]
				}
			]
		}
	}
}

代码收缩

方法一：

// 对.md文件

<details>

<summary>代码</summary>

/```
收缩的代码，上下去掉/即可
/```

</details>

方法二：

安装组件pnpm add easyest
修改代码

// site/docs/.vitepress/theme/index.js

import DefaultTheme from "vitepress/theme";
import easyest from "easyest";
export default {
  ...DefaultTheme,
  enhanceApp: async ({ app }) => {
    // app is the Vue 3 app instance from `createApp()`. router is VitePress'
    // custom router. `siteData`` is a `ref`` of current site-level metadata.
    app.use(easyest);
  },
};

在md文件中调用

// .md

## Button 按钮

<ea-button>默认按钮</ea-button>
<ea-button type="primary">默认按钮</ea-button>

::: details 显示代码

/```
代码，去掉/即可显示
/```

:::

logo

logo中的图片文件应该放在docs - public中，否则图片会因为刷新而不显示

打包

在命令行输入

npm run docs:build

将site\docs\.vitepress\dist 中的文件复制到服务器对应位子中，进行替换

文件解析

site/.vitepress/theme/index.js

引入需要使用的组件库

import DefaultTheme from "vitepress/theme";
import easyest from "easyest"; //自己需要的组件库
export default {
  ...DefaultTheme,
  enhanceApp: async ({ app }) => {
    app.use(easyest);
  },
};