vuepress的使用

一、初使vuepress

https://www.vuepress.cn/guide/getting-started.html

1. 创建并进入一个新目录

mkdir vuepress-starter && cd vuepress-starter

2. 使用你喜欢的包管理器进行初始化。生成了 package.json

npm init // npm init -y (-y免去确认)

3. 将 VuePress 安装为本地依赖. 已经不推荐全局安装 VuePress. 生成了package-lock.json

 npm install -D vuepress

4. 创建你的第一篇文档

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

5. 在 package.json 中添加一些 scripts(opens new window)

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

6. 在本地启动服务器

 npm run docs:dev

VuePress 会在 http://localhost:8080 (opens new window)启动一个热重载的开发服务器。

二、 目录结构

├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide (一般用户都在这个目录下创建网站指南,当然可以不用)
│   │   └── README.md （指南里面的具体内容）
│   └── config.md
│ 
└── package.json 项目初始化时，根目录下自动生成的配置文件,定义了项目的基本配置信息及需要依赖的各个模块、指定运行脚本命令的npm命令行缩写等。
 

• docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
  • docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
  • docs/.vuepress/theme: 用于存放本地主题。
  • docs/.vuepress/styles: 用于存放样式相关的文件。
    • docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS文件结尾，具有比默认样式更高的优先级。
    • docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。
  • docs/.vuepress/public: 静态资源目录。
  • docs/.vuepress/templates: 存储 HTML 模板文件。
  • docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
  • docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
  • docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
  • docs/.vuepress/enhanceApp.js: 客户端应用的增强。
• docs/xxxx: 自己新建的文件夹

三、默认主题配置

https://www.vuepress.cn/theme/default-theme-config.html#%E9%A6%96%E9%A1%B5
.md 其实就是看到的页面

首页

我们看到的首页，是通过配置根路径下的README.md文件实现的、而一些，导航栏、侧边栏，则是通过配置docs/config.js实现。

将docs目录下的README.md中的内容替换，并在public目录下放置一张图片,再次启动。

    注：根路径默认的README.md，会被编译成index.html文件。

---
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
---

新建目录

├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json

logo.png存放到public文件夹下，在config.js中

module.exports = {
  // 网站的一些基本配置
  // base:配置部署站点的基础路径，后续再介绍
  title: 'xxx', // 网站的标题
  description: 'xxxxx', // 网站xxx的描述，它将会以  标签渲染到当前页面的 HTML 中。
  head: [
    ['link', { rel: 'icon', href: '/logo.png' }] // 需要被注入到当前页面的 HTML  中的标签
  ],
}

导航栏

在config.js中themeConfig 是关于导航栏的设置

├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
│   └── blog
│       ├── backend
│          ├── README.md
│       └── fontend
│          ├── README.md
└── package.json

```typescript
themeConfig: {
    logo: '/dh_logo.jpg',
    nav: [
      { text: 'Home', link: '/' },
      // 可指定链接跳转模式：默认target: '_blank'新窗口打开，_self当前窗口打开
      // 这里一定记得最后一个/
      { text: '前端', link: '/blog/fontend/' },
      { text: '后端', link: '/blog/backend/'},
    ]
  }

侧边栏

在config.js中 themeConfig.sidebar: ‘auto’

四、关于markdown

https://www.vuepress.cn/guide/markdown.html

https://blog.csdn.net/xiaoxianer321/article/details/119548202