基于vue3+ts的uni-app组件库，快来了解下

已于 2023-11-02 10:56:17 修改
阅读量331 收藏
点赞数
分类专栏： uni-app开发实践 文章标签： uni-app vue 微信小程序 小程序 前端 typescript
于 2023-08-28 10:00:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31647491/article/details/132532814
版权

介绍

参照wot-design-mini组件库，我们基于vue3+ts开发了一个uni-app组件库wot-design-uni。

正式发布

我们将于2023年09月03日发布正式版0.1.0。

完成的工作

  • 移植 wot-design-uni 全部的组件
  • 基于vue3+ts开发
  • 支持了暗黑模式
  • 新增了 Notify 和 Skeleton 组件

地址

🚀 文档网站 (官网) 🔥 文档网站 (Netlify) 🔥 Git地址 (Github) 🔥 Git地址 (Gitee) 🔥 插件市场

✨ 特性

  • 🚀 支持 APP、H5、微信小程序 等平台.
  • 🚀 50+ 个高质量组件，覆盖移动端主流场景.
  • 💪 使用 Typescript 构建，提供良好的组件类型系统.
  • 💪 采用 Vue3 最新特性，提升组件性能.
  • 📖 提供丰富的文档和组件示例.
  • 🎨 支持主题定制，可以定制 scss 变量以及组件的样式自定义.
  • 🍭 支持暗黑模式

📱 预览

扫描二维码访问演示：

快速上手

详细说明见 快速上手

链接

贡献指南

修改代码请阅读我们的 贡献指南。

使用过程中发现任何问题都可以提 Issue 给我们，当然，我们也非常欢迎你给我们发 PR。

贡献者们

感谢以下所有给 Wot Design Uni 贡献过代码的 开发者。

部分组件效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

