sonofmagic / uni-app-vite-vue3-tailwind-vscode-template

uni-app vue3 tailwindcss 模板，集成了 iconify,eslint,typescript,prettier 等等工具作为解决方案

uni-app-vite-vue3-tailwind-vscode-template

基于 uni-app 的 vite/vue3 tailwindcss 模板

假如你觉得好用，欢迎给我的 weapp-tailwindcss 点个 Star 吧。

官网地址: https://weapp-tw.icebreaker.top/

特性

• ⚡️ Vue 3, Vite, Yarn - 快且稳定

• 🎨 TailwindCSS - 世界上最流行，生态最好的原子化CSS框架

• 😃 集成 Iconify - icones.js.org 中的所有图标都为你所用

• 📥 API 自动加载 - 直接使用 Composition API 无需引入

• 🧬 uni-app 条件编译样式 - 帮助你在多端更灵活的使用 TailwindCSS

• 🦾 TypeScript & ESLint & Prettier - 类型，校验与格式化，保证你的代码质量

快速开始

使用 vscode 的朋友，请先安装 Tailwind CSS IntelliSense 智能提示与感应插件

其他 IDE 请参考: https://weapp-tw.icebreaker.top/docs/quick-start/intelliSense

本项目已经集成 weapp-ide-cli 可以通过 cli 对 ide 进行额外操作，详细信息

单位转换

• rem->rpx (默认开启, uvtw 的 rem2rpx 选项)
• px -> rpx (默认不开启，可反注释 postcss.config.cjs 中的 postcss-pxtransform 开启配置)

Tips

• 升级 uni-app 依赖的方式为 npx @dcloudio/uvm 后，选择对应的 Package Manager 即可。而升级其他包的方式，可以使用 yarn upgradeInteractive --latest，这个是 yarn 自带的方式。

之前使用 pnpm 进行安装的时候，一直有 bug 导致控件库无法加载运行，如果发现 pnpm 好了可以 issue 里通知一声

• vite 使用高德地图加载 commonjs 模块示例见 https://github.com/sonofmagic/uni-app-vue3-for-amap-wx，需要使用 @rollup/plugin-commonjs

• 另外暂时不要升级 pinia 的版本，不然会报hasInjectionContext相关的错误 ，详见 pinia/issues/2210

uni-app-vite-vue3-tailwind-vscode-template's Issues

编译成支付宝小程序不会转换成 rpx

uni-ui 扩展组件 Webstorm 无法识别

像这种 uni-ui 的扩展组件，Webstorm 无法识别，是否有办法处理呢？

运行命令npm run dev:h5:ssr，报错

运行命令npm run dev:h5:ssr，报错
错误信息如下：
uni --ssr

请注意运行模式下，因日志输出、sourcemap 以及未压缩源码等原因，性能和包体积，均不及发行模式。
正在编译中...
error when starting dev server:
Error: Failed to resolve vue/compiler-sfc.
@vitejs/plugin-vue requires vue (>=3.2.25) to be present in the dependency tree.

运行环境
node: 14.19.3
yarn: 3.4.1

[eslint error] in vite.config.ts

描述这个Bug
vite.config.ts 文件中, eslint报错(用eslint来处理ts error)

Require statement not part of import statement.eslint@typescript-eslint/no-var-requires

屏幕截图(可选)

其实直接import导入就行了

import autoprefixer from 'autoprefixer';
import tailwindcss from 'tailwindcss';
import rem2px from 'postcss-rem-to-responsive-pixel';

const postcssPlugins = [autoprefixer(), tailwindcss()];
if (!WeappTailwindcssDisabled) {
  postcssPlugins.push(
    rem2px({
      rootValue: 32,
      propList: ['*'],
      transformUnit: 'rpx',
    }),
  );
}

在我这边是可以, 你可以再验证下
Thx

PS: 这个库很不错, 查了很多uniapp集成tailwindcss的方案, 这个库最靠谱

​patch tailwindcss failed:body.at is not a function​

启动报这个不知道是为什么 ​patch tailwindcss failed:body.at is not a function​

hover-class 下的 dark 模式失效

<view class="bg-gray-100 dark:bg-zinc-800" hover-class="bg-red-500 dark:bg-green-500"></view>

编译后

<view class="bg-gray-100 dark_c_bg-zinc-800" hover-class="bg-red-500 dark:bg-green-500"></view>

hover-class 里的 dark:bg-green-500 没有编译

请问这个uniapp vue3 setup ts 如何引入高德小程序插件amap-wx.js ？

请问这个uniapp vue3 setup ts 如何引入高德小程序插件amap-wx.js ？大佬请教下
想在小程序实现高德地图选择周边地理位置功能。
https://lbs.amap.com/api/wx/guide/get-data/get-inputtips

uni-app input 控件，tailwind css 未生效

如果使用 style 则生效，猜测是 tailwind css 的优先级不如 uni-app 的内置组件样式的优先级

error: Cannot find name 'uni'.ts(2304)

in src/pages/index/index.vue
Cannot find name 'uni'. ts(2304)

编译成小程序后webview标签消失了？

<template> <div class='page'> <web-view :webview-styles="color" src="https://h5.eventnet.cn/html/xxx.html?v=1.11"></web-view> </div> </template>
编译小程序后webview标签消失了，没弄明白是什么原因。还有就是pnpm可以用了。

构建失败

打包的 dist 中的 app.wxss 会存在
@tailwind base;
@tailwind utilities;
微信开发者工具无法解析，报错

为什么例子中view和div混用， 如果我都用div可以编译h5和小程序应该没啥问题吧？

deprecated packages [[email protected], [email protected]]

我想请教一下，这个包怎么找到它。是那个包带着这个依赖，并且没有更新到 @jridgewell/sourcemap-codec, 我想知道用什么命令直接找到它

真机测试爆红

请问这种情况是正常的吗？

直接clone的仓库 webstorm打开 yarn install 初始化 yarn run dev:mp-weixin 启动，开发工具里是正常的，真机出现这个错误，不影响页面显示。

请教uni模版中如何配置customAttributes？

作者大大好，我想使用比如group-hover-class属性，参考了这个 https://github.com/sonofmagic/weapp-native-mina-tailwindcss-template/issues/3链接内的配置，

export default defineConfig({
  // uvtw 一定要放在 uni 后面
  plugins: [
    uni(),
    uvtw({
      customAttributes: {
        '*': ['group-hover-class']
      },
      disabled: WeappTailwindcssDisabled
    }),
...

但似乎没有生效

<view class="flex-1 group" group-hover-class="!bg-indigo-500 !text-red">
...
</view>

请问是哪里搞错了吗？

yarn dev:app报错

nodejs版本：v18.16.1
启动app模式报错：

[plugin:vite-plugin-uni-app-weapp-tailwindcss-adaptor] Cannot read properties of undefined (reading 'length')

h5没问题