放弃Element UI，2025 年应该使用的前端技术栈

Element UI 作为一款曾经流行的 UI 组件库，确实在快速开发中发挥了重要作用。然而，随着前端技术的飞速发展，它的局限性也日益显现。2025 年，我们应该告别 Element UI，拥抱更现代、更灵活、更高效的技术栈。

Element UI 的局限性

Element UI 的主要问题在于其组件风格和适用场景：

• • 组件风格固化： Element UI 的组件设计风格较为统一，虽然降低了学习成本，但也限制了应用的个性化定制。在追求品牌差异化的今天，这种固化的风格显得有些过时。
• • 适用场景受限： Element UI 适合快速构建后台管理系统，但对于需要更复杂交互、更精细视觉效果的应用，它的组件往往显得不够灵活，甚至需要大量的 CSS 覆盖。
• • 生态相对封闭： Element UI 基于 Vue 2 构建，而 Vue 生态已经转向 Vue 3。虽然有 Element Plus，但生态的迁移和兼容性问题仍然带来了一些不便。
• • 定制成本高： Element UI 的定制能力有限，如果需要修改组件的内部结构或样式，往往需要深入研究其源码，这无疑增加了开发和维护成本。

是时候寻找更现代、更灵活的替代方案了。

2025 年的前端技术栈

以下是我推荐的 2025 年前端技术栈，它将帮助你构建更高效、更具扩展性的应用：

框架: Next.js (App Router)

Next.js 不仅仅是一个 React 框架，它还是一个全栈框架。它的 App Router 带来了革命性的变化：

• • 基于 Server Components： App Router 默认采用 Server Components，这意味着组件在服务器端渲染，大幅提升首屏加载速度和 SEO。
• • 数据获取方式优化： 通过 async/await 函数直接在 Server Components 中获取数据，简化了数据获取逻辑，并使其更安全。
• • 路由配置更灵活： 基于目录的路由配置更加直观，动态路由和路由分组也变得更加简单。
• • 全栈能力： Next.js 提供 API Routes，使你可以在同一个项目内开发前后端，无需单独搭建后端服务。

平台: Cloudflare Pages

Cloudflare Pages 是一个静态站点托管平台，它具有以下优势：

• • 全球 CDN 加速： Cloudflare 的 CDN 网络遍布全球，可以保证你的应用在全球范围内都有快速的访问速度。
• • 自动部署： Cloudflare Pages 可以直接连接 GitHub 仓库，每次代码提交都会触发自动部署，无需手动操作。
• • 免费额度高： Cloudflare Pages 提供相当高的免费额度，对于个人项目或小型应用来说完全足够。
• • Serverless Function 支持： 你可以在 Cloudflare Pages 中部署 Serverless Function，处理一些需要后端逻辑的请求。

数据库: Cloudflare D1 (SQLite)

Cloudflare D1 是一个基于 SQLite 的 Serverless 数据库，它具有以下特点：

• • Serverless 架构： D1 是完全 Serverless 的，无需关心服务器的运维，可以专注于业务逻辑。
• • 易于上手： SQLite 是一种轻量级的数据库，易于学习和使用，无需配置复杂的数据库连接。
• • 低延迟： D1 与 Cloudflare 的边缘网络紧密集成，数据访问延迟极低。
• • 与 Cloudflare 生态集成： D1 可以方便地与 Cloudflare Workers 和 Pages 集成，构成完整的 Serverless 应用。

认证: NextAuth 配合 GitHub 登录

NextAuth 是一个强大的认证库，它可以简化认证的开发：

• • 多 Provider 支持： NextAuth 支持多种认证方式，包括 OAuth、Email、密码等。
• • 易于集成： NextAuth 可以与 Next.js 无缝集成，配置简单，使用方便。
• • 安全可靠： NextAuth 提供了可靠的安全机制，保护你的应用和用户的安全。
• • GitHub 登录： GitHub 登录是一种常见的认证方式，可以方便用户快速注册和登录。

由于 Google 登录普遍不可用，Microsoft 登录太小众，微信/QQ/Apple等登录都需要申请资质和备案，GitHub 登录反而成为了集成第三方认证的最佳选择。

样式: Tailwind CSS

Tailwind CSS 是一个原子化 CSS 框架，它具有以下特点：

• • 原子化类名： Tailwind CSS 提供大量原子化的 CSS 类名，可以通过组合这些类名来快速构建 UI。
• • 高度可定制： Tailwind CSS 可以根据你的需求进行高度定制，包括颜色、字体、间距等。
• • 响应式设计： Tailwind CSS 提供响应式断点，可以方便地构建适配不同设备的 UI。
• • 开发效率高： 使用 Tailwind CSS 可以大大提高开发效率，避免重复编写 CSS 代码。

