VuePress使用实践 | FrontEnd Demo World

# 概述

技术文档或个人博客
静态网站：不和后端交互，没有从数据库那数据，直接把数据写在前端
用Markdown来写，生成HTML网站
- 生成目录结构到左侧 SideBar 中
- 内部锚点可重定向
- 内置搜索关键字
Markdown 中可以插入 Vue 全局组件

# 成品

我的VuePress博客主页 (opens new window)
官方技术文档 vue 全家桶：

# 搭建

# 前期准备

# 打开终端

#安装VuePress
yarn add global vuepress
## for vue3.x
## yarn add global vuepress@next

# 创建并进入项目
mkdir vuepress-demo && cd vuepress-demo

# 初始化项目
yarn init -y
## 默认配置 yes
## 自动生成 package.json

1
2
3
4
5
6
7
8
9
10
11
12

# 在生成的`package.json`中，添加如下两个启动命令：

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

1
2
3
4

# 命令行手动创建如下结构

vuepress-demo
├─package.json
├─docs
|  ├─README.md
|  ├─.vuepress
|  |     ├─config.js
|  |     ├─public
|  |     |   └images

1
2
3
4
5
6
7
8

有后缀的是文件，没后缀的是文件夹

# 配置 `config.js`

参考

Vuepress的一些说明 (opens new window)
- 防止失效链接 (opens new window)

# 部署

# VuePress 路径错误

在首页 network查看资源请求失败 404；在element中看到路径就有问题 > 通过修改index.html里的内容。将/改为./ 发现部分样式恢复，可以推断是打包的时候全部是绝对路径，而本应该是相对路径

适用于非直接部署到<USERNAME>.github.io.git而是部署到某一仓库
设置部署的目录为根目录下的dist，而不是/docs/.vuepress/dist
设置config.js中的base: <REPO> <REPO>为仓库名
修改delpoy.sh

参考文章

源码

仓库源码 (opens new window)

# 概述

# 成品

# 搭建

# 前期准备

# 打开终端

# 在生成的package.json中，添加如下两个启动命令：

# 命令行手动创建如下结构

# 配置 config.js

# 部署

# VuePress 路径错误

# 在生成的`package.json`中，添加如下两个启动命令：

# 配置 `config.js`