# md-admin-element-plus

**Repository Path**: hminghe/md-admin-element-plus

## Basic Information

- **Project Name**: md-admin-element-plus
- **Description**: 基于 Vue3 + Ts + Element Plus 的后台应用（适配移动端、权限、多窗口、暗黑模式）
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 0
- **Created**: 2022-04-29
- **Last Updated**: 2024-04-03

## Categories & Tags

**Categories**: backend

**Tags**: None

## README

<p align='center'>
  <table>
    <tr>
      <td><img src="https://mdadmin.maodou.cloud/image/preview/1.jpg"></td>
      <td><img src="https://mdadmin.maodou.cloud/image/preview/2.jpg"></td>
      <td><img src="https://mdadmin.maodou.cloud/image/preview/3.jpg"></td>
    </tr>
    <tr>
      <td><img src="https://mdadmin.maodou.cloud/image/preview/4.jpg"></td>
      <td><img src="https://mdadmin.maodou.cloud/image/preview/5.jpg"></td>
      <td><img src="https://mdadmin.maodou.cloud/image/preview/6.jpg"></td>
    </tr>
    <tr>
      <td><img src="https://mdadmin.maodou.cloud/image/preview/7.jpg"></td>
      <td><img src="https://mdadmin.maodou.cloud/image/preview/8.jpg"></td>
      <td><img src="https://mdadmin.maodou.cloud/image/preview/9.jpg"></td>
    </tr>
  </table>
</p>

<p align='center'>
快速地<sup><em>MdAdmin</em></sup> 创建中后台应用
<br> 
</p>

<br>

<p align='center'>
<a href="https://mdadmin.maodou.cloud/">在线 Demo</a>
</p>

<br>

<p align='center'>
<a href="./README.md">English</a> | <b>简体中文</b>
</p>

<br>

## 特性

- ⚡️ [Vue 3](https://github.com/vuejs/vue-next), [Vite 2](https://github.com/vitejs/vite), [pnpm](https://pnpm.js.org/), [ESBuild](https://github.com/evanw/esbuild) - 就是快！

- 🗂 [基于文件的路由](./src/pages)

- 📦 [组件自动化加载](./src/components)

- 🍍 [使用 Pinia 的状态管理](https://pinia.esm.dev/)

- 📑 [布局系统](./src/layouts)

- 🎨 [UnoCSS](https://github.com/unocss/unocss) - 高性能且极具灵活性的即时原子化 CSS 引擎

- 😃 [各种图标集为你所用](https://github.com/antfu/unocss/tree/main/packages/preset-icons)

- 🔥 使用 [新的 `<script setup>` 语法](https://github.com/vuejs/rfcs/pull/227)

- 🤙🏻 默认开启 [响应性语法糖](https://vuejs.org/guide/extras/reactivity-transform.html) 

- 📥 [API 自动加载](https://github.com/antfu/unplugin-auto-import) - 直接使用 Composition API 无需引入

- 🦾 TypeScript, 当然

<br>

## 预配置

### UI 框架

- [Element Plus](https://github.com/element-plus/element-plus) - Vue3 UI 组件库
- [UnoCSS](https://github.com/antfu/unocss) - 高性能且极具灵活性的即时原子化 CSS 引擎

### Icons

- [Iconify](https://iconify.design) - 使用任意的图标集，浏览：[🔍Icônes](https://icones.netlify.app/)
- [UnoCSS 的纯 CSS 图标方案](https://github.com/antfu/unocss/tree/main/packages/preset-icons)

### 插件

- [Vue Router](https://github.com/vuejs/vue-router)
  - [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) - 以文件系统为基础的路由
  - [`vite-plugin-vue-layouts`](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) - 页面布局系统
- [Pinia](https://pinia.esm.dev) - 直接的, 类型安全的, 使用 Composition api 的轻便灵活的 Vue 状态管理
- [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) - 自动加载组件
- [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - 直接使用 Composition API 等，无需导入
- [VueUse](https://github.com/antfu/vueuse) - 实用的 Composition API 工具合集

### 编码风格

- 使用 Composition API 地 [`<script setup>` SFC 语法](https://github.com/vuejs/rfcs/pull/227)
- [ESLint](https://eslint.org/) 配置为 [@antfu/eslint-config](https://github.com/antfu/eslint-config), 单引号, 无分号.

### 开发工具
- [TypeScript](https://www.typescriptlang.org/)
- [pnpm](https://pnpm.js.org/) - 快, 节省磁盘空间的包管理器
- [VS Code 扩展](./.vscode/extensions.json)
  - [Vite](https://marketplace.visualstudio.com/items?itemName=antfu.vite) - 自动启动 Vite 服务器
  - [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) - Vue 3 `<script setup>` IDE 支持
  - [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) - 图标内联显示和自动补全
  - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

## 现在可以试试!

> md-admin 需要 Node 版本 >=14

### GitHub 模板

[使用这个模板创建仓库](https://github.com/hminghe/md-admin-element-plus/generate).

### 克隆到本地

如果您更喜欢使用更干净的 git 历史记录手动执行此操作

```bash
npx degit hminghe/md-admin-element-plus md-admin
cd md-admin
pnpm i # 如果你没装过 pnpm, 可以先运行: npm install -g pnpm
```

## 清单

使用此模板时，请尝试按照清单正确更新您自己的信息

- [ ] 在 `LICENSE` 中改变作者名
- [ ] 在 `.env` 中改变标题
- [ ] 在 `public` 目录下改变favicon
- [ ] 整理 README 并删除路由

紧接着, 享受吧 :)

## 使用

### 开发

只需要执行以下命令就可以在 http://localhost:3333 中看到

```bash
pnpm dev
```

### 构建

构建该应用只需要执行以下命令

```bash
pnpm build
```

然后你会看到用于发布的 `dist` 文件夹被生成。