vuePress

blog

vuePress

发布日期: 2022-02-04

更新日期: 2022-03-04

文章字数: 805

阅读时长: 3 分

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

编辑 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 上编辑此页 ！",
  },
};