学习记录: VuePress的基本使用

VuePress 文档地址

• https://vuepress.vuejs.org/

项目初始化

mkdir vuepress-demo
cd vuepress-demo
npm init -y

安装 vuepress 为本地依赖

yarn add vuepress -D

创建 docs 目录 在markdown文件中随便写点东西

WeChat90b563326f915428c9f33e0072cbe31c.png

修改package.json的script启动脚本

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

启动,默认是 http://localhost:8080/

yarn docs:dev

image.png

主题配置,docs目录下添加 .vuepress/config.js,详情看文档 https://vuepress.vuejs.org/zh/theme/default-theme-config.html#%E4%BE%A7%E8%BE%B9%E6%A0%8F

config.js 中的配置代码

// VuePress 的配置文件
module.exports = {
    title: 'Hello VuePress', // meta 中的 title
    description: 'Just playing around', // meta 中的 description
    themeConfig: {
        nav: [{ // 导航栏
                text: 'Home',
                link: '/'
            },
            {
                text: 'Guide',
                link: '/guide/'
            },
            {
                text: 'External',
                link: 'https://google.com'
            },
        ],
        sidebar: [ // 侧边栏
            '/',
            '/page-a',
            ['/page-b', 'Explicit link text']
          ]
      
    }
}

生成的文档

image.png

项目的目录结构

image.png

注意

• 配置侧边栏的路径一定要存在
• 如果没有及时热更新,就重新运行 yarn docs:dev