一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

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

项目地址

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

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

1、UnoCSS 使用

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

如果不记得,可以查 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

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

2、UnoCSS Icons 使用

  • 在里面找到某个库,如 carbon
  • 搜索想要的图表,如 avatar,出现的搜索结果,查看类名,也可以点击图标,会出现详情
    【2024】uniapp+vue3超实用模板(最佳食用+一些思考)

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

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

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

3、自动格式化:import 自动排序,css 属性自动排序

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

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

4、统一 VSCode 配置

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

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

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

  • 自动生成page的gif如下

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

  • 过滤的配置如下

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

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

6、TODO

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

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


最终源码地址:

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:后续我整理一个在线表格出来,所有的类目分别适用于什么类型的开发者)

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

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

难道 web3 才是未来?

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

思考三:uniCloud vs laf,用哪个?

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

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

TODO2:后续我专门写一篇文章说明 uniCloudlaf 的对比,注意这里说的 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直聘的登录。

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

最终形态如下图:

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

思考六:人为财死鸟为食亡,我要怎么才能赚到钱?

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

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

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

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

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

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

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

(0)
上一篇 2024年1月19日 上午10:26
下一篇 2024年1月19日 上午10:37

相关推荐

发表评论

登录后才能评论