vuePress


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

1.项目初始化

yarn init # npm init

2.安装依赖

将 VuePress 安装为本地依赖
我们已经不再推荐全局安装 VuePress

yarn add -D vuepress # npm install -D vuepress

###

3.配置 package.json

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

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

4.安装主题 vuepress-theme-reco

yarn add vuepress-theme-reco # npm install vuepress-theme-reco --save-dev

5.创建.vuepress 文件夹并创建 config.js 配置文件

mkdir docs/.vuepress && touch docs/.vuepress/config.js
  1. 编辑 config.js 文件
module.exports = {
  title: "Title", //首页左上角title
  theme: "reco", // 应用博客主题
  themeConfig: {
    type: "blog",
    nav: [
      // 首页导航栏
      { text: "Home", link: "/", icon: "reco-home" },
      { text: "TimeLine", link: "/timeline/", icon: "reco-date" },
    ],
    author: "xxx", // 首页作者
    authorAvatar: "https://vuepress.vuejs.org/hero.png", // 首页头像
    subSidebar: "auto", // 博客页面的目录
    // 博客配置
    blogConfig: {
      category: {
        location: 2, // 在导航栏菜单中所占的位置,默认2
        text: "Category", // 默认文案 “分类”
      },
      tag: {
        location: 3, // 在导航栏菜单中所占的位置,默认3
        text: "Tag", // 默认文案 “标签”
      },
      socialLinks: [
        // 信息栏展示社交信息
        { icon: "reco-github", link: "https://github.com/recoluan" },
        { icon: "reco-npm", link: "https://www.npmjs.com/~reco_luan" },
      ],
    },
  },
};

5.创建主页

新建 docs 文件夹用来存放博客文件

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

进入到 docs 里面创建一个README.md文件,这个文件就是我们的首页,我们在里面编辑一些内容

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

6.在本地启动服务器

yarn docs:dev # npm run docs:dev

###

7、编译

按 ctrl+C 结束运行,执行以下命令编译

npm run build

编译完成以后在 docs 文件夹下多了一个.vuepress 文件夹

这个文件是全局重要的配置文件,包括配置网站的标题、描述、主题、导航栏等信息,内容如下:

module.exports = {
  title: "XXX的博客",
  description: "XXX的博客",
  dest: "./dist",
  port: "8080",
  head: [["link", { rel: "icon", href: "/logo.jpg" }]],
  markdown: {
    lineNumbers: true,
  },
  themeConfig: {
    nav: [
      {
        text: "指南",
        link: "/guide/",
      },
    ],
    sidebar: {
      "/guide/": [
        {
          title: "新手指南",
          collapsable: true,
          children: ["/guide/notes/one"],
        },
        {
          title: "java",
          collapsable: true,
          children: ["/guide/notes/two"],
        },
      ],
    },
    sidebarDepth: 2,
    lastUpdated: "Last Updated",
    searchMaxSuggestoins: 10,
    serviceWorker: {
      updatePopup: {
        message: "有新的内容.",
        buttonText: "更新",
      },
    },
    editLinks: true,
    editLinkText: "在 GitHub 上编辑此页 !",
  },
};

9、写文章

完成了基础搭建后,按照 config.js 里面配置的目录结构,在 docs 目录下新增相应的.md 文件,一篇文章就是一个.md 文件


文章作者:   leader755
版权声明:   本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 leader755 !
评论
 上一篇
小程序之间互相跳转 小程序之间互相跳转
一.背景: 在小程序里可以打开另一个小程序,让小程序之间可以互相连接跳转,类似于网页之间通过 URL 链接互相跳转。不仅可以打开另一个小程序的首页,还可以打开另一个小程序的任何一个页面,这让小程序之间的功能连接更自由。 二.解决方案:小程
2022-02-06
下一篇 
Serverless云函数自动化 Serverless云函数自动化
1.流程:语雀 webhook→Serverless→github api 2.Serverless 配置 你得先有腾讯云或者阿里云账户,没有注册的话,这些注册需要验证手机,甚至实名认证。这里以腾讯云为例,在腾讯云中开通 Serverle
2021-10-19
  目录