vuepress保姆级教学

最新推荐文章于 2025-03-08 22:20:21 发布

wananzss

最新推荐文章于 2025-03-08 22:20:21 发布

阅读量1.3k

点赞数 30

文章标签：前端 vue

本文链接：https://blog.youkuaiyun.com/wananzss/article/details/143788446

版权

1.安装

1.1注意事项

请确保你的 Node.js 版本 >= 8。

以下命令根据系统及插件选择允许。

1.2全局安装

1.2.1新建任意文件夹

例如新建OAVuePress，新建后进入OAVuePress文件夹

1.2.2初始化文件夹

鼠标右键调处命令窗口或“win+R”输入cmd，进入到刚才创建的文件夹下

在命令窗口输入

npm init -y

初始化项目，初始化成功后当前文件夹下，生成了package.json文件

1.2.3拉取vuepress

在刚才的文件夹里面打开命令窗口，输入命令

npm install -D vuepress

运行成功后，可以看到原本的文件夹下方多了两个文件，到这里就算安装成功了

1.3运行VuePress

1.3.1VuePress首页

根据自身情况，用开发工具打开刚才创建的OAVuePress文件，此处以IDEA为例。

在OAVuePress文件下创建文件"README.md"，在"README.md"文件内编辑自己想要的内容，如果想要和VuePress官网相同也可以去官网复制主题https://v1.vuepress.vuejs.org/zh/theme/default-theme-config.html

1.3.2运行VuePress

命令窗口运行

vuepress dev

运行成功后VuePress 会在 http://localhost:8080（当8080端口被占用时会发生变化）启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。

运行成功后，在浏览器访问对应地址，就可以看到自己在"README.md"填写的内容

2.配置

2.1文件配置

在OAVuePress文件新建".vuepress"文件夹，用于存放VuePress项目所需要的配置文件

进入到新建的".vuepress"文件夹，创建"public"文件夹，该文件夹下面用于存放图片资源

2.2config.js配置

在".vuepress"文件下，创建"config.js"文件，用于管理VuePress的文档接口

根据实际需求配置"config.js"文件

1.title: 网站的标题。

2.description: 网站的描述，通常用于SEO（搜索引擎优化）目的，帮助搜索引擎了解网站的内容。

3.markdown: 这是一个对象，包含了Markdown渲染器的配置。

4.lineNumbers: 设置为true，意味着在渲染Markdown文件时，代码块将显示行号。

5.themeConfig: 主题配置对象，用于自定义网站的外观和行为。

6.nav: 这通常是一个包含导航链接的JavaScript文件。

7.sidebar: 这通常是一个包含侧边栏链接结构的JavaScript文件，用于页面导航。

module.exports = {
    title: '',
    description: '',
    markdown: {
        lineNumbers: true
    },
    themeConfig: {
        nav:  [
            {text: '首页', link: '/',}
        ],
        sidebar:
            {
                '/': [
                    "systemLogin",  // 对应md文档名字，名字可以自定义
                    "portalOperation"  // 可以添加多个
                ],
            },
        sidebarDepth: 2,
        searchMaxSuggestions: 10,
    }
}

2.3配置sidebar对应的文件

之前在"config.js"文件里配置了sidebar，那么对应的也需要有对应名字的md文件

根据自己想要的内容填写md文件，注意sidebar对应的md文件应该和"config.js"配置的路径相同，例如这里是"/"需要放在OAVuePress文件下，如果"config.js"里sidebar配置的是"/file/"，那么就应该放在OAVuePress文件下面的file文件夹里面(文件自行手动创建)