vuepress搭建在线文档

项目创建

1、创建并进入一个新目录

mkdir vuepress-starter && cd vuepress-starter

2、使用你喜欢的包管理器进行初始化

yarn init # npm init

3、将 VuePress 安装为本地依赖

不推荐全局安装 VuePress

yarn add -D vuepress # npm install -D vuepress

4、创建你的第一篇文档

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

5、在 package.json 中添加一些 scripts

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

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

6、在本地启动服务器

yarn docs:dev # npm run docs:dev

基本配置

1、在文档目录下创建一个 .vuepress 的文件夹，所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样：

. ├─ docs
│ ├─ README.md
│ └─ .vuepress
└─ package.json

一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象：

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around'
}

导航栏

1、导航栏 配置主要就两种方式，一级导航和下拉列表导航。修改 config.js。

module.exports = {
    themeConfig: {
                nav: [
                    // 一级导航
                    { text: '指南', link: '/guide/' },
                    // 下拉列表导航
                    {
                        text: '了解更多',
                        items: [
                        { text: 'github', link: 'www.baidu.com', target: '_blank' },
                        { text: 'preview', link: 'www.baidu.com', target: '_blank' }
                        ]
                    }
                    ],

      },
  }

配置路由

. ├─ docs
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
└─ package.json

此时我们就得到一个完整的导航栏了

侧边栏

1，首先在 guide 中创建 Button.md Card.md 文件。

. ├─ docs
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ │ └── Button.md
│ │ └── Card.md
└─ package.json

2，修改 config.js 文件

sidebar: {
   '/guide/': [
    ['', '介绍'], // '' 等价于 /guide/
        {
         title: '组件',
         collapsable: false,
         children: [
            ['../guide/Button.md', 'Button'],
            ['../guide/Card.md', 'Card']
          ]
        }
       ],
    }, 

插入静态资源

1、在 .vuepress 中新建一个 public 文件夹存储咱们的静态资源。

. ├─ docs
│ ├── .vuepress
│ │ ├── config.js
│ │ └── public
│ ├── guide
│ │ ├── Button.md
│ │ ├── Card.md
│ │ └── README.md
│ └─ README.md
└─ package.json

引入静态资源示例："/element.png"

markdown

具体语法拓展

• 调用别人写好的轮子：www.npmjs.com/package/vue…

具体用法详见juejin.cn/post/685457…