uni-vue3：基于uniapp、Vue 3 + uview-plus+unocss的小程序开发模版

被代码耽误的演员
894 阅读5分钟

前言

在小程序和跨平台应用开发的浪潮中，选择一个合适的技术栈和模板能够极大地提升开发效率。为了更好地应对多端开发的需求，搭建了一个基于 Uniapp、Vue 3、uView-Plus、UnoCSS 和 TypeScript 开箱即用 的开发模板。旨在帮助开发者快速构建稳定、易于维护且美观的应用，并且支持后续更好的扩展。

项目特色

1. Uniapp：一套代码，多端运行

Uniapp 是 DCloud 推出的一款跨平台开发框架，支持微信小程序、支付宝小程序、百度小程序、QQ 小程序、字节跳动小程序、H5、App 等多个平台。Uniapp 的核心在于其一次开发、多端部署的能力，大大降低了开发和维护成本。

优势：

  • 多端适配：一次开发，可以部署到多个平台，避免重复开发工作。
  • 强大的生态：丰富的插件市场，完善的官方文档和社区支持，开发体验良好。
  • 良好的性能：通过优化内核和渲染机制，Uniapp 在各个平台上均表现出色。

2. Vue 3 + Composition API：更清晰的逻辑分离

  • 为什么选择vue3?
    • 因为vue2官方已不维护了，另外都2024年了，如果还在用vue2开发新项目，就说明你内心已经不想进步了。
    • 对于uniapp框架，vue3跨平台性更好，兼容鸿蒙系统。

image.png Vue 3 的 Composition API，能让你够以更灵活、更模块化的方式组织代码。与传统的 Options API 相比，Composition API 提供了更好的代码重用性和逻辑组织。

优势：

  • 逻辑复用：可以将状态和逻辑封装在单独的函数中，在不同组件中复用，减少代码冗余。
  • 更好的类型支持：与 TypeScript 的结合更加紧密，类型推断和检查更加完善。
  • 更小的包体积：Vue 3 通过 tree-shaking 机制，有效减少了包体积，提升加载速度。

3. uView-Plus：强大的 UI 组件库

个人也调研了各种组件库，感觉目前基于uni-app vue3版本的组件库的莫过于unView-plus uView-Plus 是专为 Uniapp vue3版本设计的一款 UI 框架，提供了丰富的组件，能够帮助开发者快速构建美观且功能齐全的应用界面。相比其他 UI 库，uView-Plus 的源码对内部组件 有一些深非常好的优化，并支持了 typescript 的类型兼容。

组件特色：

  • 丰富的基础组件：60+组件库等，可以满足绝大多数 UI 需求。
  • 全面兼容vue3：基于vue2版本的uview开发，做了大量的性能优化。
  • 强大的兼容性：较好的兼容uniapp跨端开发能力。

4. UnoCSS：下一代原子化 CSS 解决方案

UnoCSS 是一款极速、按需加载的原子化 CSS 库。与传统的 CSS 预处理器相比，UnoCSS 不仅能够大幅减少 CSS 的体积，还能提升页面的渲染速度，是现代前端开发的理想选择。

特点：

  • 按需生成：只生成页面中实际用到的样式，极大减少了 CSS 文件大小。
  • 动态主题：支持根据项目需求动态修改样式。
  • 零运行时：不引入运行时依赖，确保页面性能不受影响。

5. TypeScript：让代码更可靠安全

TypeScript 是 JavaScript 的超集，为代码增加了强类型检查。通过引入 TypeScript，开发者可以在编码阶段就发现大部分错误，避免潜在的运行时问题，提高代码的可靠性。

优势：

  • 静态类型检查：在编译时发现问题，减少生产环境的 Bug。
  • 更好的 IDE 支持：类型提示、自动补全、错误提示等功能大幅提升了开发效率。
  • 代码重构更简单：有了类型定义和接口，代码重构变得更加轻松可靠。

unocss具体配置细节

  • UnoCSS 插件：vite.config.ts引入 UnoCSS 插件，使得项目可以按需使用原子化 CSS。

    import UnoCSS from 'unocss/vite';

export default defineConfig({
  plugins: [UnoCSS()],
});

  • 原子化组合缩写：uno.config.ts中可以使用 shortcuts熟悉组合更多的预设class

       shortcuts: [
    /**
     * 水平居中
     */
    ["flex-center", "flex justify-center items-center"],
    /**
     * 图片容器
     */
    ["img-container", "relative w-full h-0 pb-[100%] overflow-hidden"],
    /**
     * 标题
     */
    ["heading", "text-3xl font-bold mb-4"],
    /**
     * 卡片通用
     */
    ["card", "rounded-lg shadow-md bg-white p-4 m-2"],
    
    ...更多缩写自行配置
  ]

  • css原子化会让你爱不释手，相信原子化css的书写才是未来，一定会淘汰掉传统的css开发方式

项目实践与优化

  • 路由拦截：结合vue-router路由守卫，支持小程序内进行路由拦截。
  • 代码风格统一：使用 ESLint 和 Prettier 统一代码风格，提高团队协作效率。
  • 全局hooks：使用全局hooks函数提升开发效率，更好的管理项目。
  • pinia状态管理：vue3官方推荐状态管理-pinia，让状态管理变得简洁又清晰。

结语

项目完全免费开源，旨在为开发者提供一个高效、灵活的起点。结合了 Uniapp 的多端开发能力、Vue 3 的模块化特性、uView-Plus 的丰富组件库、UnoCSS 的高效样式系统，以及 TypeScript 的类型安全优势，能够显著提升项目开发效率和质量。欢迎访问我的 GitHub 仓库 获取更多信息，希望大家能通过这个模板开发出更好的应用！

avatar
文章
阅读
粉丝