---
url: /docs/5.0/front/intro.md
---
# CatchAdmin 前端开发

> Vue 3 + TypeScript + Element Plus 的现代化前端架构

CatchAdmin 前端采用现代化的技术栈构建，基于 Vue 3 生态系统。在开始前端开发前，建议先熟悉以下核心技术：

## 核心技术栈

### 框架基础

* **Vue 3** [官方文档](https://cn.vuejs.org/) - 项目的核心框架，提供响应式数据绑定和组件化开发
* **TypeScript** [官方文档](https://www.tslang.cn/docs/home.html) - 提供类型安全和更好的开发体验

### UI 和样式

* **Element Plus** [官网地址](https://element-plus.org/) - 企业级 UI 组件库，提供丰富的后台管理组件
* **Tailwind CSS** [官网地址](https://tailwindcss.com/) - 原子化 CSS 框架，快速构建自定义样式
* **Hero Icons** [官网地址](https://heroicons.com/) - 精美的 SVG 图标库

### 状态管理和工具

* **Pinia** [官网地址](https://pinia.vuejs.org/) - Vue 3 推荐的状态管理方案，替代 Vuex

这些技术构成了 CatchAdmin 前端的技术基础，建议在开发前充分了解。

## Vite 构建配置

CatchAdmin 使用 Vite 作为构建工具，提供快速的开发体验和优化的生产构建。以下是详细的配置说明：

```js title="vite.config.js"
// rootPath 项目根目录
const rootPath = resolve(__dirname)

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  return {
    plugins: [
      vue(),
      vueJsx(),
      createHtmlPlugin({
        minify: true,
        // 调整入口文件，入口文件放到了 public 下
        template: 'public/admin.html'
      }),
      // 路径别名配置，简化导入路径
      alias({
        entries: [
          {
            find: '/admin',
            replacement: resolve(rootPath, 'resources/admin')
          },
          {
            find: '@/module',
            replacement: resolve(rootPath, 'modules')
          }
        ]
      }),
      // 自动导入 Vue API，无需手动 import
      AutoImport({
        imports: ['vue', 'vue-router', 'pinia', '@vueuse/core']
        // resolvers: [ ElementPlusResolver({importStyle: 'sass'}) ]
      }),
      // 自动导入组件，无需手动注册
      Components({
        dirs: ['resources/admin/components/', 'resources/admin/layout/'],
        extensions: ['vue'],
        deep: true,
        dts: true,
        include: [/\.vue$/, /\.vue\?vue/],
        exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]
        // resolvers: [ ElementPlusResolver({ importStyle: 'sass'}) ]
      }),
      // 图标自动导入和编译
      Icons({
        compiler: 'vue3',
        autoInstall: true
      })
    ],
    publicDir: false,
    // 全局常量定义
    define: {
      BASE_URL: env.BASE_URL // API 基础地址
    },
    preprocessorOptions: {
      scss: {
        // additionalData: `@use "@/assets/styles/element.scss" as *;`,
      }
    },
    // 开发服务器配置
    server: {
      host: '127.0.0.1',
      port: 8000,
      open: true, // 自动打开浏览器
      cors: true, // 允许跨域请求
      strictPort: false, // 端口占用时尝试其他端口
      hmr: true, // 热模块替换
      fs: {
        allow: ['./'] // 文件系统访问权限
      }
    },
    // 生产构建配置
    build: {
      chunkSizeWarningLimit: 2000, // 包体积警告阈值
      minify: 'terser', // 使用 terser 压缩
      terserOptions: {
        compress: {
          drop_console: false, // 保留 console
          pure_funcs: ['console.log', 'console.info'], // 移除指定 console 方法
          drop_debugger: true // 移除 debugger
        }
      },
      outDir: 'public/admin', // 构建输出目录
      assetsDir: 'assets', // 静态资源目录
      rollupOptions: {
        input: './public/admin.html',
        output: {
          chunkFileNames: 'assets/js/[name]-[hash].js',

          entryFileNames: 'assets/js/[name]-[hash].js',

          assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
        }
      }
    }
  }
})
```

## 环境变量配置

### 开发环境配置

CatchAdmin 的前端项目默认安装在根目录的 `web` 目录，前端相关的环境变量配置在 `.env`：

```bash title=".env"
# 这个配置在 CatchAdmin 安装时已自动生成
VITE_BASE_URL=${APP_URL}/api/
```

:::info Vite 环境变量规则

* 所有前端环境变量必须以 `VITE_` 前缀开头
* 在 `vite.config.js` 中可以直接通过 `env.BASE_URL` 访问
* 在 Vue 组件中通过 `import.meta.env.VITE_BASE_URL` 访问
  :::

### 生产环境配置

生产构建时需要创建 `.env.production` 文件：

```bash title=".env.production"
# 生产环境 API 接口地址
VITE_BASE_URL=https://your-api-domain.com/api/
```

**注意事项**：

* 生产环境的 API 地址需要替换为实际的服务器地址
* 确保 API 地址末尾包含 `/api/` 路径
* HTTPS 环境下建议使用 HTTPS 协议的 API 地址