# blogManager

**Repository Path**: XxingY/blogManager

## Basic Information

- **Project Name**: blogManager
- **Description**: Vue3+ElementPlus+Koa2 全栈开发后台系统技术文档
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 1
- **Created**: 2023-01-05
- **Last Updated**: 2023-11-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

---
title: vuepress + gitee page搭建项目技术文档
author: xingyiyuan
date: "2023-01-05"
---

## vuepress

### 本地搭建

[快速上手 | VuePress (vuejs.org)](https://vuepress.vuejs.org/zh/guide/getting-started.html)

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

   ```bash
   mkdir blogManger && cd blogManger
   ```

2. 使用你喜欢的包管理器进行初始化

   ```bash
   yarn init # npm init -y
   ```

3. 将 VuePress 安装为本地依赖

   ```bash
   yarn add -D vuepress # npm install -D vuepress
   ```

4. 创建第一篇文档，VuePress 会以` docs` 为文档根目录，所以这个 `README.md` 相当于主页：

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

5. 在 `package.json` 中添加一些 scripts

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

### 基础配置

在 `docs` 目录下创建一个 `.vuepress` 目录，在 `.vuepress` 文件夹下添加 `config.js`

- 配置网站的标题和描述 `title + description`
- 配置部署路径 `base` (gitee 仓库名字全部小写)
- 配置导航条 `nav`
- 配置侧边栏目录 `sidebar`
- 配置主题 `theme: "reco"`
  - `npm install vuepress-theme-reco -D`
  - 配置子目录结构 `subSidebar: "auto"`
- 设置语言

  ```js
    locales: {
        "/": {
          lang: "zh-CN",
        },
      },
  ```

整体配置：

```js
module.exports = {
  title: "Vue3+ElementPlus+Koa2 全栈开发后台系统技术文档",
  description: "Vue3+ElementPlus+Koa2 全栈开发后台系统技术文档",
  base: "/blogmanager/",
  theme: "reco",
  locales: {
    "/": {
      lang: "zh-CN",
    },
  },
  themeConfig: {
    subSidebar: "auto",
    nav: [
      { text: "首页", link: "/" },
      {
        text: "课程资料",
        items: [
          {
            text: "慕课网",
            link: "https://coding.imooc.com/class/502.html",
          },
          {
            text: "Gitee",
            link: "https://gitee.com/XxingY",
          },
        ],
      },
    ],
    sidebar: [
      {
        title: "第二章 前端架构设计",
        path: "/chapter2/initProject",
        collapsable: false, // 不折叠
        children: [
          { title: "项目初始化", path: "/chapter2/initProject" },
          { title: "路由封装", path: "/chapter2/router" },
        ],
      },
    ],
  },
};
```

### 文档目录结构

```
.
├─ docs
│  ├─ README.md
   └─ chapter2
      └─ initProject.md
│  └─ .vuepress
│     └─ config.js
└─ package.json
```

## gitee page

### 构建生成静态代码

```bash
npm run build
```

### 提交到 gitee

```bash
git add .
git commit -m "deploy"
git push
```

### 部署到 gitee page

![1672982183618](./README.assets/1672982183618.png)