当前位置:首页 > 技术文章 > 放弃 Element UI 了,2025 年你应该使用的前端技术栈

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

go1231个月前 (01-09)技术文章204

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

 

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 { SunIconMoonIcon } 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\'
  },
verbosetrue,
satisfies Config

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

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

export const users = sqliteTable(\'users\', {
  idinteger(\'id\').primaryKey({ autoIncrementtrue }),
  githubIdtext(\'githubId\').notNull(),
  roletext(\'role\', { enum: [\'user\'\'admin\'] }).notNull().default(\'user\'),
  createdAtinteger(\'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]

  • • ORMDrizzle 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/


 


来源:微架构设计

原文作者:微架构设计

声明:本站所有内容均为自动采集而来,如有侵权,请联系删除
标签: Element UI

相关文章

Redis连环五十二问!看谁顶得住?

Redis连环五十二问!看谁顶得住?

基本 1.说说什么是Redis? Redis是一种基于键...

用 PHP 处理 10 亿行数据!

用 PHP 处理 10 亿行数据!

今天,我将带大家一起走进“挑衅十亿行“数据的世界。当然,这个事情是依据GitHub上的一个“十亿行挑衅”(1brc)运动而来,现在正在进行,如果你没有听说过,可查看Gunnar Morlings 的 1brc 存储库。https://github.com/gunnarmorling/1brc我之所以...

2024 年的最佳 PHP 框架

2024 年的最佳 PHP 框架

在本文中,我们将预测在 2024 年持续风行的最佳 PHP 框架。我们首先将看看PHP框架是什么,什么时候该斟酌应用PHP框架,以及应用PHP框架的重要长处都是什么。我还会介绍最合适初学者的 PHP 框架以及用于 Web 开发的最佳框架。什么是PHP框架?     &...

一文读懂多家厂商的大模型训练、推理、部署策略

一文读懂多家厂商的大模型训练、推理、部署策略

4 月 20 日,第 102 期源创会在武汉胜利举行。本期邀请来自武汉人工智能研讨院、华为、MindSpore、京东云、Gitee AI 的人工智能专家,环绕【大模型竞技与性能优化】主题发表演讲。接下来就一起看看本期运动的出色瞬间吧!大合影 get ✅披萨和礼物不能少!接下来进入主题演讲回想环节。可...

请立刻停止编写 Dockerfiles 并使用 docker init

请立刻停止编写 Dockerfiles 并使用 docker init

您是那种认为编写 Dockerfile 和 docker-compose.yml 文件很苦楚的人之一吗?我承认,我就是其中之一。我总是想知道我是否遵守了 Dockerfile、 docker-compose 文件的最佳编写实践,我畏惧在不知不觉中引入了安全破绽。但是现在,我不必再担忧这个问题了,感激...

服务器为什么大多用 Linux 而不是 Windows ?

服务器为什么大多用 Linux 而不是 Windows ?

前几天在知乎看到一个话题很有意思,且很有讨论意义。“服务器为什么大多用 Linux”,除了开源、好用等原因,回答也代表了各种不同人需求和看法,摘取一些分享给大家,也欢迎留言讨论。来自知乎好友“熊大你又骗俺”的回答首先在20年前,windows server+iis+asp+access 的方案,还是...