Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/uni-ku/root
🦾 解决 Uniapp 无法使用公共组件问题
https://github.com/uni-ku/root
miniprogram uni-app uni-root uniapp vite-plugin vue3
Last synced: 3 months ago
JSON representation
🦾 解决 Uniapp 无法使用公共组件问题
- Host: GitHub
- URL: https://github.com/uni-ku/root
- Owner: uni-ku
- License: mit
- Created: 2024-07-08T10:50:13.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-08-22T14:46:02.000Z (3 months ago)
- Last Synced: 2024-08-28T07:18:01.954Z (3 months ago)
- Topics: miniprogram, uni-app, uni-root, uniapp, vite-plugin, vue3
- Language: TypeScript
- Homepage:
- Size: 796 KB
- Stars: 19
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-uni-app - vite - ku/root) - 一个模拟 App.vue 原有能力的根组件插件 (打包器插件)
README
# Root
借助 Vite 模拟出虚拟根组件(支持SFC的App.vue)，解决 uniapp 无法使用公共组件问题
[](https://www.npmjs.com/package/@uni-ku/root)
[](https://www.npmjs.com/package/@uni-ku/root)
[](https://www.npmjs.com/package/@uni-ku/root)
> [!TIP]
> 从 v0.2.0 开始, 已支持 HBuilderX 创建的 Vue3 项目
### 🎏 支持
- Uniapp
- Vue3
- CLI 或 HBuilderX 创建的项目
### 📦 安装
```bash
pnpm add -D @uni-ku/root
```
### 🚀 使用
1. 引入 `@uni-ku/root`
- CLI: `直接编写` 根目录下的 vite.config.*
- HBuilderX: 需要根据你所使用语言, 在根目录下 `创建` vite.config.*
```js
// vite.config.*
import { defineConfig } from 'vite'
import UniKuRoot from '@uni-ku/root'
import Uni from '@dcloudio/vite-plugin-uni'
export default defineConfig({
plugins: [
// 若存在改变 pages.json 的插件，请将 UniKuRoot 放置其后
UniKuRoot(),
Uni()
]
})
```
2. 创建 `App.ku.vue`
通过标签 `` 或 `` 指定视图存放位置，且可以放置到 `template` 内任意位置，但仅可有一个
> 该功能与 VueRouter 中的 RouterView 功能类似
- CLI: 需要在 `src目录` 下创建下 App.ku.vue
- HBuilderX: 直接在 `根目录` 下创建 App.ku.vue
```vue
import { ref } from 'vue'
const helloKuRoot = ref('Hello AppKuVue')
{{ helloKuRoot }}
```
3. 如何使用 `App.ku.vue` 实例 ？
有两种方法，局部或全部启用，请看一下示例
- 局部启用
1. 暴露出 App.ku 里所要被使用的变量或方法
```vue
import { ref } from 'vue'
const helloKuRoot = ref('Hello AppKuVue')
const exposeRef = ref('this is form app.Ku.vue')
defineExpose({
exposeRef,
})
{{ helloKuRoot }}
```
2. 在 template 内编写 root="xxx"，并通过 const xxx = ref() 获取模板引用
> xxx 代表自定义命名，可以随意命名
```vue
import { ref } from 'vue'
const uniKuRoot = ref()
Hello UniKuRoot
```
- 全局启用
1. 通过配置 `enabledGlobalRef` 开启全局自动注入 App.ku 实例
```js
// vite.config.*
import { defineConfig } from 'vite'
import UniKuRoot from '@uni-ku/root'
import Uni from '@dcloudio/vite-plugin-uni'
export default defineConfig({
plugins: [
UniKuRoot({
enabledGlobalRef: true
}),
Uni()
]
})
```
2. 暴露出 App.ku 里所要被使用的变量或方法
```vue
import { ref } from 'vue'
const helloKuRoot = ref('Hello AppKuVue')
const exposeRef = ref('this is form app.Ku.vue')
defineExpose({
exposeRef,
})
{{ helloKuRoot }}
```
3. 通过特有内置方法 `getCurrentPages()` 获取暴露的数据
```vue
import { onMounted, ref } from 'vue'
const pagesStack = getCurrentPages()
const uniKuRoot = ref()
onMounted(() => {
uniKuRoot.value = pagesStack[pagesStack.length - 1].$vm.$refs.uniKuRoot
})
Hello UniKuRoot
```
### ✨ 例子
> 以下例子均以CLI创建项目为例, HBuilderX 项目与以上设置同理, 只要注意是否需要包含 src目录 即可
1. (点击展开) 全局共享组件例子：Toast
> 不仅是 Toast 组件，还可以是 Message、LoginPopup 等等
- 🔗 [查看以下完整项目例子](https://github.com/uni-ku/root/tree/main/examples)
1. 编写 Toast 组件
```vue
import { useToast } from '@/composables/useToast'
const { globalToastState, hideToast } = useToast()
welcome to use @uni-ku/root
.toast-wrapper{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.toast-box{
background: white;
color: black;
}
```
2. 实现 Toast 组合式API
```ts
// src/composables/useToast
import { ref } from 'vue'
const globalToastState = ref(false)
export function useToast() {
function showToast() {
globalToastState.value = true
}
function hideToast() {
globalToastState.value = false
}
return {
globalToastState,
showToast,
hideToast,
}
}
```
3. 挂载至 App.ku.vue
```vue
import GlobalToast from '@/components/GlobalToast.vue'
```
4. 视图内部触发全局 Toast 组件
```vue
import { useToast } from '@/composables/useToast'
const { showToast } = useToast()
Hello UniKuRoot
视图内触发展示Toast
```
2. (点击展开) 全局共享布局例子：ConfigProvider
> 不仅仅只有ConfigProvider，还能是Layout、NavBar、TabBar等等！
1. 以 Wot 组件库中 WdConfigProvider 为例子，[了解更多Wot点这里](https://github.com/Moonofweisheng/wot-design-uni)
```vue
import { useTheme } from './composables/useTheme'
const { theme, themeVars } = useTheme({
buttonPrimaryBgColor: '#07c160',
buttonPrimaryColor: '#07c160'
})
Hello AppKuVue
```
2. 编写主题相关组合式API
```ts
// src/composables/useTheme.ts
import type { ConfigProviderThemeVars } from 'wot-design-uni'
import { ref } from 'vue'
const theme = ref<'light' | 'dark'>(false)
const themeVars = ref()
export function useTheme(vars?: ConfigProviderThemeVars) {
vars && (themeVars.value = vars)
function toggleTheme(mode?: 'light' | 'dark') {
theme.value = mode || (theme.value === 'light' ? 'dark' : 'light')
}
return {
theme,
themeVars,
toggleTheme,
}
}
```
3. 切换主题模式
```vue
import { useTheme } from '@/composables/useTheme'
const { theme, toggleTheme } = useTheme()
切换主题，当前模式：{{ theme }}
```
### 📝 待办
- [x] 支持热更新
- [x] 支持VueSFC
- [x] 支持小程序PageMeta
- [ ] 支持 App.ku.vue 内直接编写控制逻辑
- [ ] 补全单元测试
### 💬 社区
- QQ 交流群 ([897784703](https://qm.qq.com/q/hX1smd93MI))
### 🏝 周边
|项目|描述|
|---|---|
|[Wot Design Uni](https://github.com/Moonofweisheng/wot-design-uni/)|一个基于Vue3+TS开发的uni-app组件库，提供70+高质量组件|
### 💖 赞赏
如果我的工作帮助到了您，可以请我吃辣条，使我能量满满 ⚡
> 请留下您的Github用户名，感谢 ❤
#### 微信赞赏
#### 赞赏榜单
