vuepress使用配置

2020-03-08  本文已影响0人  随风飞2019

mkdir vuepress-test; //创建一个目录
cd vuepress-test ; 进入目录
npm init -y; 初始化目录
创建首页readme.md,编辑内容如下

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

创建主配置目录mkdir .vuepress;//主配置目录,名字不要改
cd .vuepress,//进入配置目录,新建配置文件config.js,编辑如下

module.exports = {
  title: "学习小木屋",
  description: "欢迎来到随风飞的技术小木屋",
  themeConfig: {
    //nav: require("./nav.js"),
    nav: [
      { text: "首页", link: "/" },
      { text: "指南", link: "/guide/" },
      { text: "配置", link: "/xuexibiji/" },
      {
        text: "了解更加多",
        link: "/learnmore/",
        items: [
          { text: "初级篇", link: "/learnmore/part1/" },
          { text: "进阶篇", link: "/learnmore/part12/" },
          { text: "大神篇", link: "http://www.baidu.com" }
        ]
      }
    ],
    sidebar: {
      // "/guide/": require("./sidebar/guide.js"),
      "/guide/": [
        { title: "基本配置", path: "/guide/base.md" },
        { title: "主题配置", path: "/guide/theme.md" },
        {
          title: "导航配置",
          children: ["/guide/nav/one.md", "/guide/nav/two.md"]
        }
      ]
    }
  }
};
里面有分包的写法,也有放在一起的写法,根据情况使用
上一篇下一篇

猜你喜欢

热点阅读