ares-chang / uni-vitesse

使用 Vitesse cli 而不是 HbuildX 获得 double 的开发快乐! Uniapp + Vue 3 + TS + UnoCSS template

在线 Demo

UniAPP 版的 Vitesse-lite

简体中文 | English

环境配置 Copy From Vitesse-lite, 力求一个开发体验良好的环境配置。

特性

• ⚡️ Vue 3, Vite 3, pnpm, ESBuild - 就是快！

• 🗂 基于文件的约定式路由

• 📦 组件自动化加载

• 📑 布局系统

• 🍍 使用 Pinia 的状态管理

• 🎨 UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎

• 😃 各种图标集为你所用

• 🔥 使用 新的 <script setup> 语法

• 📥 API 自动导入 - 直接使用 Composition API 等

• ✅ 使用 Vitest 进行单元和组件测试

• 🦾 TypeScript, 当然

• 🔒︎ 锁 pnpm 包管理

• ☁️ 零配置部署 Netlify

如无跨端需求, 更推荐 Vitesse-lite

从 Vitesse-lite 中删除了以下特性

• VueUse

预配置

UI 框架

• UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎

Icons

• Iconify - 使用任意的图标集，浏览：🔍Icônes

• UnoCSS 的纯 CSS 图标方案

测试框架

• Vitest - 由 Vite 支持的单元测试

插件

• Pinia - 符合直觉的 Vue.js 状态管理库

• unplugin-auto-import - 直接使用 Composition API 等，无需导入

• unplugin-vue-components - 组件自动导入

• vite-plugin-vue-devtools - 旨在增强 Vue 开发者体验。

• uni-helper 组织

  • vite-plugin-uni-pages - 基于文件的约定式路由

  • vite-plugin-uni-layouts - 页面布局系统

  • uni-app-types - UniApp 类型增强

  • unocss-preset-uni - UnoCSS UniApp 预设，修复 Windows 平台频繁崩溃问题 #3603

    • unocss-applet - UnoCSS 小程序预设，兼容在小程序中使用 Attributify Mode

  • eslint-config - 适用于 UniApp 的 Antfu ESLint 配置

编码风格

• 使用 <script setup> 的 SFC 语法 与 Composition API 结合使用。
• 使用 ESLint 工具检查代码格式，并使用 @antfu/eslint-config 配置，使用单引号并去掉分号。

现在可以试试!

GitHub 模板

使用这个模板创建仓库.

克隆到本地

如果您更喜欢使用更干净的 git 历史记录手动执行此操作

npx degit ares-chang/uni-vitesse my-uni-app
cd my-uni-app
pnpm i # 如果你没装过 pnpm, 可以先运行: npm install -g pnpm

检查清单

当您使用此模板时，请尝试按照清单正确更新您的信息

• 更改 LICENSE 中的作者姓名
• 更改 manifest.json 中的项目名称，描述，appid 等
• 更改 public 中的图标
• 整理 README 并删除演示页面和组件

接下来就请享受吧！:)

运行

参考 uni-app 官方文档：运行、发布uni-app

uni-vitesse's Issues

现在这种情况如何使用第三方的UI框架和内置的组件

执行pnpm dev:* 报错

node version: v16.18.0

编译为微信小程序插件报错

"dev:mp-wx:plugin": "uni build -w -p mp-weixin --plugin --out-dir dist/dev/mp-weixin/plugin",
"build:mp-wx:plugin": "uni build -p mp-weixin --plugin --out-dir dist/build/mp-weixin/plugin",

这两条命令可以编译为小程序插件，但是编译后会输出app.wxss文件 并且每个页面的wxss都会引入app.wxss 问题就在这里

微信现在有个bug 就是其他页面引入app.wxss就会报错 将app.wxss改名为a1.wxss则没有报错

来此想寻求一个解决方案，是否可以将此模板输出的app.wxss改个其他的名字；在uniapp文档中也为找到相关配置（可能是我没找到）

