Vuepress安装创建使用

VuePress官方文档

安装

创建并进入一个新目录 （就是创建一个新文件夹，你提前创建好了就直接初始化就可以）

mkdir vuepress-starter  // 创建目录
cd vuepress-starter  // 切换目录

初始化项目

npm init -y

将 VuePress 安装为本地依赖

npm install -D vuepress

在 package.json 中添加一些 scripts

	{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

创建你的文档

mkdir docs
echo '# Hello VuePress' > docs/README.md

注意： 可能会报错，是因为README.md是utf-16，改为utf-8就行。不好使的话就删除手动创建一个文件夹和md文件。

在本地启动服务器来开发你的文档网站

npm run docs:dev

配置

目录介绍

├─ docs
│  ├─ .vuepress
│	 │	└─ .cache 	        // 默认的不用动
│	 │	└─ .temp		// 默认的不用动
│  │  └─ config.ts  		        // 配置文件
│  │  └─ public      			// 图片位置
│  ├─ guide                             // 放md文件，可以添加多个
│  │  ├─ getting-started.md
│  │  └─ README.md
│	 └─ Frontmatter.md      
│  └─ README.md      			// 主页 
└─ package.json

config配置

import { defaultTheme } from 'vuepress';                  
import { searchPlugin } from '@vuepress/plugin-search';    // 搜索插件
import { viteBundler } from '@vuepress/bundler-vite';      // 打包插件 
import { sidebarVue } from './config/sidebar';		   // 侧边栏路由配置

export default {
  base: './',
  locales: {
    '/': {
      lang: 'zh-CN',
      title: '开发文档',
      description: 'Vue-powered Static Site Generator',
    },
  },

  // 侧边栏分组
  theme: defaultTheme({
    // 导入侧边栏路由配置文件
    sidebar: sidebarVue,
  }),
  plugins: [
    // 搜索配置
    searchPlugin({
      // 配置项
      locales: {
        './': {
          placeholder: '搜索目录',
        },
        '/zh/': {
          placeholder: '搜索',
        },
      },
      // 排除首页
      isSearchable: (page) => page.path !== '/',
      // 搜索最大条数
      maxSuggestions: 10,
    }),
  ],
  bundler: viteBundler({
    vuePluginOptions: {
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === 'center',
        },
      },
    },
  }),
};

侧边栏路由

import type { SidebarConfig } from '@vuepress/theme-default';

export const sidebarVue: SidebarConfig = [
  // 侧边栏路由设置
  {
    text: 'HR文档',
    collapsible: true,
    children: [
      '/hr/HR.md',
      '/hr/Form.md',
      '/hr/FormSql.md',
      '/hr/formBuild-fe.md',
      '/hr/formBuild.md',
    ],
  },
  {
    text: 'Git文档',
    collapsible: true,
    children: ['/git/git.md'],
  },
 
  {
    text: 'likeShop',
    collapsible: true,
    children: ['/likeShop/likeShop.md'],
  },
];

路径

默认情况下，页面的路由路径是根据你的 Markdown 文件的相对路径决定的。

相对路径	路由路径
/README.md	/
/index.md	/
/guide/README.md	/guide/
/guide/getting-started.md	/guide/getting-started.html

Frontmatter

显示侧边栏（暂时了解的）

---
sidebar: true,
sidebarDepth: 2
---

<!-- sidebar: true, 显示侧边栏  -->
<!-- sidebarDepth: 2 侧边栏展开层级 -->

结束