VuePress简单使用

VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

安装

VuePress 需要 Node.js (opens new window)>= 8.6

本文会帮助你从头搭建一个简单的 VuePress 文档。如果你想在一个现有项目中使用 VuePress 管理文档，从步骤 3 开始。

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

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   mkdir vuepress-starter && cd vuepress-starter

   
   

2. 初始化

   
   

   
   

   
   

   
   

   
   

   
   

   
   

    npm init

   
   

3. 将 VuePress 安装为本地依赖

   我们已经不再推荐全局安装 VuePress

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   npm install -D vuepress

   
   

   注意

   如果你的现有项目依赖了 webpack 3.x，我们推荐使用 Yarn (opens new window)而不是 npm 来安装 VuePress。因为在这种情形下，npm 会生成错误的依赖树。

4. 创建你的第一篇文档

   
   

   
   

   
   

   
   

   
   

   
   

   
   

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

   
   

5. 在 package.json 中添加一些 scripts(opens new window)

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

   
   

   
   

   
   

   
   

   
   

   
   

   
   

   {

     "scripts": {

       "docs:dev": "vuepress dev docs",

       "docs:build": "vuepress build docs"

     }

   }

   
   

6. 在本地启动服务器

   
   

   
   

   
   

   
   

   
   

   
   

   
   

    npm run docs:dev

   
   

   VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。

现在，你应该已经有了一个简单可用的 VuePress 文档。

首先来到config.json修改自己所需要的文件

// .vuepress/config.js

module.exports = {

  title:'《Ts教程》',

  dest:'docs',

  markdown: {

   lineNumbers: true

  },

  head: [

    ['link', {  rel: 'icon', href: '/logo.png' }]

  ],

  sidebarDepth: 2,

  themeConfig: {

    logo:'/logo.png',

    nav: [

      // { text: '和作者做同事', link: '/join_us' },

      { text: 'OpenHarmony仓库', link: 'https://gitee.com/openharmony/' },

      { text: '视频教程', link: 'https://space.bilibili.com/480883651' },

      { text: '关于我', link: 'http://jianguojs.cn/' },

    ],

    sidebar: [

      {

        title:"序",

        path:"/preface"

      },

      {

        title:"第一章：起步",

        path:"/chapter1/index",

        collapsable: false,

        children:[

          '/chapter1/mobile_development_intro',

          '/chapter1/flutter_intro',

          '/chapter1/install_flutter',

          '/chapter1/dart'

        ]

      },

    ]

  }

}

​

然后修改summary.md,等文件，

要运行的话

npm run dev就可以了

运行效果：