uni-vue3 ：打造高性能、易用的uni-app开发体验

突破性的前端体验

厌倦了繁琐的配置和低效的开发流程？ uni-vue3 为您带来全新体验 — 不只是一个开箱即用的框架模板，更是uniapp组件库，更是工具库，更是重新定义了uniapp快速高性能开发的方式。

 技术栈

• 核心框架：uni-app、Vue 3.4
• 构建工具：Vite 5.0
• 开发语言：TypeScript 5.0
• 状态管理：Pinia 2.0
• 样式方案：UnoCSS

组件系统：美学与功能的完美结合

<!-- 传统CSS方式 -->
<view class="custom-card">
  <!-- 需要在CSS文件中定义 .custom-card 样式 -->
  <!-- 需要为class起名头疼 -->
  <!-- 样式修改需要在多个文件间切换 -->
  内容
</view>

<!-- uni-vue3方式：告别命名困扰 -->
<view class="bg-white rounded-lg shadow-md p-6 hover:shadow-xl 
            transition-shadow duration-300 ease-in-out">
  <!-- 直观可读的原子化类名 -->
  <!-- 无需单独的CSS文件 -->
  <!-- 所有样式信息一目了然 -->
</view>

uni-vue3全部组件计划采用原子化样式开发

 主题切换

在传统CSS中，更换主题通常意味着:

• 编写覆盖原有样式的新样式表

• 处理样式优先级冲突

• 维护多套几乎相同的代码

在uni-vue3中，主题切换变得异常简单:

// unocss.config.ts
export default {
  theme: {
    // 只需在一处修改颜色变量，全应用立即生效,此时class名字为bg-primary或者text-primary
    colors: {
      primary: {
        DEFAULT: '#3B82F6', // 蓝色主题
      },
      // 切换为绿色主题只需修改这里
      // primary: {
      //   DEFAULT: '#10B981', // 绿色主题
      // },
    }
  }
}

事实上，如果你的设计稿是标准的，那么原子化css开发方式绝对是一个好的选择。

• 零命名困扰：不再为class名称绞尽脑汁

• 就地编辑：样式与HTML共存，告别文件切换

• 统一配置：全应用主题在单一配置文件控制

• 设计稿协作：与设计规范无缝衔接，像素级还原

• 样式隔离：组件间样式互不影响，更安全可靠

• 按需生成：最终CSS体积小至惊人

uni-vue3不采用任何第三方组件库，如果需要，您可以自行选择接入外部组件库

强大Hooks：几行代码解决复杂问题

项目中精心封装了丰富的自定义 Hooks，开箱即用，大幅提升您的开发效率和代码质量。

// useRequest - 网络请求

强大的请求管理 Hook，自动处理加载状态、错误处理、请求缓存等。
import { useRequest } from "@/hooks/useRequest"

const request = useRequest({
  baseURL: "https://api.example.com",
  autoHandleError: true, // 自动处理错误
  autoLoading: true, // 自动显示加载状态
})

// GET 请求
const { data } = await request.get("/users", { page: 1 })

// POST 请求
await request.post("/articles", { title, content })

// 文件上传
await request.upload("/upload", {
  filePath: tempFilePath,
  name: "file",
  formData: { type: "avatar" },
})

 性能优化：快得惊人

• 代码分割：首屏加载体积减少65%

• 智能预加载：页面切换快如闪电

• 虚拟滚动：轻松处理10,000+条数据

• 页面加载性能监控

     - 组件渲染性能分析

     - 内存使用监控

项目结构：

├── src
│   ├── pages              # 页面文件
│   ├── pages-sub          # 子页面
│   ├── hooks              # 自定义hooks
│   ├── static             # 静态资源
│   ├── types              # 类型定义
│   ├── utils              # 工具函数
│   └── uni-module         # 全局组件
├── vite.config.ts         # Vite 配置
└── package.json           # 项目配置

 目前更多功能目前尚在完善中，请通过微信小程序搜索uni-vue3体验或者访问github