vuepress简单使用

最新推荐文章于 2024-08-19 20:25:46 发布

JAVA道人

最新推荐文章于 2024-08-19 20:25:46 发布

阅读量969

点赞数

分类专栏：框架技术tmp 文章标签： vue

本文链接：https://blog.csdn.net/dmw412724/article/details/130843433

版权

框架技术tmp 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

本文介绍了VuePress的基础使用方法，包括通过npm初始化项目，安装VuePress，配置scripts，启动本地服务器。接着，文章讨论了Markdown文件的组织结构，如README.md转化为首页，以及自定义配置如标题和侧边栏的创建，帮助用户构建左侧导航菜单。

摘要由CSDN通过智能技术生成

vuepress简单使用

1.基础配置

找个文件夹npm init,生成一个package.json

npm init

加载vuepress

npm install -D vuepress

在 package.json 中添加一些 scripts

这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些 scripts 已经被添加。

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

然后就可以运行下试试看,就会发现网站启动了.一般是http://localhost:8080

2.添加md文件

VuePress 遵循 “约定优于配置” 的原则，推荐的目录结构如下：

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── aaa
│   │   └── README.md
│   │   └── aaa-1.md
│   │   └── aaa-2.md
│   └── bbb.md
│ 
└── package.json

要新建一个docs文件夹
其中,docs/.vuepress 是配置文件夹.

其他的就是具体的md文件页面.
注意有些规则:

README.md = index.html = /
比如上面的docs/README.md 在浏览器上的访问路径就是 /
xxx.md = xxx.html
比如上面的docs/bbb.md 在浏览器上的访问路径就是 /bbb.html
docs/aaa/README.md 访问路径就是/aaa/
docs/aaa/aaa-1.md 访问路径就是/aaa/aaa-1.html

我们在项目里面添加些md文件,重新启动项目,就可以在浏览器里面查看了

3.添加标题和侧边栏

新建docs/.vuepress/config.js

module.exports = {
  title: '我是左上角',
  themeConfig: {// 主题设置
    sidebar: {//左侧列表
        '/': [{
            title: '我是大菜单AAA',
            children: [
                {title: '1. aaa1小标题', path: '/aaa/aaa-1.html'},
                {title: '2. aaa2小标题', path: '/aaa/aaa-2.html'},
            ]
        },{
            title: '我是大菜单BBB',
            path: '/bbb.html'
        },]  
    }
  },
  

}