razzh7 / taro-vue3-template

🐣 Taro3 + Vue3 + Ts 多端编译模版

使用

项目使用 pnpm 包管理工具:

npm install -g pnpm

安装依赖：

pnpm install

启动 H5:

pnpm dev:h5

启动微信小程序:

pnpm dev:weapp

功能

• UnoCSS - 原子化 CSS 引擎
• NutUI 组件库 - Vue 3 组件库，支持 H5 和 小程序双端编译
• CHANGELOG - 自动生成 commit 提交记录
• ESLint + Prettier - 组合管理代码质量和风格
• Git 提交内容校验 - husky、commitlint、lint-staged

UnoCSS 写法

可以到 UnoCSS 文档 中查询语法

推荐使用带 class 写法：

<view class="mt-40px">unocss</view>

<view class="flex items-center text-green/500">unocss</view>

class="mt-40px" 在375（iphone6、iphoneX）的屏幕下对应小程序转换出来将会是:

.mt-40px {
  margin-top: 80rpx;
}

对应 H5 平台转换结果：

.mt-40px {
  margin-top: 40px;
}

Taro 多平台编译组件

参考 Taro 多端组件

对应的演示 demo 分别在 pages/index 和 components 下

搭建过程和用法

文章地址：从零搭建 Taro 多端编译环境

插件

可以在扩展（Extentions) 中搜索 @recommended，就像这样：

这样就可以看到 .vscode 文件中推荐的插件扩展了

taro-vue3-template's Issues

PNPM support

请问大佬 是否考虑把模板换为 pnpm ?

添加 unocss 375 deviceRatio

• taro config 中使用 designWidth: 375
  

• 在 unocss.config.ts 中 添加 375 的换算尺寸标准，这样可以将 px 按照标准，转换成 rpx 和 rem，与 taro 换算标准保持一致

import { defineConfig } from 'unocss'
import presetWeapp from 'unocss-preset-weapp'
export default defineConfig({
  presets: [
    presetWeapp({
      isH5: process.env.TARO_ENV === 'h5',
      platform: 'taro',
      taroWebpack: 'webpack5',
      designWidth: 375,
      deviceRatio: {
        375: 2 / 1
      },
    })
  ]
})