All Projects → xlzy520 → uniapp-tailwind-uview-starter

xlzy520 / uniapp-tailwind-uview-starter

Licence: other
利用uniapp+tailwindcss 3.x+uview 1.x+vue-cli搭建的一套基础模板,可以使用Webstorm或者vscode开发。集成miniprogram-ci自动部署

Programming Languages

javascript
184084 projects - #8 most used programming language
Vue
7211 projects
SCSS
7915 projects
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to uniapp-tailwind-uview-starter

vue-cli-uniapp
基于vuecli模式的uniapp脚手架集成模板
Stars: ✭ 80 (+9.59%)
Mutual labels:  uniapp, uview
ruhua vue
如花商城后台+前端;element+vue+uniapp
Stars: ✭ 113 (+54.79%)
Mutual labels:  uniapp
jeecg-uniapp
JEECG BOOT APP 移动解决方案,采用uniapp框架,一份代码多终端适配,同时支持APP、小程序、H5!实现了与JeecgBoot平台完美对接的移动解决方案!目前已经实现登录、用户信息、通讯录、公告、移动首页、九宫格等基础功能。
Stars: ✭ 580 (+694.52%)
Mutual labels:  uniapp
Thorui Uniapp
ThorUI组件库,轻量、简洁的移动端组件库。组件文档地址:https://thorui.cn/doc/ 。 最近更新时间:2021-10-01
Stars: ✭ 1,842 (+2423.29%)
Mutual labels:  uniapp
likeshop
🔥🔥🔥 likeshop开源免费商用电商系统,PC商城、H5商城、小程序商城、安卓APP商城、苹果APP商城,免费商用。场景:B2C商城,新零售商城,社交电商商城,分销系统商城,分销电商商城,小程序商城,商城源码,商城系统,单商户,多商户,电商系统,直播,uniapp,uni-app,B2B2C,B2B,O2O,ERP,Wechat,交易系统,内容系统,雷达,crm
Stars: ✭ 160 (+119.18%)
Mutual labels:  uniapp
waimai-uniapp
美团饿了么联盟CPS推广赚钱的uniapp小程序,支持微信小程序和H5,技术变现利器
Stars: ✭ 97 (+32.88%)
Mutual labels:  uniapp
Yunyun-Study-for-Mobile
芸云课堂手机端 uni-app多端开发(暂不维护)
Stars: ✭ 57 (-21.92%)
Mutual labels:  uniapp
mp-framework-benchmark
mp-framework-benchmark
Stars: ✭ 49 (-32.88%)
Mutual labels:  uniapp
app
专门为互联网人打造的题解神器,神器在手,工作不愁
Stars: ✭ 64 (-12.33%)
Mutual labels:  uniapp
Hello Uniapp
uni-app框架演示示例
Stars: ✭ 1,881 (+2476.71%)
Mutual labels:  uniapp
Uni App
uni-app 是使用 Vue 语法开发小程序、H5、App的统一框架
Stars: ✭ 34,949 (+47775.34%)
Mutual labels:  uniapp
hello-iui
⚙️ iui uniapp组件库演示示例【停止维护】
Stars: ✭ 20 (-72.6%)
Mutual labels:  uniapp
lilishop-uniapp
商城系统-移动端
Stars: ✭ 133 (+82.19%)
Mutual labels:  uniapp
Open-IM-SDK-Android
OpenIM:由IM技术专家打造的基于 Go 实现的即时通讯(IM)项目,Android版本IM SDK 可以轻松替代第三方IM云服务,打造具备聊天、社交功能的app。
Stars: ✭ 144 (+97.26%)
Mutual labels:  uniapp
A3Mall
A3Mall B2C开源商城系统使用Thinkphp6开源框架,前端采用uniapp开发,支持微信公众号商城、H5商城、小程序商城、APP商城、PC商城,前后端源码100%开源,支持免费商用。
Stars: ✭ 142 (+94.52%)
Mutual labels:  uniapp
less-api
通过一套「访问控制规则」配置数据库访问,用一个 API 替代服务端 90% 的 APIs。
Stars: ✭ 52 (-28.77%)
Mutual labels:  uniapp
Xboot
基于Spring Boot 2.x的一站式前后端分离快速开发平台XBoot 微信小程序+Uniapp 前端:Vue+iView Admin 后端:Spring Boot 2.x/Spring Security/JWT/JPA+Mybatis-Plus/Redis/Elasticsearch/Activiti 分布式限流/同步锁/验证码/SnowFlake雪花算法ID 动态权限 数据权限 工作流 代码生成 定时任务 社交账号 短信登录 单点登录 OAuth2开放平台 客服机器人 数据大屏 暗黑模式
Stars: ✭ 3,432 (+4601.37%)
Mutual labels:  uniapp
rotate-captcha
Rotate image captcha,旋转图片验证码
Stars: ✭ 50 (-31.51%)
Mutual labels:  uniapp
GroupbuyCoupon
涵盖外卖、话费、视频会员、加油卡、礼品卡等多种品类折扣权益,吃、喝、玩、乐、购五大消费场景覆盖的综合权益卡券小程序,用户折扣购、平台赚佣金,个人、企业流量变现平台。
Stars: ✭ 92 (+26.03%)
Mutual labels:  uniapp
caoguo
golang,微信小程序,电商系统
Stars: ✭ 505 (+591.78%)
Mutual labels:  uniapp

uniapp-tailwind-uview-starter(准备升级到Vite+Vue3)

利用uniapp + tailwindcss 3.x + uview 1.x搭建的一套基础模板,并且集成了miniprogram-ci实现自动构建上传微信小程序。

  1. tailwindcss以及flex布局的css工具拓展
  2. miniprogram-ci集成,实现通过GitHub Actions自动执行脚本构建打包上传
  3. 基本的列表和表单demo
  4. 统一的request api请求处理,枚举与正则校验

背景:之前用uniapp+uview开发了一大一小两个小程序,css方案用的原子风格的,发现用的还是挺爽的,就在想能不能用上tailwindcss,研究之后发现用Hbuilder创建的自由度比较低,于是选择了用Vue-cli4搭建了一套。

安装要求:

  1. 第一步:命令行执行yarn或者npm i,安装所需依赖
  2. 第二步:(非必要)去release.yml配置自动打包构建需要的秘钥,具体查看该文档

启动

  1. HBuilderX直接点击运行或者发行选择相应的平台(我的方式)
  2. webstorm或者vscode启动,具体如下

h5

yarn run serve

小程序

yarn run dev:mp-weixin

然后打开微信开发者工具选择/dist/dev/mp-weixin文件夹

Build

yarn run build:mp-weixin

然后打开微信开发者工具选择/dist/build/mp-weixin文件夹,当然最方便的是直接通过GitHub Actions自动部署,需要在GitHub中配置secret才可以自动部署小程序

预览

live demo

1

项目地址

github

踩坑

  • 我的Webstorm默认使用pnpm包管理,这是第一个坑,启动项目时报错,于是rm -rf node_modules,重新使用yarn 安装依赖,然后npm serve正常启动。
  • 要求Webstorm设置Nodejs v12以上,否则tailwind不会智能提示。

添加配置

tailwindcss默认配置了两套,一套是专门用于小程序的,生成的tailwindcss没那么大,一套是完整的h5+小程序的 tailwind.config.js,配置较多,可以前往项目查看

升级到tailwindcss 3.x,有了JIT模式,不再需要解决大小的问题

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].