diff --git a/App.vue b/App.vue index 67bc3c0..b471e8d 100644 --- a/App.vue +++ b/App.vue @@ -55,6 +55,8 @@ onHide(() => { /*每个页面公共css */ @import '@/common/animation.css'; @import '@/common/common.css'; +/* 引入阿里图标库 */ +@import url("/static/iconfont/iconfont.css"); /* 修改pages tabbar样式 H5有效 */ .uni-tabbar .uni-tabbar__item:nth-child(4) .uni-tabbar__bd .uni-tabbar__icon { height: 110rpx !important; diff --git a/components/IconfontIcon/IconfontIcon.vue b/components/IconfontIcon/IconfontIcon.vue new file mode 100644 index 0000000..5a43e2a --- /dev/null +++ b/components/IconfontIcon/IconfontIcon.vue @@ -0,0 +1,70 @@ + + + + + + diff --git a/components/MsgTips/MsgTips.vue b/components/MsgTips/MsgTips.vue index 36a7c28..c5a3666 100644 --- a/components/MsgTips/MsgTips.vue +++ b/components/MsgTips/MsgTips.vue @@ -13,10 +13,10 @@ {{ content }} @@ -137,4 +137,18 @@ export default { } } } + +// 重置button样式 +button { + padding: 0; + margin: 0; + border: none; + background: none; + font-size: inherit; + line-height: inherit; +} + +button::after { + border: none; +} \ No newline at end of file diff --git a/components/renderJobs/renderJobsCheckBox.vue b/components/renderJobs/renderJobsCheckBox.vue index da50a5d..9b070d6 100644 --- a/components/renderJobs/renderJobsCheckBox.vue +++ b/components/renderJobs/renderJobsCheckBox.vue @@ -62,7 +62,7 @@ +``` + +## 🔧 替代方案 + +### 如果确实需要 uni-ui + +如果项目中大量使用了 uni-ui 组件，可以安装完整的 uni-ui： + +```bash +npm install @dcloudio/uni-ui +``` + +然后在 `pages.json` 中配置： + +```json +{ + "easycom": { + "autoscan": true, + "custom": { + "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" + } + } +} +``` + +### 使用原生组件的优势 + +1. ✅ **更小的包体积** - 不需要引入额外的库 +2. ✅ **更好的兼容性** - 原生组件在所有平台都可用 +3. ✅ **更快的编译速度** - 减少依赖解析 +4. ✅ **更灵活的样式** - 可以完全自定义 + +## 🎯 button vs uni-button 对比 + +### 原生 button + +```vue + + + +``` + +**优点：** +- ✅ 无需安装依赖 +- ✅ 完全自定义样式 +- ✅ 支持所有平台 +- ✅ 性能更好 + +**缺点：** +- ⚠️ 需要手动重置样式 +- ⚠️ 需要自己实现 loading、disabled 等状态 + +### uni-button + +```vue + + 点击我 + +``` + +**优点：** +- ✅ 内置多种样式 +- ✅ 自带 loading、disabled 状态 +- ✅ 统一的UI风格 + +**缺点：** +- ❌ 需要安装 uni-ui +- ❌ 增加包体积 +- ❌ 自定义样式受限 + +## 📝 button 样式重置模板 + +推荐在全局样式中添加 button 重置： + +```css +/* App.vue 或 common.css */ + +/* 重置 button 默认样式 */ +button { + padding: 0; + margin: 0; + border: none; + background: none; + font-size: inherit; + font-family: inherit; + color: inherit; + line-height: inherit; + text-align: inherit; + cursor: pointer; + box-sizing: border-box; +} + +/* 移除微信小程序 button 的默认边框 */ +button::after { + border: none; +} + +/* 移除 button 按下时的背景色 */ +button:active { + background-color: inherit; +} + +/* 通用按钮样式 */ +.btn { + display: inline-block; + padding: 20rpx 40rpx; + border-radius: 12rpx; + text-align: center; + transition: all 0.3s; +} + +.btn-primary { + background: linear-gradient(135deg, #13C57C 0%, #0FA368 100%); + color: #FFFFFF; + box-shadow: 0 8rpx 20rpx rgba(19, 197, 124, 0.3); +} + +.btn-secondary { + background: #F7F8FA; + color: #666666; +} +``` + +## ⚠️ 注意事项 + +### 1. 编译器宏的特殊性 + +```javascript +// ❌ 错误：不能解构或重命名 +import { defineProps as props } from 'vue' + +// ❌ 错误：不能在条件语句中使用 +if (someCondition) { + defineProps({...}) +} + +// ✅ 正确：直接在顶层使用 +const props = defineProps({...}) +``` + +### 2. TypeScript 支持 + +如果使用 TypeScript，编译器宏会自动获得类型支持： + +```typescript + +``` + +### 3. 在非 setup 语法中 + +如果不使用 ` +``` + +## ✅ 验证修复 + +修复后，重新编译项目应该看到： + +1. ✅ 没有 "Rollup failed to resolve import" 错误 +2. ✅ 没有 "defineXxx is a compiler macro" 警告 +3. ✅ 小程序正常编译和运行 +4. ✅ 按钮样式显示正常 + +## 🔍 排查步骤 + +如果修复后仍然有问题： + +### 1. 清除缓存 + +``` +HBuilderX: +运行 → 停止运行 +工具 → 清除缓存 +重新运行 +``` + +### 2. 检查所有文件 + +使用全局搜索检查是否还有遗漏： + +``` +Ctrl + Shift + F +搜索: import.*defineProps +搜索: import.*defineEmits +搜索: import.*defineExpose +``` + +### 3. 检查 pages.json + +确保 easycom 配置正确： + +```json +{ + "easycom": { + "autoscan": true, + "custom": { + "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" + } + } +} +``` + +### 4. 重新安装依赖 + +```bash +# 删除 node_modules 和 lock 文件 +rm -rf node_modules +rm package-lock.json + +# 重新安装 +npm install +``` + +## 📚 相关文档 + +- [Vue 3 script setup 文档](https://cn.vuejs.org/api/sfc-script-setup.html) +- [uni-app button 组件](https://uniapp.dcloud.net.cn/component/button.html) +- [uni-ui 文档](https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html) +- [Vite 构建优化](https://cn.vitejs.dev/guide/dep-pre-bundling.html) + +## 🎉 总结 + +### 问题 +1. 使用了未安装的 `uni-button` 组件 +2. 错误地从 vue 导入了编译器宏 + +### 解决 +1. ✅ 将 `` 替换为 `