UI 组件: 基于 Radix UI 的自定义组件

Radix UI 是一个无样式的组件库，它具有以下特点：

• • 无样式： Radix UI 不提供任何默认样式，这意味着你可以完全控制组件的外观，打造独一无二的 UI。
• • 可访问性： Radix UI 注重可访问性，确保你的应用对所有用户都友好。
• • 灵活性： Radix UI 的组件非常灵活，可以根据你的需求进行定制和扩展。
• • 构建模块： Radix UI 提供了构建 UI 的基础模块，你可以基于这些模块构建自己的组件库。
• • 高颜值主题： Radix Themes 是一个具有预先设计样式的组件库，旨在以最少的配置开箱即用，默认主题颜值就很高，非常节省设计时间。

类型安全: TypeScript

TypeScript 是 JavaScript 的超集，它为 JavaScript 增加了类型系统：

• • 静态类型检查： TypeScript 可以在编译时检查类型错误，避免运行时错误，提高代码的健壮性。
• • 更好的代码提示： TypeScript 可以提供更好的代码提示和自动补全，提高开发效率。
• • 更易于维护： TypeScript 可以使代码更易于理解和维护，降低维护成本。
• • 大型项目利器： TypeScript 尤其适合大型项目，它可以使项目结构更清晰，代码更可控。

ORM: Drizzle ORM

Drizzle ORM 是一个 TypeScript ORM，它具有以下特点：

• • 类型安全： Drizzle ORM 可以与 TypeScript 无缝集成，提供类型安全的数据库操作。
• • 性能高： Drizzle ORM 的性能非常高，接近原生 SQL 查询。
• • 易于使用： Drizzle ORM 的 API 设计简洁易懂，上手容易。
• • 与 SQLite 兼容： Drizzle ORM 可以很好地与 SQLite 集成，方便使用 Cloudflare D1。

如何利用上述技术栈构建独立应用

现在，让我们以开发一个包含上述基础功能的独立应用为例，看看如何利用这些技术栈。

1. 项目初始化

首先，使用 create-next-app 创建一个 Next.js 项目，并添加 TypeScript 支持：

npx create-next-app my-app --typescript
cd my-app

然后安装其他依赖：

npm install tailwindcss postcss autoprefixer radix-ui drizzle-orm @auth/core next-auth
npm install -D @types/node @types/react @types/react-dom

2. Tailwind CSS 配置

在 tailwind.config.js 中配置 Tailwind CSS：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  darkMode: 'class', // 启用暗色模式
  theme: {
    extend: {},
  },
  plugins: [],
}

在 postcss.config.js 中配置 PostCSS：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

在 app/globals.css 中引入 Tailwind CSS：

@tailwind base;
@tailwind components;
@tailwind utilities;

3. Radix UI 组件

基于 Radix UI 构建自定义组件，例如一个切换亮暗模式的开关组件：

// components/ThemeToggle.tsx
'use client'

import * asSwitchfrom'@radix-ui/react-switch'
import { useState, useEffect } from'react'
import { SunIcon, MoonIcon } from'./Icons'

exportfunctionThemeToggle() {
const [isDark, setIsDark] = useState(false)

useEffect(() => {
    const storedTheme = localStorage.getItem('theme')
    if (storedTheme === 'dark') {
      setIsDark(true)
      document.documentElement.classList.add('dark')
    }
  }, [])

functiontoggleTheme() {
    setIsDark(!isDark)
    document.documentElement.classList.toggle('dark')
    localStorage.setItem('theme', !isDark ? 'dark' : 'light')
  }

return (
    <div className="flex items-center justify-center">
      <SunIcon className={`h-5 w-5 ${isDark ? 'text-gray-500' : 'text-yellow-500'}`} />
      <Switch.Root className="mx-2" checked={isDark} onCheckedChange={toggleTheme}>
        <Switch.Thumb className={`w-4 h-4 bg-gray-500 rounded-full transition-transform duration-200 ${isDark ? 'translate-x-4' : 'translate-x-0'}`} />
      </Switch.Root>
      <MoonIcon className={`h-5 w-5 ${!isDark ? 'text-gray-500' : 'text-blue-500'}`} />
    </div>
  )
}

4. NextAuth 配置

创建 app/api/auth/[...nextauth]/route.ts 文件，配置 GitHub 登录：

