# 使用 VuePress 搭建在线文档网站
# 0. 在线文档
VuePress 官方在线文档 (opens new window)
# 1. 搭建基本环境
# 将 VuePress 作为一个本地依赖安装
npm install -D vuepress
# 新建一个 docs 文件夹
mkdir docs
# 新建一个文件: docs/README.md
echo '# Hello VuePress!' > docs/README.md
# 启动文档项目
npx vuepress dev docs
# 构建静态文件
npx vuepress build docs
|-- docs
|-- .vuepress
|-- config.js
|-- README.md
# 2. 配置 ts 教程文档
- 整体结构
|-- dist
|-- dics
|-- .vuepress
|-- public
|-- ts-logo.png
|-- config.js
|-- chapter1
|-- 01_初识TS.md
|-- 02_安装TS.md
|-- 03_HelloWorld.md
|-- chapter2
|-- 1_type.md
|-- 2_interface.md
|-- 3_class.md
|-- 4_function.md
|-- 5_generic.md
|-- 6_other.md
|-- chapter3
|-- 01_react.md
|-- 02_vue.md
|-- chapter4
|-- README.md
|-- README.md
|-- package.json
- 增加
docs/.vuepress/config.js
// 注意: base的值为github仓库的名称
module.exports = {
base: '/ts-study/' /* 基础虚拟路径: */,
dest: 'dist' /* 打包文件基础路径, 在命令所在目录下 */,
title: 'TypeScript 入门', // 标题
description: '学习使用 TypeScript', // 标题下的描述
themeConfig: {
// 主题配置
sidebar: [
// 左侧导航
{
title: '初识 TypeScript', // 标题
collapsable: false, // 下级列表不可折叠
children: [
// 下级列表
'chapter1/01_初识TS',
'chapter1/02_安装TS',
'chapter1/03_HelloWorld'
]
},
{
title: 'TypeScript 常用语法',
collapsable: false,
children: ['chapter2/1_type', 'chapter2/2_interface', 'chapter2/3_class', 'chapter2/4_function', 'chapter2/5_generic']
}
]
}
}
- 增加
docs/README.md
---
#首页
home: true
# 图标
heroImage: /ts-logo.png
# 按钮文本
actionText: 开始学习 →
# 按钮点击跳转路径
actionLink: /chapter1/01_初识TS
---
- 修改
package.json
"scripts": {
"doc:dev": "vuepress dev docs",
"doc:build": "vuepress build docs",
"doc:deploy": "gh-pages -d docs/dist"
}
# 3. 发布到 gitpage
使用 git 管理当前项目
将打包的项目推送到 gitpage
# 下载工具包
yarn add -D gh-pages
# 执行打包命令
yarn doc:build
# 执行部署命令
yarn doc:deploy