# web-admin-framework

**Repository Path**: oraclegao/web-admin-framework

## Basic Information

- **Project Name**: web-admin-framework
- **Description**: vue3 + ts + vite + element plus管理后台
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-31
- **Last Updated**: 2025-12-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# web-admin-framework

## 介绍

- vue3 + ts + vite + element plus管理后台

## Project Setup

- node 版本: 24.11.0
- 安装依赖

```sh
npm install
```

-启动开发环境

```sh
npm run dev
```

- 构建打包

```sh
npm run build
```

- 代码规范

```sh
npm run lint
```

## 框架搭建过程

### 安装vue基础脚手架

```sh
npm create vue@latest
```

- 安装过程选中项：
  - TypeScript
  - Router（单页面应用开发）
  - Pinia（状态管理）
  - ESLint（错误预防）
  - Prettier（代码格式化）

### 配置vue相关函数自动导入

- 启用该配置后，源代码不不在需要显示导入vue相关函数，包括但不限于ref, reactive, toRef, markRaw等
- 安装依赖

```sh
npm install -D unplugin-auto-import
```

- 修改vite.config.ts文件

```ts
// ...
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
// ...
export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      imports: ['vue'],
    }),
    // ...
  ],
  // ...
})
```

- 修改tsconfig.app.json使自动生成的自动导入配置让IDE能够识别到不再报错

```json
{
  //...
  "include": [
    //...
    "auto-imports.d.ts" //默认根目录，根据实际路径调整
  ]
  //...
}
```

### 配置Element Plus

#### 安装依赖

```sh
npm install element-plus
npm install -D unplugin-vue-components unplugin-auto-import
```

#### 配置自动导入

- 修改vite.config.ts

```ts
// ...
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()],
    }),
  ],
})
```

- 修改tsconfig.app.json使自动生成的自动导入配置让IDE能够识别到不再报错

```json
{
  //...
  "include": [
    //...
    "components.d.ts" //默认根目录，根据实际路径调整
  ]
  //...
}
```

#### 配置中文支持

- 修改App.vue

```vue
<template>
  <el-config-provider :locale="locale">
    <RouterView />
  </el-config-provider>
</template>
<script setup lang="ts">
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const locale = ref(zhCn)
</script>
<style lang="scss" scoped></style>
```

#### 配置element-plus/icons-vue

- 安装依赖

```sh
npm install @element-plus/icons-vue
npm install -D unplugin-icons unplugin-auto-import
```

- 修改vite.config.ts文件

```ts
// ...
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
// ...
export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [
        // 自动导入图标组件
        IconsResolver({
          prefix: '',
          enabledCollections: ['ep'],
        }),
        // ...
      ],
    }),
    Components({
      resolvers: [
        // 自动注册图标组件
        IconsResolver({
          prefix: '',
          enabledCollections: ['ep'],
        }),
        // ...
      ],
    }),
    Icons({
      autoInstall: true,
    }),
  ],
  // ...
})
```

- 使用示例(图标组件必须以Ep开头)

```vue
<template>
  <div>
    <el-icon :size="20">
      <ep-edit />
    </el-icon>
    <el-icon :size="20">
      <component :is="iconPlatform"></component>
    </el-icon>
  </div>
</template>
<script setup lang="ts">
// import { markRaw } from 'vue';
// 使用vue函数自动导入，无需显示引入markRaw函数
const iconPlatform = markRaw(EpPlatform)
</script>
```

### less配置

- vite原生支持sass/scss

```sh
npm install sass -D
```

### axios配置

- 安装依赖

```sh
npm install axios
```

### 服务端proxy配置

- 修改vite.config.ts文件

```ts
export default defineConfig({
  //...
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080/pplm',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '/pplm'),
      },
      '/stream': {
        target: 'http://localhost:8081/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/stream/, ''),
      },
    },
  },
})
```

### SSE(Server-Sent Events)流式数据响应支持

- 安装依赖

```sh
npm install @microsoft/fetch-event-source
```

## Refs

- [vuejs 官网](https://cn.vuejs.org/)
- [Vue Router 官网](https://router.vuejs.org/zh/)
- [Element Plus 官网](https://element-plus.org/zh-CN/)
- [pinia 官网](https://pinia.vuejs.org/)
- [axios 官网](https://axios-http.com/zh/)
- [fetch-event-source github](https://github.com/Azure/fetch-event-source)