# weblog-vue3

**Repository Path**: MagicToDo/weblog-vue3

## Basic Information

- **Project Name**: weblog-vue3
- **Description**: 个人博客前端部分代码
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-15
- **Last Updated**: 2024-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# weblog-vue3

采用vue3+vite开发的前端博客代码，包含前后台
运行环境：node v16.13.0 
支持markdown语法发布文章 

## 技术选型

**开发框架：**

"vue": "^3.3.4",

**样式组件框架：**

 "element-plus": "^2.4.2"

**css框架：**

"tailwindcss": "^3.3.5",

"flowbite": "^2.1.1"

**路由插件：**

"pinia": "^2.1.7"   

**异步http请求：**

"axios": "^1.6.2"

**构建工具**

"vite": "^4.4.11"

**markdown**

"md-editor-v3": "^4.8.3"

## 代码结构

weblog-vue3                                
├─ src                                     
│  ├─ api                  后台接口                                                                      
│  ├─ assets               静态图片等资源                                                          
│  ├─ components           封装的一些公共组件                      
│  ├─ composables                                           
│  ├─ layouts              公共组件                                  
│  ├─ pages                页面功能                                              
│  ├─ router               路由                   
│  ├─ stores               状态管理库              
│  ├─ App.vue                              
│  ├─ axios.js                             
│  ├─ main.js                              
│  └─ permission.js                        
├─ index.html                              
├─ package-lock.json                       
├─ package.json                            
├─ postcss.config.js                       
├─ README.md                               
├─ tailwind.config.js                      
└─ vite.config.js   

## 运行方法  


拉取：git clone https://gitee.com/MagicToDo/weblog-vue3.git

安装依赖：npm install

运行：npm run dev

构建：npm run build

## 样式：

> [!NOTE]
>
> 博客地址：https://www.magictodo.cn/#/    查看密码 test/test

### PC端

#### 前台页面

**主页**

![image-20240421005602095](https://netr4fhflp4p.xiaomiqiu.com:443/markdown/202404210056259.png)

**文章详情**

![image-20240421005918001](https://netr4fhflp4p.xiaomiqiu.com:443/markdown/202404210059091.png)

**文章评论能自动根据qq号获取头像；评论显示ip地址**

![image-20240421024838937](https://netr4fhflp4p.xiaomiqiu.com:443/markdown/202404210248017.png)

**分类页**

![image-20240421005634708](https://netr4fhflp4p.xiaomiqiu.com:443/markdown/202404210056796.png)

**标签页**

![image-20240421005702053](https://netr4fhflp4p.xiaomiqiu.com:443/markdown/202404210057140.png)

**知识库**

![image-20240421005734361](https://netr4fhflp4p.xiaomiqiu.com:443/markdown/202404210057464.png)

**归档页**

![image-20240421005807778](https://netr4fhflp4p.xiaomiqiu.com:443/markdown/202404210058891.png)





#### 后台页面

**支持统计数据**

![image-20240421003304735](https://netr4fhflp4p.xiaomiqiu.com:443/markdown/202404210033853.png)

**文章管理**

![image-20240421005357247](https://netr4fhflp4p.xiaomiqiu.com:443/markdown/202404210053351.png)

![image-20240421010706903](https://netr4fhflp4p.xiaomiqiu.com:443/markdown/202404210107013.png)

**分类管理**

![image-20240421005453469](https://netr4fhflp4p.xiaomiqiu.com:443/markdown/202404210054554.png)

**标签管理**

![image-20240421025023036](https://netr4fhflp4p.xiaomiqiu.com:443/markdown/202404210250127.png)

**知识库管理**

![image-20240421025045253](https://netr4fhflp4p.xiaomiqiu.com:443/markdown/202404210250340.png)

**评论管理**

![image-20240421025111236](https://netr4fhflp4p.xiaomiqiu.com:443/markdown/202404210251326.png)

**博客设置**

![image-20240421025132974](https://netr4fhflp4p.xiaomiqiu.com:443/markdown/202404210251063.png)