不如摸鱼去
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的
uni-app+ts+vue3 头像创意工厂小程序源码
09-12
国庆节即将到来！让我们一起准备一个漂亮的微信头像，借助我的小程序“头像创意工场”，为这个国庆佳节增添色彩。朋友们的祝福将像温暖的阳光一样照耀。无需华丽的辞藻，也无需抄袭别人的思考，只需真心地说一声：“愿你一生幸福无烦恼。” 也欢迎大家来体验我的小程序，为你的头像增添更多创意和乐趣！在这个特别的日子里，让我们一起欢度国庆，展现独特的个性和爱国情怀。小程序采用 uni-app+ts+vue3 设计，已增加 隐私保护指引，拿来即用，是小程序 “头像创意工场” 前端的全部源码，需要说明的是，此源码只有前端，需要调用后端获取分类和头像框，如果无后端，可以直接前端JSON 也是可以的。部署过程有任何疑问QQ：913349747 联系。节日头像,国庆头像,头像定制,创意头像,个性化头像,定制头像,渐变头像,国庆头像合成,元旦头像,新年头像,姓氏头像,头像合成
Vue3+TS版本Uniapp：项目前置操作
最新发布
海风依旧
04-21 1095
前端小王hsUniapp+Nest综合社交型项目项目前置操作
一个基于Vue3+TS开发的uni-app组件库，提供60+高质量组件，支持暗黑模式、国际化和自定义主题.zip
04-03
一个基于Vue3+TS开发的uni-app组件库，提供60+高质量组件，支持暗黑模式、国际化和自定义主题.zip
基于Vue.js的uni-app跨平台应用前端框架设计源码
04-19
本源码为基于Vue.js的uni-app跨平台应用前端框架设计，共包含1967个文件，其中js文件1405个，json文件127个，vue文件107个，ts文件102个，md文件74个，png文件25个，wxss文件11个，html文件11个，css文件10个，wxml文件7个。该项目是一个使用Vue.js开发跨平台应用的前端框架，适合用于开发多种平台的应用。
wot-model-viewer:在线坦克世界模型查看器
05-30
wot-model-viewer 在线坦克世界模型查看器 汇入资料 导入模型，如导入文件夹中所述 将 gui.pkg/gui/maps/icons/vehicle/contour/* 复制到 images/imgContour/* 要求 您需要以某种方式列出 tank 及其各自的 ident 字符串，如 tank.php 中所列。 您可以使用 wot-data-importer。
uniapp 小程序 使用vue3+ts运行项目
weixin_71403100的博客
07-18 4213
下载完模板后进行解压，利用vscode打开文件，会发现报这样的错误👇主要原因是没有下载依赖。注意：若不能直接使用命令下载，可去gitee下载模板使用。其中dist里面的dev文件就是小程序打包生成的文件👇。解决以上错误：使用npm i 下载全部依赖即可。第一种：通过HBuilderX可视化界面创建。第二种：通过vue-cli命令行。此时终端会提示操作步骤👇。
uniapp 小程序 使用 vue3 + ts
weixin_62234646的博客
06-30 881
1. 全局安装 vue-cli（安装跳过）2. 创建以 typescript 开发的工程（如命令行创建失败，请直接访问。可能会出现以下错误。别慌，npm i 安装全部依赖之后就好了。除了HBuilderX可视化界面，也可以使用。建议直接去下载模版，命令行问题有点多。
小程序-uni-app：uni-app-base项目基础配置及使用 / uni-app+vue3+ts+vite+vscode
snowball的博客
06-08 1万+
需要注意的是，在其它组件或环境中使用富文本组件导出的html时，需要额外引入。例如在match-media组件中放置一个侧边栏，媒体查询规则设置为宽屏才显示，就可以实现在PC宽屏显示该侧边栏，而在手机窄屏中不显示侧边栏的效果。vite.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 vite 的编译选项。指定类目的小程序才能使用（用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。
uniapp vue3 + Uview-push 安装使用
weixin_68266812的博客
03-13 3885
vue3 Uview - push uniapp
【uniapp】uniapp项目vue2/vue3引入使用vant组件库
Minf的博客
02-23 6431
vant是一个优秀的移动端组件库，他支持VUE2、VUE3、微信小程序三个框架，这期就来尝试在uniapp中，vue2和vue3分别引入vant组件库注意：本教程只适用H5，无法运行到微信小程序。
uni-app vue3 vite ts 空项目
09-14
uni-app vue3 vite ts、uni-app、微信小程序、小程序，包含 pinia 持久化状态管理、request网络请求封装、测试组件、测试网路请求
uniapp官网中好用的ui组件推荐
紫月i的博客
05-02 5614
1.省市县地区选择器： https://ext.dcloud.net.cn/plugin?id=7065 效果图： 2.折叠面板： https://uniapp.dcloud.net.cn/component/uniui/uni-collapse.html 3.级联选择器： https://uniapp.dcloud.net.cn/component/uniui/uni-data-picker.html 效果如下： 4.日期选择器： https://uniapp.dcloud.net.cn/compo
vscode开发 vue3+ts 的 uni-app 微信小程序项目（黑马）
m0_59778008的博客
04-12 892
打开 微信开发者工具, 导入。在vscode设置中搜索。编译完成后项目中多了一个。
uni-app原生editor封装编辑组件（vue3）
lemon2cen的博客
08-16 1409
基于uni-app内置的editor，简单封装了几个基本的功能，包括加粗、倾斜、段落格式、分割线、上下角标等。
uniapp+vue3+vite+ts搭建项目引入uni-ui和uviewPlus组件库
你离优秀差多少
06-28 3726
src/package.json 文件配置easycom模式。（如命令行创建失败，请直接访问 gitee下载模板）首先使用官方提供的脚手架创建一个项目。
uni-app框架看这五款组件库就够了
热门推荐
lonlie的博客
12-30 2万+
FirstUI(https://www.firstui.cn/)是一套超高性能、超高颜值的移动端UI综合解决方案，包含业内顶尖的组件库、强大的功能库、丰富精美的模板库，提供uni-app(完美支持nvue)、微信小程序版本，兼顾高效率与高性能，让您的app、小程序开发获得百倍提质提速！ 120+款组件领跑业界，性能和设计感都很棒，真正的移动端宝藏组件库！ 现在有微信小程序版、uniapp版两个版本，近期更新到了1.7.0，完美支持vue3。
Wot Design Uni 上新 Segmented 分段器 ，赶快进来看看效果吧！
qq_31647491的博客
09-28 125
使用插槽label可以自定义渲染分段器的标签内容。
vue3+ts+uni-app实现电子签名
11-24
根据提供的引用内容，我们可以使用uni-app的canvas组件来实现电子签名。以下是实现步骤： 1. 在uni-app项目中安装canvas组件：`npm install --save uni-canvas` 2. 在需要使用电子签名的页面中引入canvas组件： ```vue <template> <view> <canvas :canvas-id="canvasId" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"></canvas> <button @click="clearCanvas">清除</button> <button @click="saveCanvas">保存</button> </view> </template> <script> import uniCanvas from 'uni-canvas'; export default { components: { uniCanvas }, data() { return { canvasId: 'myCanvas', ctx: null, isDrawing: false, lastX: 0, lastY: 0 } }, mounted() { this.ctx = uni.createCanvasContext(this.canvasId, this); }, methods: { handleTouchStart(e) { this.isDrawing = true; this.lastX = e.touches[0].x; this.lastY = e.touches[0].y; }, handleTouchMove(e) { if (!this.isDrawing) return; this.ctx.beginPath(); this.ctx.moveTo(this.lastX, this.lastY); this.ctx.lineTo(e.touches[0].x, e.touches[0].y); this.ctx.stroke(); this.lastX = e.touches[0].x; this.lastY = e.touches[0].y; }, handleTouchEnd() { this.isDrawing = false; }, clearCanvas() { this.ctx.clearRect(0, 0, uni.upx2px(375), uni.upx2px(500)); }, saveCanvas() { uni.canvasToTempFilePath({ canvasId: this.canvasId, success: function(res) { uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: function() { uni.showToast({ title: '保存成功' }); } }); } }, this); } } } ``` 在模板中，我们使用canvas组件来绘制电子签名，同时添加了两个按钮，一个用于清除画布，一个用于保存签名。在脚本中，我们使用uni.createCanvasContext方法获取canvas上下文，然后监听touch事件来绘制签名。最后，我们使用uni.canvasToTempFilePath方法将canvas转换为图片，并使用uni.saveImageToPhotosAlbum方法将图片保存到相册中。 3. 在tsconfig.json文件中添加以下配置： ```json { "compilerOptions": { "target": "es6", "module": "esnext", "moduleResolution": "node", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "esModuleInterop": true, "lib": [ "esnext", "dom", "dom.iterable", "scripthost" ] }, "include": [ "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx" ], "exclude": [ "node_modules" ] } ``` 在tsconfig.json文件中，我们将target设置为es6，module设置为esnext，同时开启了strict模式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值