# admin-web

**Repository Path**: qssily/admin-web

## Basic Information

- **Project Name**: admin-web
- **Description**: 基于 Vue3 + TS + Vite + Pinia + Tailwindcss 创建的 后台管理 基础项目，可用于快速搭建后台前端框架，开箱即用
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2025-07-17
- **Last Updated**: 2025-10-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, TypeScript, Tailwind

## README

## 1.0 版本! 🎉🎉🎉
2025-08-05 更新

基于 Vue3 + TS + Vite + Pinia + Tailwindcss 创建的 后台管理 基础项目，可用于快速搭建后台前端框架，开箱即用

使用UI： [Element Plus](https://element-plus.org/zh-CN/)

使用Tailwindcss： [Tailwindcss](https://www.tailwindcss.cn/docs/installation)

使用ICON图标： [IconPark](https://iconpark.oceanengine.com/official)

使用wangEditor富文本编辑器： [wangEditor V5](https://www.wangeditor.com/v5)

### 项目介绍
1. 本项目区别于其它的后台系统UI，并没有过多的深度组件封装，只保持必要的基础框架，如：支持登录、路由权限、菜单、用户管理等基础功能和简单的请求封装;
组件上使用原生的Element Plus组件，再加以Tailwindcss进行样式编写，使其可以自适应设备的同时，又便于自定义自己想要的组件样式;
2. 支持暗黑模式，响应式自适应界面，适配移动端;
3. 初始设置：如主题默认风格是浅色，想改成暗黑，请修改`src/stores/setting.ts`的 themeStatus的 'light' 改为 'dark'; 菜单栏的背景颜色可以在base.css中设置，修改 --menu-bg 的值即可;

### 预览
![7b66f818ad1c670b4490dea1db61e6c3.jpeg](https://i.mji.rip/2025/08/12/7b66f818ad1c670b4490dea1db61e6c3.jpeg)
![6dae901fe94b40cf4cdd3b5c38193381.jpeg](https://i.mji.rip/2025/08/12/6dae901fe94b40cf4cdd3b5c38193381.jpeg)
![5998675f87af0ea6919dfc95db0f08fb.jpeg](https://i.mji.rip/2025/08/12/5998675f87af0ea6919dfc95db0f08fb.jpeg)
![cc7706d87bd14b4f4d40b06ed9fef13c.jpeg](https://i.mji.rip/2025/08/12/cc7706d87bd14b4f4d40b06ed9fef13c.jpeg)


## 使用

### 安装
使用 npm 创建项目(请忽略)：

```shell
$ npm create vite@latest 项目名称
```

克隆项目到本地(自行修改项目名)：

```shell
$ git clone https://gitee.com/qssily/admin-web.git 项目名称
$ cd 项目名称
```

初始化项目:

```shell
$ npm install
$ git init
```

安装依赖(已安装，请忽略):

```shell
$ npm i element-plus --save
$ npm i --save-dev @types/node
$ npm install -D unplugin-vue-components unplugin-auto-import
$ npm install @icon-park/vue-next --save
$ npm i pinia 
$ npm i -D tailwindcss@latest postcss@latest autoprefixer@latest
$ npm i axios
$ npm install @wangeditor/editor --save
$ npm install @wangeditor/editor-for-vue@next --save
```

运行项目：

```shell
$ npm run dev
```

上线项目：

```shell
$ npm run build
```
## 注意事项

1. 本项目使用的Element Plus是按需导入安装，所以安装时需要另外安装两个插件：unplugin-vue-components unplugin-auto-import，然后需要配置vite.config.ts文件。
```
// 配置vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})
```
针对按需引入的国际化配置, 可以直接在app.vue中配置，也可以在某个页面中去使用:
```
<template>
  <el-config-provider :locale="locale">
    <div class="w-full">
      <RouterView />
    </div>
  </el-config-provider>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const locale = zhCn;
</script>
```
2. 由于需要根据环境获取env配置，需要先安装@types/node，然后在vite.config.ts中引入env;
3. 已在layout中监听屏幕宽度，可以直接在组件中从stores的setting中获取屏幕宽度，然后根据宽度设置自适应样式；
43. 使用wangEditor富文本编辑器时，请参考[官方文档](https://www.wangeditor.com/v5/for-frame.html#%E5%AE%89%E8%A3%85-1)，另外引入使用时，ts会红线报错，无法找到声明文件，可以在src目录下面创建 wangeditor-types.d.ts 文件，然后 添加代码：
```
declare module "@wangeditor/editor-for-vue" {
  const Editor: any;
  const Toolbar: any;
  type IEditorConfig = any;
}
```
加了之后使用打包也不会报错了;