# ResponsiveBlog

**Repository Path**: achens/VueBlog

## Basic Information

- **Project Name**: ResponsiveBlog
- **Description**: 基于 Vue2 制作的博客。包含了原生模板，可直接二改。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-05-30
- **Last Updated**: 2024-06-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Description: 响应式博客描述文件
 * @Author: CY小尘s
 * @Date: 2021-07-04 17:58:40
 * @LastEditTime: 2021-08-25 01:09:39
 * @LastEditors: 学习
-->
# 导言
    期初只是在 B 站上看见的一个小 Demo，想着跟着视频写一遍练练手。但是写完后看着这单挑页面便想着美
化一下，攒攒经验，为以后自己的个人博客大点经验，但是没想到。。。emmm，写着写着写多了，想着这里加点,哪里加点，就慢慢改成这个样子了。
制作思路及过程：
https://www.yuque.com/docs/share/77578f40-8201-4682-aeba-880b1b497dfc?#
## 一、分支说明
- master：默认分支，是完整版响应式 VueBlog，使用 json-server 模拟了后台服务器。
- dev：去除了 json-server、axios 的版本，数据都是固定的，主要用于搭建静态网站。
## 二、图片预览
1. 登录页
![登录页](/src/assets/img/1.png "登录页")
2. pc 端首页
![pc 端首页](/src/assets/img/2.png "pc 端首页")
3. pc 端首文章添加页
![pc 端首文章添加页](/src/assets/img/3.png "pc 端首文章添加页")
4. pc 端关于页
![pc 端关于页](/src/assets/img/4.png "pc 端关于页")
5. pe 端首页
![pe 端首页](/src/assets/img/5.png "pe 端首页")
6. pe 端文章添加页
![pe 端文章添加页](/src/assets/img/6.png "pe 端文章添加页")
7. pe 端关于页
![pe 端关于页](/src/assets/img/7.png "pe 端关于页")
## 三、后台页面说明
### Src --> View（blog 页面视图）：
#### Home ：
```
单页面，作为博客的进入页
```
#### Blog：
```
多页面，负责展示页面
```
### Src --> components（blog 组件）：
#### Header：
```
blog 展示的头部组件
```
#### ArticleList：
```
blog 展示的主要内容组件
```
#### AddArticle：
```
blog 文章添加组件
```
#### Flooter：
```
博客尾部组件
```
#### QuillEditor：
```
富文本组件
```
#### ShowBlog：
```
博客预览组件
```
#### About：
```
关于博客
```
#### Artiecle：
```
博客文章
```
#### Skills：
```
技能条
```
### src --> assets --> js（公有函数库）：
#### commons.js：
```
初始化博客上传时间插件
```
## 三、使用教程
### 克隆项目
```
git clone https://gitee.com/qingchen666/VueBlog.git
```
### 在克隆的文件夹下安装配置文件
```
npm install
```
### 运行（建议在 Vue ui 中调试运行）
```
// 运行项目
npm run serve
// 运行服务器
npm run server
```