uni-app + Vue3 + Tailwind CSS + uview plus项目基础模板

项目概述

基于 UniApp，使用 Vue3 作为开发框架，集成了 TailwindCSS 和 uView Plus UI 组件库

技术栈

• 前端框架：Vue3
• 跨平台框架：UniApp
• UI 组件库：uView Plus
• CSS 框架：TailwindCSS

开发环境搭建

安装依赖

# 使用yarn安装依赖
yarn install

开发运行

参考 UniApp 官方文档进行开发和运行：

• 使用 HBuilderX 导入项目

项目结构

• pages：存放页面文件
• other：other子包
• components：自定义组件
• static：静态资源
• uni_modules：uView Plus 等模块
• api：API接口封装
• utils：工具函数
• config：项目配置文件

样式开发

项目集成了 TailwindCSS，可以使用原子化 CSS 进行快速开发：

<view class="flex justify-center items-center p-4 bg-primary text-white">
  Tailwind 示例
</view>

温馨提示

• api/login.js提供了接口请求示例,utils/request.js是接口请求封装，里面可以做接口请求拦截和响应拦截
• egg页面是一个彩蛋页，可以切换正式服，测试服，同时能清除本地缓存方便测试
• example_tailwindcss/index是一个tailwindcss的使用示例页面，可以浏览浏览更高效的在uniapp里使用Tailwind css
• 默认引入了 hbxw-utils是我封装的一个工具库，里面提供了很多实用的工具方法，如本地缓存/小程序dom获取等