uniapp搭建vue2+微信小程序项目（兼容H5）初始化注意事项（unocss、vant3等）

已于 2023-12-25 09:19:11 修改
阅读量986 收藏 10
点赞数 8
文章标签： uni-app 微信小程序 小程序
于 2023-12-21 16:16:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51430102/article/details/135133795
版权

uniapp/unocss配置

只有这个方法没问题，按要求配置就行，其他的方法我找了2个多小时，试了多少次，都不行
windicss也考虑过，目前没找到实现方法，如果有运气好的或者大佬会搞windicss的兼容，请评论

uniapp引入unocss开发微信小程序配置

能不用vant就别用vant 直接用 uview

uni-vue2中使用uview

  1. Hbuid -> 工具-> 插件安装 -> 前往插件市场安装 -> 下载到自己项目目录中的src

在这里插入图片描述

2.App.vue中引入样式
在这里插入图片描述
3. 在main中引入并注册
在这里插入图片描述
4. 在pages.json 中加这个，在每个页面中自动引入使用的组件
在这里插入图片描述
5. 在uni.scss 公共样式表中引入uview的样式
在这里插入图片描述

记得这个方法不需要npm i uview！！！

zhuà!
关注
走进小程序【八】微信小程序中使用【Vant组件库】
商务合作/软件定制/学习交流
04-14 2532
走进小程序【八】微信小程序中使用【Vant组件库】
wepy+vant 微信小程序开发总结
大个子小可爱的博客
10-11 1761
前言 本次小程序开发选择使用 wepy作为小程序第三方框架，在UI组件库方面选择的是有赞的移动端组件库Vant去快速搭建小程序应用。这次小程序功能需求并不是特别复杂，目前亲测功能基本满足。这段时间刚好工作空闲期，决定将这次开发的坑以及重要点记录下来，以备今后查阅。 全局安装wePy模块包 npm install wepy-cli -g 代码编辑用的一直还是VsCode，在VsCode编辑...
uniapp+vue3+unocss示例，解压即用 已经各种配置好了的模板，导入Hbuilder课直接运行
02-22
除去的安装配置繁琐操作，直接解压导入HbuilderX就可以用，完全可以直接当初始unocss项目。 vite.config.js、unocss.config.js、main.js已经配置好，其中主题在unocss.config.js可以随意更改成自己喜欢的样式。 项目class已经分好类，涵盖了大部分class无需在官网搜索，可以直接复制当参考文档使用。
在 uniapp 里面使用 unocss
阿臻
11-06 4008
为什么要这样配置呢, 我们想一下, 在小程序里面使用的单位是 rpx, 在 h5 里面使用的是 rem, 为什么我们在使用 uniapp 的时候可以直接写 rpx, 因为 uniapp 的插件在内部处理了, 在编译小程序或者 h5 的时候是做了对应的处理的.这个时候我们就要想一下为什么添加了指令之后 rpx 就无法被转换了为 rem 了呢, 因为 unocss 里面的 transformers 执行顺序是后置与 uniapp 插件的, 所以指令生成的 rpx 是无法被 uniapp 插件处理到的。
如何在uni-app中使用原子化 CSS——UnoCSS
最新发布
流绪@微梦
09-17 1107
UnoCSS是一个即时的原子化 CSS 引擎，旨在灵活和可扩展。核心是不拘一格的，所有的 CSS 工具类都是通过预设提供的。那么，UnoCSS 与其他框架的有何不同之处呢？UnoCSS 由 Windi CSS 团队的成员创建，灵感来源于我们在 Windi CSS 中的工作。虽然 Windi CSS 在 2023 年 3 月停止了维护，但您可以将 UnoCSS 看作是 Windi CSS 的"精神继承者"。
uniapp+unocss
weixin_45322623的博客
12-22 1714
在小程序(UniApp 和 Taro)中使用UnoCSS，兼容不支持的语法。，在h5中会转换成rem,在小程序中为rem。通过这个语句判断启动的是不是小程序。在index.vue中使用。
vue2+vue-cli使用unocss，vue3+vite使用unocss
misschengispink的博客
07-05 4100
在根目录中添加 unocss.config.js 文件是为了提供更细粒度的配置选项给 @unocss/webpack 插件。通过这个配置文件，你可以定制化 UnoCSS 的行为，例如定义主题样式、配置插件、启用或禁用特定功能等。在 Vue CLI 项目中，默认情况下，你应该在根目录创建一个 unocss.config.js 文件来配置 UnoCSS。这个文件会被 @unocss/webpack 插件自动识别并加载。具体配置请查阅官网文档。
【uniapp引入unocss】
qq_50767141的博客
04-09 2481
uniapp引入unicss
uni-app 创建小程序vue2
LRQQHM的博客
11-11 760
3.在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。如果没有开启端口可以直接在微信开发者工具中打开。通过HbuilderX可视化页面创建。
Vue3.0+Vant3.0+Vue-Router4.0高仿微信记账本H5项目。.zip
10-21
在这个“Vue3.0+Vant3.0+Vue-Router4.0高仿微信记账本H5项目”中，开发者利用这些技术来实现一个类似微信的移动记账应用程序，让用户可以在手机网页上方便地管理个人财务。 **Vue3.0**： Vue3.0是Vue.js框架的最新...
【从入门到提桶】vue3.2 + vite + vant + pinia + ts 移动端 h5 项目实践
xxxzzzqqq_的博客
03-15 2382
预览图片旋转就讲完了。不过，扩展名里加 .vue 的话会报错，一般来说 .vue 文件编译之后会是 js，但是 .vue 里面如果包含了样式，会单独提取出来作为一个虚拟的文件，通过查询参数 type=style 来读取，这里以 babel 来转译样式文件当然报错。别急，你以为就这样完事了吗，并没有。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。
uniapp vue3 ts 微信小程序，我在云端有心率数据，想要在微信小程序中显示心率波形图，且可以左右滑动查看
09-11
UniApp结合Vue3和TypeScript是一个强大的跨平台框架，它允许你在微信小程序、H5和更多平台上构建单页应用。如果你想在微信小程序中展示心率波形图并支持滑动查看，你可以按照以下步骤操作： 1. **安装依赖**：首先...
uni-app + vue3项目引入unocss
qq_29184685的博客
07-05 707
【代码】uni-app + vue3项目引入unocss。
Hbuilder创建的项目(uniApp + Vue3)中引入UnoCSS原子css引擎
weixin_52020362的博客
08-26 725
UnoCS通过简化和优化CSS的编写过程来提高Web开发的效率和可维护性。同时还支持预设变量和规则。这些可参看官网进行配置。Unocss通过其原子化方法、高度的可定制性和强大的集成能力，为开发提供了一个高效、灵活且易于维护的CSS。
uniapp\ taro 如何使用 UnoCSS 原子化css
weixin_51225684的博客
10-20 2203
如需更改默认的转换规则，可通过进行修改})presets: [}),],// options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify}),// options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass。
使用vue2开发uni-app项目流程
qq_41282779的博客
08-16 4858
记录使用vue2开发uni-app项目点的前期工作，包括环境工具的准备等。提示：以下是本篇文章正文内容，下面案例可供参考未完待续。
uniapp开发——引入官方uni.css库，iconfont图标库和animate动画库
睫毛长长的舒克
07-14 4207
uniapp有一个官方的css库——uni.css，配合代码块，编码如同德芙一样丝滑，（官方示例中有，不用下载，复制来用即可） 自定义图标库——iconfont（登录iconfont，创建项目，把文件下载下来，解压只要iconfont.css，注意，里面有些东西要删除） 黄色方框圈出的，要删；因为.eot那些加载不了 删完后是这样 css动画库——animate.css（...
hbuilder创建基于vue2的uniapp小程序项目
weixin_45502106的博客
07-18 1066
这个没坑
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值