VuePress 使用教程

最新的版本是 2.0x. 文档地址见 https://v2.vuepress.vuejs.org/zh/

官网有的尽量就不赘述了.

启动新的工程

# 在你的项目中安装
yarn add -D vuepress@next

# 新建一个 markdown 文件
echo '# Hello VuePress' > README.md

# 开始写作
yarn vuepress dev

# 构建静态文件
yarn vuepress build

启用主题 VuePress Mix Theme

https://vuepress-theme-mix.vercel.app/zh/

通用配置

编辑 docs/.vuepress/config.ts


import {defineUserConfig} from 'vuepress'
import type {MixThemeConfig} from 'vuepress-theme-mix/lib/node'

export default defineUserConfig<MixThemeConfig>({
  // ...其他的配置

  // 配置 markdown 插件
  plugins: [
    [
      "vuepress-plugin-chart", // chart
    ],
    [
      "@renovamen/vuepress-plugin-mermaid", // mermaid
    ],
    [
      "@renovamen/vuepress-plugin-katex", // katex
    ]
  ],

  // 配置 favicon
  head: [
    ['link', { rel: 'shortcut icon', type: "image/x-icon", href: `https://cdn.jansora.com/application/Jansora/2020/08/24/03:28:36/sql.jpeg` }]
  ],
  themeConfig: {
     //配置主 logo
    logo: 'https://cdn.jansora.com/application/Jansora/2020/08/24/03:28:36/sql.jpeg',

    // 配置主标题
    title: 'MySQL 学习笔记',
    
    // 配置 git edit this page..
    docsRepo: 'https://github.com/Jansora/doc-mysql',
    docsDir: 'docs',
  },
  // ...其他的配置
})

其他主题相关配置参见 https://vuepress-theme-mix.vercel.app/zh/configuration/basic.html

vuepress 配置参见 https://v2.vuepress.vuejs.org/zh/reference/default-theme/config.html#logo

vercel 部署

见 https://www.jansora.com/notebook/107529

katex mermaid chart 等插件需要安装依赖包
yarn add @renovamen/vuepress-plugin-katex @renovamen/vuepress-plugin-mermaid vuepress-plugin-chart

评论栏