前端-VuePress 快速建站工具

我是一个后端开发，可能对前端存在某些误解，所以一下仅代表我个人理解

这个东西是干嘛的
就是一个文档编在线展示的工具，类似于博客，当然我们看到的这个vue-press这个官网就是这样的，当然，相信你开始了解vue-press的时候已经知道它能干嘛了。

安装vue-press 使用环境

// 官方参考文档
https://vuepress.vuejs.org/zh

// 新建一个目录,在目录中创建一个docs文件夹，并在里面简历第一个md文件
mkdir docs && echo '# Hello VuePress' > docs/README.md

// 安装vuepress 
npm install -D vuepress

// 初始化一下默认的项目
npm init 

// 这样会在目录下生成一个package.json 文件, 在里面指定一下启动命令
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

// 启动一下，然后可以访问一下http://localhost:8080/ 粗看一下效果
npm run docs:dev

vue-press 配置

1.默认主题-首页展示

// 注意这里，刚开始给我卡主了，我并不了解前端的 YAML front matter 就按照后端的yaml 写的
// 并不能正确的显示页面,所以按照官网的抄，就抄全面点的好
---
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

2.导航栏Logo

// 默认文件夹在公共目录  .vuepress/public 
module.exports = {
  themeConfig: {
    logo: '/assets/img/logo.png',
  }
}

3.横向导航栏配置

// 这里很好理解，有点像vue-router,link 可以指定路由地址，也可以指定连接
// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'External', link: 'https://google.com' },
    ]
  }
}

4.侧边栏

// 可以开启自动识别md标题自动生成侧边栏
// .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: 'auto'
  }
}

5.基于git 的最后更新时间

// .vuepress/config.js
module.exports = {
  themeConfig: {
    lastUpdated: 'Last Updated', // string | boolean
  }
}
// 当前的更新时间是英文的, 可以安装时间格式化插件 moment
pnpm install -D moment
// .vuepress/config.js 配置该插件
const moment = require('moment');
// 中文格式化
moment.locale('zh-cn')
// moment 官网 https://momentjs.devjs.cn/
plugins: [
    [
      '@vuepress/last-updated',
      {
        transformer: (timestamp) => {
          return moment(timestamp).format('LLLL')
        }
      }
    ]
  ]

6. PWA 提示更新内容可用