VuePress 入门

最新推荐文章于 2024-08-10 08:04:41 发布

destinytaoer

最新推荐文章于 2024-08-10 08:04:41 发布

阅读量635

点赞数

分类专栏：前端资源搭建博客

本文链接：https://blog.csdn.net/destinytaoer/article/details/87869255

版权

VuePress 是一款由 Vue 驱动的静态网站生成器，适合技术文档编写。本文档介绍了VuePress的初始化、配置、首页设置、开发部署以及自动化部署流程，帮助你快速上手。

摘要由CSDN通过智能技术生成

VuePress 是一款使用 Vue 驱动的静态网站生成器，是 Vue 的作者 Evan You 为了方便文档的编写而开发的。

默认主题与 Vue 官方文档一致
简洁，少配置，高性能
Markdown 专为技术文档提供拓展
自带 PWA
自定义主题，可定制程度完全由自己决定

官方文档：由于 1.x 还处于测试阶段，可能随时变更，所以建议选用 0.x 版本

0.x 版本

1.x 版本

1. 初始化

安装

首先需要安装 vuepress

可以使用全局安装：（选一个版本安装即可，使用 yarn 或 npm 都可以）

yarn add global vuepress # 0.x 版本
yarn add global vuepress@next # 1.x 版本

也可以使用局部安装，在你的项目根目录下：

yarn add -D vuepress
yarn add -D vuepress@next

注意有一个坑，我遇到过，安装 vuepress@next 以及其他插件时，默认会安装 alpha 0 版本，需要修改 package.json 文件，更改版本号，再重新使用 yarn 安装一下。

另外，全局安装与局部安装在后面的部署命令中会有些差别。

结构目录

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

可详细查看：目录结构

2. 配置 config.js 文件

基础配置

module.exports = {
   
  title: "destiny'Note",
  description: "生命的意义不仅是活着，而是我们给别人的生命带来了何种不同。",
  base: '/', // 项目根路径
  dest: '/dist/', // 打包后的文件夹路径，为了方便，我把 dist 文件夹放到了根目录上
  // head 标签中的额外内容
  head: [
    ['link', {
    rel: