Vitepress#
初始化文档#
步骤 1：进入文档目录
1cd docs步骤 2：初始化项目
这条命令初始化一个新的 npm 项目,并创建一个 package.json 文件。
1pnpm init步骤 3：安装 vitepress
这条命令将 vitepress 作为开发依赖安装到您的项目中。
1pnpm add -D vitepress步骤 4：启用设置向导
这条命令启动 VitePress 的设置向导,帮助您配置 VitePress。
1pnpm vitepress init步骤 5：具体配置步骤
┌ Welcome to VitePress!
│
◇ Where should VitePress initialize the config?
│ ./
│
◇ Site title:
│ Suit组件库
│
◇ Site description:
│ A Vue3 UI library
│
◇ Theme:
│ ○ Default Theme (Out of the box, good-looking docs)
│ ● Default Theme + Customization
│ ○ Custom Theme
│
◇ Use TypeScript for config and theme files?
│ Yes
│
◇ Add VitePress npm scripts to package.json?
│ Yes
│
└ Done! Now run pnpm run docs:dev and start writing.
配置导航栏#
1import { defineConfig } from "vitepress";
2
3export default defineConfig({
4 title: "Suit组件库",
5 description: "A Vue3 UI library",
6 themeConfig: {
7 nav: [
8 { text: "指南", link: "/guide/" }, // [!code ++]
9 { text: "组件", link: "/components/" }, // [!code ++]
10 ],
11
12 sidebar: {},
13
14 socialLinks: [
15 { icon: "github", link: "https://github.com/vuejs/vitepress" },
16 ],
17 },
18});配置侧边栏#
1import { defineConfig } from "vitepress";
2
3export default defineConfig({
4 title: "Suit组件库",
5 description: "A Vue3 UI library",
6 themeConfig: {
7 nav: [
8 { text: "指南", link: "/guide/" },
9 { text: "组件", link: "/components/" },
10 ],
11
12 sidebar: {
13 "/guide/": [ // [!code ++]
14 { // [!code ++]
15 text: "基础", // [!code ++]
16 items: [ // [!code ++]
17 { text: "设计", link: "/guide/design" }, // [!code ++]
18 { text: "安装", link: "/guide/install" }, // [!code ++]
19 { text: "快速开始", link: "/guide/start" }, // [!code ++]
20 ], // [!code ++]
21 }, // [!code ++]
22 { // [!code ++]
23 text: "进阶", // [!code ++]
24 items: [ // [!code ++]
25 { text: "国际化", link: "/guide/lang" }, // [!code ++]
26 { text: "主题", link: "/guide/theme" }, // [!code ++]
27 { text: "暗黑模式", link: "/guide/diablo" }, // [!code ++]
28 ], // [!code ++]
29 }, // [!code ++]
30 ], // [!code ++]
31 "/components/": [ // [!code ++]
32 { // [!code ++]
33 text: "基础组件", // [!code ++]
34 items: [ // [!code ++]
35 { text: "Button 按钮", link: "/components/button" }, // [!code ++]
36 ], // [!code ++]
37 }, // [!code ++]
38 ], // [!code ++]
39 },
40
41 socialLinks: [
42 { icon: "github", link: "https://github.com/vuejs/vitepress" },
43 ],
44 },
45});目录