更新记录
0.1.0(2024-07-27) 下载此版本
平台兼容性
Vue2 | Vue3 |
---|---|
× | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
Root
借助 Vite 模拟出虚拟的全局组件,解决 uniapp 无根组件导致无法使用全局共享组件问题
📦 安装
可以直接从插件导入 或者 采用node包
pnpm add -D @uni-ku/root@latest
🚀 使用
- 引入
@uni-ku/root
// vite.config.*
import { defineConfig } from 'vite'
import UniKuRoot from '@uni-ku/root'
export default defineConfig({
plugins: [
// 若存在改变 pages.json 的插件,请将 UniKuRoot 放置其后
UniKuRoot()
]
})
- 根目录下创建
App.ku.vue
并添加全局所需组件或代码
通过标签 <KuRootView />
或 <ku-root-view />
实现指定共享组件存放位置,该功能与 VueRouter 中的 RouterView 实现类似
<!-- App.ku.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import GlobalToast from './components/GlobalToast.vue'
const helloVueRef = ref('test')
</script>
<template>
<div>Hello AppKuVue</div>
<KuRootView />
<div>{{ helloVueRef }}</div>
<GlobalToast />
</template>
✨ 例子
全局Toast组件核心实现请关注: src/components
src/composables
- 🔗 查看完整例子
📝 待办
- [x] 支持热更新
- [x] 支持VueSFC
- [x] 支持小程序PageMeta
- [ ] 补全单元测试
📫 项目地址
如果对此项目感到兴奋,可以点个 star ⭐💜