# blog-admin-view

**Repository Path**: nicholasgub/blog-admin-view

## Basic Information

- **Project Name**: blog-admin-view
- **Description**: 一个带后台管理的博客项目，用于知识分享...
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-21
- **Last Updated**: 2023-06-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
    <img src="https://img.shields.io/badge/Vue-3.2.45-brightgreen.svg"/>
    <img src="https://img.shields.io/badge/Vite-4.1.0-green.svg"/>
    <img src="https://img.shields.io/badge/Element Plus-2.2.32-blue.svg"/>
    <img src="https://img.shields.io/badge/license-MIT-green.svg"/>
    <a href="https://gitee.com/nicholasgub" target="_blank">
        <img src="https://img.shields.io/badge/Author-NicholasGUB-orange.svg"/>
    </a>
</p>
<p align="center">
<a target="_blank" href="https://gitee.com/nicholasgub/blog-service">项目后端接口</a>|
<a target="_blank" href="http://117.50.180.236/">项目地址</a>
</p>

## 项目介绍

[blog-admin-view](https://gitee.com/nicholasgub/blog-admin-view) 是基于 [vue3-element-admin](https://blog.csdn.net/u013737132/article/details/124522947) 的博客后台管理系统，使用 Vue3、Vite4、TypeScript、Pinia、Element Plus 当前主流技术栈开发。

## 技术栈

| 技术栈 | 描述 | 官网 |
| --- | --- | --- |
| Vue3 | 渐进式 JavaScript 框架 | https://v3.cn.vuejs.org/ |
| TypeScript | JavaScript 的一个超集 | https://www.tslang.cn/ |
| Vite | 前端开发与构建工具 | https://cn.vitejs.dev/ |
| Element Plus | 基于 Vue 3，面向设计师和开发者的组件库 | https://element-plus.gitee.io/zh-CN/ |
| Pinia | 新一代状态管理工具 | https://pinia.vuejs.org/ |
| Vue Router | Vue.js 的官方路由 | https://router.vuejs.org/zh/ |

## 目录结构
```
├── build                      # 构建相关
├── public                     # 静态资源
│   │__ logo.png               # 项目logo
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.ts                # 入口文件 加载组件 初始化等
│   └── permission.ts          # 权限管理
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .prettierrc.js             # 代码格式配置
├── index.html                 # html模板
├── postcss.config.js          # postcss 配置
├── tailwind.config.js         # tailwind 配置
├── tsconfig.json              # typescript 配置
├── tsconfig.node.json         # typescript node 配置
├── vue.config.js              # vue-cli 配置
└── package.json               # package.json
```

## 项目预览

| ![登录](./plication/images/login.png) | ![分类](./plication/images/category.png) |
| --- | --- |
| ![博客](./plication/images/blog.png) | ![博客](./plication/images/blog2.png) |

## 环境要求

- Node 环境

  版本：16+

- 开发工具

  VSCode

- 必装插件

  - Vue Language Features (Volar)
  - TypeScript Vue Plugin (Volar)

## 项目启动

```bash
# 安装依赖
npm install

# 项目运行
npm run dev

# 项目打包
npm run build:prod
```