CatchAdmin 前端开发

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

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

核心技术栈

框架基础

• Vue 3 官方文档 - 项目的核心框架，提供响应式数据绑定和组件化开发
• TypeScript 官方文档 - 提供类型安全和更好的开发体验

UI 和样式

• Element Plus 官网地址 - 企业级 UI 组件库，提供丰富的后台管理组件
• Tailwind CSS 官网地址 - 原子化 CSS 框架，快速构建自定义样式
• Hero Icons 官网地址 - 精美的 SVG 图标库

状态管理和工具

• Pinia 官网地址 - Vue 3 推荐的状态管理方案，替代 Vuex

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

Vite 构建配置

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

// 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：

# 这个配置在 CatchAdmin 安装时已自动生成
VITE_BASE_URL=${APP_URL}/api/

Vite 环境变量规则

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

生产环境配置

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

# 生产环境 API 接口地址
VITE_BASE_URL=https://your-api-domain.com/api/

注意事项：

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