# vue-admin-template

**Repository Path**: pigIsDuck/vue-dh-admin-template

## Basic Information

- **Project Name**: vue-admin-template
- **Description**: 该项目为一个 vue3 + vite + TS + pinia + Element-plus的通用管理后台项目，最多支持四级菜单选项，后续会追加数据大屏
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: vue3-dh-admin
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 24
- **Forks**: 0
- **Created**: 2021-12-26
- **Last Updated**: 2024-08-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, Pinia, vite, vue-router, TypeScript

## README

<div align="center">
	<a href="https://vuejs.org" target="_blank" rel="noopener noreferrer"><img width="100" src="https://vuejs.org/images/logo.png" alt="Vue logo"></a>
	<p align="center">
	    <a href="https://v3.vuejs.org/" target="_blank">
	        <img src="https://img.shields.io/badge/vue.js-vue3.x-green" alt="vue">
	    </a>
	    <a href="https://element-plus.gitee.io/#/zh-CN/component/changelog" target="_blank">
	        <img src="https://img.shields.io/badge/element--plus-%3E2.0.0-blue" alt="element plus">
	    </a>
			<a href="https://www.tslang.cn/" target="_blank">
	        <img src="https://img.shields.io/badge/typescript-%3E4.0.0-blue" alt="typescript">
	    </a>
			<a href="https://pinia.vuejs.org/" target="_blank">
					<img src="https://img.shields.io/badge/pinia-%3E2.0.0-yellow" alt="vite">
			</a>
			<a href="https://vitejs.dev/" target="_blank">
		    <img src="https://img.shields.io/badge/vite-%3E2.0.0-yellow" alt="vite">
			</a>
			<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/LICENSE" target="_blank">
					<img src="https://img.shields.io/badge/license-MIT-success" alt="license">
			</a>
	</p>
	<p>&nbsp;</p>
</div>

#### 线上预览

<a href="http://pigisduck.gitee.io/vue-dh-admin-template" target="_blank">http://pigisduck.gitee.io/vue-dh-admin-template</a>


#### 介绍

​	该项目是一个基于 vue3x + script setup语法 + TypeScript + vite + element-plus + pinia + vue-router的一个PC后台开源模板，采用pnpm作为打包工具。

​	其灵感来源于 codewhy 老师的 vue3 项目封装思想，以及 vue-element-admin 的鉴权动态路由思想，结合我本人的开发经验，开发出来的一个PC端管理后台

​	基本思路为：

​	在路由守卫中去完成鉴权操作

​	封装好基本的 page-search 、page-content 、 page-modal 三个组件，通过页面传入 config 去直接渲染出页面搜索栏、表格栏、弹框操作，并通过编写好的 hook 使得页面代码非常短小便可以完成最基本的 CRUD 基本操作

<img src="./docs/images/店铺管理页面.png" style="zoom:50%;" />

#### 数据来源

数据使用 mock 去生成假数据，数据均在 /mock/data 下面，包括但不限于 路由数据、登录用户数据 等



#### 使用说明

该项目采用 pnpm 的方式，如果使用 npm 或者 yarn 的话，可以注释掉下面的代码

````js
// vite.config.ts
// 打包处理
build: {
	rollupOptions: {
		// 打包后文件进行分包
		output: {
			chunkFileNames: 'static/js/[name]-[hash].js',
			entryFileNames: 'static/js/[name]-[hash].js',
			assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
            // 这里注释掉，这里是为了 pnpm 的打包分割依赖包
			// manualChunks(id) {
			//   // 对于依赖包进行切割打包
			//   if (id.includes('node_modules')) {
			//     return id.toString().split('node_modules/')[1].split('/')[0].toString().replace('.', '');
			//   }
			// }
		}
	}
},
````

````
# 克隆项目
git clone https://gitee.com/pigIsDuck/vue-dh-admin-template.git

# 安装依赖
pnpm i

# 运行项目
pnpm dev

# 打包发布
pnpm build
````



#### 一些作者的心里话

​	这个项目是我第一个开源的后台模板项目，个人开发会有很多的不足，如果可以，也希望各位大佬给一些反馈，我会在空闲时间认真查看，并作出相应的回复。

​	大家可以看看源码，学习一下封装思想，如果对您有帮助，觉得框架不错，也希望帮我点一点 star，这是对我最大的鼓励和支持，谢谢

​	文档目前还在编写中，后续会有一些简单的教学文档，也会增加一些其他的组件，敬请期待

#### 后续开发事项

[代办事项](./TODO.md)