使用VuePress搭建在线文档网站

0. 在线文档

VuePress官方在线文档

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教程文档

0. 整体结构

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

0. 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',
         ]
       },
     ]
   }
 }

3. docs/README.md

 ---
 #首页
 home: true  
 # 图标
 heroImage: /ts-logo.png
 # 按钮文本
 actionText: 开始学习 →
 # 按钮点击跳转路径
 actionLink: /chapter1/01_初识TS
 ---

4. package.json

 "scripts": {
   "doc:dev": "vuepress dev docs",
   "doc:build": "vuepress build docs",
   "doc:deploy": "gh-pages -d docs/dist"
 }

3. 发布到gitpage

0. 使用git管理当前项目
1. 将打包的项目推送到gitpage