VuePress简单使用

举报
坚果的博客 发表于 2022/07/31 11:52:36 2022/07/31
【摘要】 VuePress 由两部分组成:第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。安装VuePress 需要 Node.js (opens new window)>= 8.6本文会帮助你从头搭建一个简单的 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就可以了

运行效果:

image-20220731114943604

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。