VitePress 入门教程

一、环境配置

1. 安装开发者工具 VS Code

2. 安装 node.js

PS D:\Desktop\vite-docs-app> node -v
v18.15.0

3. 安装 git

PS D:\Desktop\vite-docs-app> git -v
git version 2.38.0.windows.1
PS D:\Desktop\vite-docs-app>

二、生成初始化 package.json

1. 创建项目目录

mkdir -p vite-docs-app

2. 进入项目目录

cd vite-docs-app

3. 创建 package.json

npm init -y

三、 安装和初始化 vitepress

1. 安装 vitepress

npm install -D vitepress

2. 安装 vitepress

npx vitepress init

3. 开发环境启动

npm run docs:dev

浏览器访问对应 url，查看是否正常

Ctrl + C 可以退出

4. 修改 .vitepress/config.mjs 配置文件，增加 outDir: "dist"、srcDir: "src"配置

import { defineConfig } from "vitepress";

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "我的博客网站",
  description: "牛逼",
  outDir: "dist", 
  srcDir: "src", 
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    nav: [
      { text: "Home", link: "/" },
      { text: "Examples", link: "/markdown-examples" },
    ],

    sidebar: [
      {
        text: "Examples",
        items: [
          { text: "Markdown Examples", link: "/markdown-examples" },
          { text: "Runtime API Examples", link: "/api-examples" },
        ],
      },
    ],

    socialLinks: [
      { icon: "github", link: "https://github.com/vuejs/vitepress" },
    ],
  },
});

5. 创建 src 目录，把 index.md、markdown-examples.md、api-examples.md 文件移动到 src 目录下

mkdir -p src

mv index.md src/index.md

mv markdown-examples.md src/markdown-examples.md

mv api-examples.md src/api-examples.md

6. 打包应用

npm run docs:build

四、全文检索

1. vitepress-plugin-search

https://www.npmjs.com/package/vitepress-plugin-search

npm i vitepress-plugin-search flexsearch -D

import { SearchPlugin } from "vitepress-plugin-search";

export default defineConfig({
  title: "李钟意讲前端",
  srcDir: "src",
  vite: {
    plugins: [
      SearchPlugin({
        previewLength: 80, // 这个选项决定了搜索结果预览的长度，单位是字符数
        buttonLabel: "搜索", // 这个选项可以用来改变搜索按钮的标签
        placeholder: "搜索文档", // 这个选项可以用来设置搜索输入框的占位符
        allow: [], // 这是一个数组，你可以在这个数组中指定哪些页面可以被搜索
        ignore: [], // 这也是一个数组，你可以在这个数组中指定哪些页面不被搜索
      }),
    ],
  },
});

2. algolia

import { defineConfig } from "vitepress";

export default defineConfig({
  title: "李钟意讲前端",
  srcDir: "src",
  themeConfig: {
    search: {
      provider: "algolia",
      options: {
        appId: "8J64VVRP8K",
        apiKey: "a18e2f4cc5665f6602c5631fd868adfd",
        indexName: "vitepress",
      },
    },
  },
});