【2024】uniapp+vue3超实用模板（最佳食用+一些思考）

• 【2023】uniapp+vue3+ts超实用模板
• 【2023】uniapp+vue3+ts超实用模板（续）
• 【2024】uniapp+vue3+ts超实用模板（终）
• 【2024】uniapp+vue3+ts超实用模板（最佳食用+一些思考）（本文）

项目地址

github: fly-vue3-templates/vue3-uniapp-template

gitee: fly-vue3-templates/vue3-uniapp-template

1、UnoCSS 使用

如果不记得，可以查 Tailwind CSS，传送门 https://tailwindcss.com/docs/display

常用的：

• 宽高内外边距： w-2, h-4, px-6, mt-8等
• 前景色背景色：text-green-400, bg-green-500
• border: border-2, border-solid, border-green-600, b-r-2 (注意 border = border-1，就是说边框 1px 时，一般简写为 border )
• border-radius: rounded-full, rounded-6, rounded-sm (不是 br-10, 也不是 b-r-10)
• line-height: leading-10 (不是 l-10, 也不是 lh-10)
• hover: hover:text-green-200, hover:bg-green-300, hover:border-dashed
• flex: flex, items-center, justify-center, flex-1

2、UnoCSS Icons 使用

• 在里面找到某个库，如 carbon
• 搜索想要的图表，如 avatar，出现的搜索结果，查看类名，也可以点击图标，会出现详情
  

• 如上图，拿到 carbon:user-avatar
• 代码里面 class 填写 i-carbon-user-avatar 并且支持改颜色

3、自动格式化：import 自动排序，css 属性自动排序

保存后自动格式化，自动排序，爽歪歪；大家的格式都是一样的。如下图

4、统一 VSCode 配置

.vscode/settings.json 在项目层面统一了开发者的配置， .vscode/extensions.json 贴心地给出了所有涉及到的扩展，可以快捷安装。

5、自动生成pages配置，支持模式过滤

• 自动生成page的gif如下

• 过滤的配置如下

UniPages({
    exclude: ['**/components/**/**.*'], // 过滤掉pages里面的components文件夹
}),

6、TODO

• 记得搜一下 TODO，是提示开发者要改的地方。
• 记得看 README.md

最终源码地址：

github: github.com/fly-vue3-te…

gitee: gitee.com/fly-vue3-te…

全文完，撒花~

果真如此吗? 真正的文章正式开始，下面谈谈我的困惑和一些思考。

思考一：是否需要 原生tabbar，或者说是否应该用 自定义tabbar

我发现原生tabbar的图标必须用图片，一个是未选中的，一个是选中的，颜色要跟激活的文字颜色一致。这有几个问题：

• 对于大部分程序员来说，并不会找图或者切图，手上没有合适的图片。
• 要是能好用字体图标那该多好，比如上面的 UnoCSS Icons, iconfonts, UniUI Icons等，可以随意使用，还能随意设置颜色和大小，很方便。

对于非APP端来说我觉得完全可以不用 原生tabbar, 使用 自定义Tabbar 即可。对于说一进去 自定义tabbar 还没出现，我觉得不会。我们把这个组件写在 layout 里面，是先加载的，仅次于 App.vue。

另外，使用 自定义Tabbar，还有一个好处是所有的节点都是自己能控制，可以实现很多原生tabbar无法实现的效果。

基于上面的考虑，我会把我的模板设置为 自定义Tabbar 的形式。利大于弊~（欢迎讨论，欢迎battle）

思考二：个人开发者的出路，该不该投身小程序，web才是未来？

现在微信小程序对个人开发者来说太不友好了，或者说红利不再了，很多类目都需要注册公司才能用，个人开发者能选的不多。（TODO1：后续我整理一个在线表格出来，所有的类目分别适用于什么类型的开发者）

既然不搞微信小程序那搞啥？搞别的平台的小程序吗？抖音小程序，支付宝小程序，百度小程序？还是说直接web网页端。网页的话需要域名申请、备案等，也是有国家管控的，走海外吗？海外的域名服务器。

