HBuilder X 4.76 开发微信小程序集成 uview-plus

简介

本文记录了在HBuilder中创建并配置uni-app项目的完整流程。

首先创建项目并测试运行,确认无报错后添加uView-Plus组件库。

随后修改了main.js、uni.scss、App.vue等核心文件,配置manifest.json并安装dayjs、clipboard等依赖库。

通过调整vite.config.js和添加rollup-plugin-visualizer插件优化构建配置,同时启用easycom组件模式。

最后完成了TypeScript支持配置,并通过多张截图展示了各组件在不同主题色下的测试效果,验证了整个项目的正常运行。

整个过程涵盖了从初始化到UI组件集成的完整开发环节。

创建项目

测试运行


需要在HBuilder 中补上AppId

运行正常,没有报错。

添加 uview-plus

打开地址 https://ext.dcloud.net.cn/plugin?name=uview-plus



修改 main.js

修改 uni.scss

修改App.vue

配置manifest

安装依赖库

bash 复制代码
npm init -y
npm i dayjs
npm i clipboard


修改 vite.config.js



安装 :rollup-plugin-visualizer

bash 复制代码
npm i rollup-plugin-visualizer -D 

配置easycom组件模式

typescript支持


测试






补充:清理日志



好了,这样日志旧干净了。

相关推荐
卷Java几秒前
WXML 编译错误修复总结
xml·java·前端·微信小程序·uni-app·webview
Q_Q19632884753 小时前
python+springboot+uniapp基于微信小程序的巴马旅居养老系统 旅游养老小程序
spring boot·python·小程序·django·flask·uni-app·node.js
老华带你飞3 小时前
寝室快修|基于SprinBoot+vue的贵工程寝室快修小程序(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·贵工程寝室快修
毕设源码-郭学长3 小时前
【开题答辩全过程】以 “辛巴克餐饮”小程序为例,包含答辩的问题和答案
小程序
2501_915106323 小时前
上架 App 全流程解析,iOS 应用上架步骤、App Store 审核流程、ipa 文件上传与测试分发经验
android·ios·小程序·https·uni-app·iphone·webview
云起SAAS8 小时前
养成合成小游戏抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·养成合成小游戏
轩情吖8 小时前
Qt常用控件之QLabel(一)
开发语言·数据库·c++·qt·小程序·qlabel·桌面开发
小小王app小程序开发11 小时前
旧衣回收小程序:非技术视角下的价值重构与发展前景
小程序·重构
星梦清河11 小时前
Day03:小程序的常用操作
小程序