import NextAuthfrom'next-auth'
importGithubProviderfrom'next-auth/providers/github'

const authOptions = {
providers: [
    GithubProvider({
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    }),
  ],
callbacks: {
    asyncsession({ session, token }: any) {
      session.user.id = token.sub
      return session
    }
  }
}

const handler = NextAuth(authOptions)

export { handler asGET, handler asPOST }

请确保在 .env 文件中设置了 GITHUB_CLIENT_ID 和 GITHUB_CLIENT_SECRET。

5. Drizzle ORM 配置

使用 Drizzle ORM 创建数据库模型。首先，安装 Drizzle CLI：

npm install -g drizzle-kit

然后创建 drizzle.config.ts 文件：

import type { Config } from'drizzle-kit'
import * as dotenv from'dotenv'
dotenv.config()

exportdefault {
schema: './db/schema.ts',
out: './drizzle',
driver: 'd1',
dbCredentials: {
    // TODO: Replace with Cloudflare binding variable
    // binding: 'DB',
    databasePath: './drizzle/local.db'
  },
verbose: true,
} satisfies Config

创建一个名为 db/schema.ts 的文件，并定义你的数据库模型：

// db/schema.ts
import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core'

export const users = sqliteTable('users', {
  id: integer('id').primaryKey({ autoIncrement: true }),
  githubId: text('githubId').notNull(),
  role: text('role', { enum: ['user', 'admin'] }).notNull().default('user'),
  createdAt: integer('createdAt', { mode: 'timestamp' }).notNull().default(Date.now()),
})

6. 基于 Cloudflare 构建

• • D1 配置: 在 Cloudflare 控制台中创建一个 D1 数据库。
• • Pages 配置: 将你的 GitHub 仓库链接到 Cloudflare Pages，并设置构建命令为 npm run build。
• • 环境变量: 在 Cloudflare Pages 设置中配置你的 GitHub OAuth Client ID 和 Client Secret，以及 D1 数据库的绑定变量（Binding）。
• • Serverless Function (可选): 如果需要后台逻辑，可以使用 Cloudflare Workers 创建 Serverless Function，并部署到 Cloudflare Pages。

7. 基础功能实现

• • 主题切换: 使用 ThemeToggle 组件，结合 localStorage 实现主题切换。
• • 响应式设计: 使用 Tailwind CSS 的响应式断点，构建适配不同设备的 UI。
• • 自动清理: 可以使用 Cloudflare Workers 定时触发，清理过期的数据。
• • PWA 支持: 在 app/manifest.ts 中配置 PWA 清单，使你的应用可以安装为 PWA。
• • 权限系统: 在数据库中添加 role 字段，使用 NextAuth 的 Session 回调获取用户角色，并根据角色控制访问权限。

8. 其他

• • 类型安全: 使用 TypeScript 编写代码，为项目添加 eslint 检查，提高代码的健壮性和可维护性。
• • 测试: 使用 vitest 编写单元测试，确保代码的质量。

总结

本文推荐的独立应用技术栈如下：

• • 框架: Next.js^[1] (App Router)
• • 平台: Cloudflare Pages^[2]
• • 数据库: Cloudflare D1^[3] (SQLite)
• • 认证: NextAuth^[4] 配合 GitHub 登录
• • 样式: Tailwind CSS^[5]
• • UI 组件: 基于 Radix UI^[6] 的自定义组件
• • 类型安全: TypeScript^[7]
• • ORM: Drizzle ORM^[8]

通过上述技术栈，我们可以构建一个现代、灵活、高性能的独立应用，并且免费部署在云端供全世界所有用户使用。

这些技术不仅解决了购买服务器、搭建系统、运维的痛点，还提供了更强大的功能和更好的开发体验。2025 年，让我们拥抱这些新技术，构建更出色的应用。

当然，技术栈的选择永远不是绝对的，你需要根据自己的实际情况进行权衡。但是，我强烈建议你尝试一下上述技术栈，相信你会爱上它带来的便利和效率。

引用链接

[1] Next.js:https://nextjs.org/
[2] Cloudflare Pages:https://pages.cloudflare.com/
[3] Cloudflare D1:https://developers.cloudflare.com/d1/
[4] NextAuth:https://authjs.dev/getting-started/installation?framework=Next.js
[5] Tailwind CSS:https://tailwindcss.com/
[6] Radix UI:https://www.radix-ui.com/
[7] TypeScript:https://www.typescriptlang.org/
[8] Drizzle ORM:https://orm.drizzle.team/

来源：微架构设计