vuePress从零开始搭建自己专属的文档集合

VuePress 由两部分组成:一部分是支持用 Vue 开发主题的极简静态网站生成器,另一个部分是为书写技术文档而优化的默认主题。在VuePress应用的目录里面,一个.md文件可以生产一个.html文件,文件夹目录下默认访问README.md文件,也就相当于目录下的index.html,所以本地测试环境访问的链接如:http://localhost:8081/bar/barOne.html

确保你的系统node.js版本 >= 8

环境搭建

安装

全局安装:

npm install -g vuepress

创建项目目录:

mkdir myproject

初始化项目:

cd myproject

npm init -y

新建docs文件夹:

mkdir docs

新建markdown文件:

echo '# Hello VuePress!' > README.md

设置package.json启动:

运行npm run build会生成静态目录dist

{
  "scripts": {
    "start": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}
复制代码

创建.vuepress目录:

进入docs文件夹中创建.vuepress目录存放vuePress的相关文件

cd docs

mkdir .vuepress

创建config.js文件:

进入.vuepress文件夹中创建config.js文件,config.js是vuePress必要的配置文件,它导出一个js对象

cd .vuepress

type nul>config.js

基本配置

站点信息

config.js配置:

config.js文件包含网站的标题,描述,部署信息等配置,其他详细配置见官方文档

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

主题配置

默认主题配置:

进入docs目录,修改README.md文件

---
home: true
heroImage: /hero.png
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
复制代码

导航栏配置:

配置config.js,可以使用themeConfig配置给站点添加导航链接,在docs目录下新建about.md和contact.md文件,其他详细配置请查看官方文档

module.exports = {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'foo', link: '/foo/' },
      { text: 'bar', link: '/bar/' },
      { text: 'About', link: '/about' },
      { text: 'Contact', link: '/contact' },
    ]
  }
}
复制代码

新增其他页面:

为了更好的演示侧边栏效果,新增四个页面,分别在docs目录下新增foo、bar文件夹,foo文件夹里面新建fooOne.md、fooTwo.md、RADME.md文件,新建文件或文件夹可参考上面命令行工具

配置侧边栏:

配置config.js,可以使用sidebar配置给站点添加侧边栏

module.exports = {
    sidebar: {
      '/foo/': [
        '',
        'fooOne',
        'fooTwo'
      ],
      '/bar/': [
        '',
        'barOne',
        'barTwo'
      ]
    }
  }
}

复制代码

搜索配置:

配置config.js,可以使用search配置站点是否禁用启用搜索,可以使用searchMaxSuggestions配置站点搜素显示的结果条数

module.exports = {
    search: true,
    searchMaxSuggestions: 10
  }
}
复制代码

至此,一个简单的vuePress应用基本配置已经完成,最终的config.js文件如下:

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around',
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'foo', link: '/foo/' },
      { text: 'bar', link: '/bar/' },
      { text: 'About', link: '/about' },
      { text: 'Contact', link: '/contact' }
    ],
    sidebar: {
      '/foo/': [
        '',
        'fooOne',
        'fooTwo'
      ],
      '/bar/': [
        '',
        'barOne',
        'barTwo'
      ]
    },
    search: true,
    searchMaxSuggestions: 10
  }
}
复制代码

现在可以运行npm run build构建项目,生产dist目录文件,发布到对应的服务上去了。

转载于:https://juejin.im/post/5caf15ea5188251b1f4d92bd

你可能感兴趣的:(vuePress从零开始搭建自己专属的文档集合)