在微信提的问题 有回复 但是很摆烂
https://developers.weixin.qq.com/community/minihome/doc/000cee3e934a30ecb02177a7267800

Mac M1 芯片编译 App 报错

我把项目用hbuildx打开，运行pnpm install 后 选择运行到app基座，然后报错

添加个uniCloud

添加个uniCloud

不能热更新怎么破

Pinia 升级导致无法运行

运行环境是要求pnpm什么版本么，安装依赖有问题

Hello， 我遇到了一个问题 vite-plugin-uni-layouts 不生效

"@uni-helper/vite-plugin-uni-layouts": "^0.1.1",
"@uni-helper/vite-plugin-uni-pages": "^0.2.2",
"vue": "^3.3.4",
"vite": "4.1.4",

微信小程序编译

编译成微信小程序是webview吗

README repo icon

router error

构建后，打开小程序中间loading很久才出现页面，白屏时间太久

如果我想使用uni内置组件, zheng常使用的话就提示无用的标签

遇到一个很诡异的bug,

src/pages/index.vue这个文件
我只是复制了一个按钮

 <div>
      <button m-3 text-sm btn :disabled="!name" @click="router.push(`/hi?name=${name}`)">
        Go
      </button>
    </div>

    <div>
      <button m-3 text-sm btn :disabled="!name" @click="router.push(`/hi?name=${name}`)">
        Go2
      </button>
    </div>

可是 渲染的结果是

<div data-v-inspector="src/pages/index.vue:13:5">
  <uni-button class="" disabled="true" m-3="" text-sm="" btn="" data-v-inspector="src/pages/index.vue:14:7"> Go
  </uni-button>
</div>
<div data-v-inspector="src/pages/index.vue:19:5">
  <uni-button class="div button m-3 text-sm btn Go button div div button m-3 text-sm btn" disabled="true" m-3=""
    text-sm="" btn="" data-v-inspector="src/pages/index.vue:20:7"> Go2 </uni-button>
</div>

其他文件没这问题

在框架中使用canvas uni官方提供的demo不生效

模版代码一丝不动直接运行小程序报错

支付宝小程序

快手小程序

抖音小程序

微信小程序运行是不报错的

APP端安卓和ios模拟器都可以正常运行

我的开发环境如下：
OS: macOS Monterey，英特尔 I5
Node Version: v16.17.0
Package Manager: [email protected]
Builder: vite

项目中的vue版本为3.4, 在实际使用中使用defineModel，报错

vscode-eslint2.4.2 无法启用

使用该模板在vscode中vscode-eslint2.4.2中无法启用
[Error - 11:35:35] An unexpected error occurred:
[Error - 11:35:35] Error: Invalid Options:

• Unknown options: extensions
• 'extensions' has been removed.

开发模式下初次加载 `unocss` 样式未被添加

描述问题

开发模式下首次打开页面 unocss 样式未被加载, __uno.css 内未包含样式信息。

刷新页面后解析规则会被加入

复现

执行 play:h5 即可复现，只有首次加载或切换分页会出现问题

系统信息

System:
    OS: Windows 11 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
    Memory: 812.09 MB / 7.79 GB
  Binaries:
    Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.9.2 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (119.0.2151.44)
    Internet Explorer: 11.0.22621.1

使用的包管理器

pnpm

核对

• 遵循我们的 行为准则
• 检查是否已经有一个报告相同错误的问题，以避免重复创建。
• 这是一个具体的错误。请开启 GitHub 讨论你的疑问。
• 所提供的复现是这个问题的 最小复现。

h5端热更新时，全页刷新问题

你好，对于 #9 提及的不能热重载，即在 h5 端热重载时会导致全页强制刷新，我排查下来是 @uni-helper/vite-plugin-uni-pages 插件所导致的。目前该问题已经 得以解决，实测只需要升级它到最新版本就行