难道 web3 才是未来？

没说到点子上，我觉得有个好的点子最重要，开发都是小事。

思考三：uniCloud vs laf，用哪个?

我们开发一个产品，大概率是需要后台的，功能不用多么强大，够用就行，最好不用自己买服务器，搭建数据库等。SpringBoot, NestJS 这类就不搞了（虽然我也很喜欢 NestJS），有啥可以快速实现我想要的后台呢？

uniCloud 和 laf 进入了我的视野，在我研究了一番之后，发现还是 laf 比较合适，强烈安利给大家。如果大家真的打算用 laf 即可填写我的推广码，我的推广链接 https://laf.run/signup?code=ohaOgIX

TODO2：后续我专门写一篇文章说明 uniCloud 和 laf 的对比，注意这里说的 uniCloud 是指 云函数URL化 功能。

传送门：laf.run/ uniCloud 云函数URL化

思考四：我想做一个web产品，如果想借用微信的能力来登录，需要什么条件?

• 没有小程序，没有公众号，可以扫码登录吗？怎么实现？
• 只有公众号，可以扫码登录吗？怎么实现？
• 只有小程序，可以扫码登录吗？怎么实现?

上面我只知道有公众号是可以扫码登录，但是其他2种情况要怎么办。

为什么专门替微信扫码登录，因为我发现当网页登录有微信扫码登录和短信验证码登录的时候，我有60%的概率会直接用微信扫码来登录，40%用短信验证码。

就是说如果只有微信登录，我是可以接受的，估计大部分用户也是可以的。

如果微信扫码无法登录，那我用短信验证码的方式登录，接入阿里云（或其他厂商）短信服务也是OK的，看起来也很正规。

这样就是2个不同的问题了。我只想快速让用户可以登录我的网站。（填账号密码过时了，狗都不用，😁）

思考五：uniapp模板的出路

根据用户的多种情况，需要出多种模板。

首先 APP 与小程序、h5很大不同(而且我的这个模板是不能打包成APP的，官方的 vitesse也不行，我试过了。)，所以有app开发得需求的，必须重新写一个模板，但是前端6件套是可以复用的（ prettier + eslint + stylelint + husky + lint-staged + commitlint)。这个模板是HbuilderX的模板，但是HbuildX是不支持上述6件套的前3件的（我去HBuilder的插件市场找了一圈，没有合适的，偶尔有一两个也是大面积的吐槽，根本不能用），我的策略就是 HBuildX 只是生成项目用的，开发还是 VS Code来，除非涉及到云开发。

其次对于非APP端，应该大部分都是有小程序的需求，顺便有h5的需求，应该不存在只有h5没有小程序的需求，如果那样为什么不直接写 wap 呢？既然主要是小程序，而且又主要是微信小程序，那微信登录那一块是要默认集成进去的。

在登录这一块，微信小程序对个人开发者和非个人开发者提供的功能有很大不同，对于个人开发者，获取openid和头像+昵称就完事了，对于非个人开发者，是可以直接通过手机号快速登录的，如下图boss直聘的登录。

最终形态如下图：

if needDevlopApp then:
    模板A: HuilderX + VS Code
else 
    if pensonalDeveloper then:
        模板B：个人开发者的登录
    else
        模板B：非个人开发者的登录（跟上面同属一个模板，只是部分功能有差异）
    endif
endif

思考六：人为财死鸟为食亡，我要怎么才能赚到钱？

估计很多人都在想，要怎么才能赚到钱，我比同龄人晚熟得多，总是后知后觉，路上踩了很多坑，35岁前未能进大厂，现在35了，不知道未来的路在哪里，积蓄也不多，没车又没房，只希望公司不要裁员，让我安心待几年。

我们终其一生，都是在为自己的认知买单。

想太多会累，还是躺平吧。尽量贡献一下自己，发光发热，存世留名。

回家睡觉去，晚安各位~~

最后截个图，我的电脑桌面，给大家看看我每天看的美女，哈哈

原文链接：https://juejin.cn/post/7325287148009357338 作者：菲鸽