我是一个后端开发,可能对前端存在某些误解,所以一下仅代表我个人理解
这个东西是干嘛的
就是一个文档编在线展示的工具,类似于博客,当然我们看到的这个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')
}
}
]
]
- PWA 提示更新内容可用