写点什么

开源一夏 | VuePress 的简单使用

作者:坚果
  • 2022 年 8 月 03 日
  • 本文字数:1090 字

    阅读完需:约 4 分钟

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
复制代码


  1. 初始化


    npm init
复制代码


  1. 将 VuePress 安装为本地依赖

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


   npm install -D vuepress
复制代码


注意


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


  1. 创建你的第一篇文档


   mkdir docs && echo '# Hello VuePress' > docs/README.md
复制代码


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

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


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


  1. 在本地启动服务器


    npm run docs:dev
复制代码


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


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


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


// .vuepress/config.jsmodule.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 就可以了


运行效果:



发布于: 1 小时前阅读数: 3
用户头像

坚果

关注

此间若无火炬,我便是唯一的光 2020.10.25 加入

公众号:“大前端之旅”,华为云享专家,InfoQ签约作者,51CTO博客首席体验官,专注于大前端技术的分享,包括Flutter,小程序,安卓,VUE,JavaScript。

评论

发布
暂无评论
开源一夏 | VuePress的简单使用_开源_坚果_InfoQ写作社区