yarn add -D @uni-ku/root

我们提供以技术为根基的服务及专门设计，具体要求可联系作者咨询，请加微信

Root 支持 或者 CLI 创建的 Vue3 项目

新增一种运用括号嵌套方式实现的功能演示，该方案适配由其衍生出的各类组件集合，继续向下滚动至范例部分

pnpm add -D @uni-ku/root
yarn add -D @uni-ku/root
npm install -D @uni-ku/root

// vite.config.(js|ts)
import Uni from '@dcloudio/vite-plugin-uni'
import UniKuRoot from '@uni-ku/root'
import { defineConfig [id_1003349141] from 'vite'
export default defineConfig({
  plugins: [
    如果发现存在修改 pages.json 的插件，请将 UniKuRoot 放置到那个插件的后面
    UniKuRoot(),
    Uni()
  ]
})

CLI：直接编写 根目录下的 vite..(js|ts)

：在根目录下 创建 vite..(js|ts) 并写入

建立名为App.ku.vue的文件，该文件作为根组件，名称可自行设定，具体功能说明请查阅下方功能参考部分进行设置。

借助标识或设定视角的存储方位，同时能够把该标识安放到容器中任何方位，不过仅限于一个

<script setup lang="ts">
import { ref } from 'vue'

const helloKuRoot = ref('Hello AppKuVue')
script>
<template>
  <div>{{ helloKuRoot }}div>
  
  <KuRootView />
  
  <div>
    <KuRootView />
  div>
template>

在源代码文件夹里，要建立名为 App.ku.vue 的文件，或者采用其他指定名称

在根目录位置新建 App.ku.vue 文件，或者采用其他指定名称进行创建

!

这个标记跟 的作用差不多，不过要留意，因为-Vue存在不足之处，所以这个作用跟并不完全一样

展开后，功能一允许用户设定虚拟根组件的专属标识，其预设值为App.ku.vue

借助调整 vite..(js|ts) 插件配置项，能够设定虚拟根组件的特定标识，以此实现个性化命名

// vite.config.(js|ts)
import Uni from '@dcloudio/vite-plugin-uni'
import UniKuRoot from '@uni-ku/root'
import { defineConfig } from 'vite'
export default defineConfig({
  plugins: [
    UniKuRoot({
      // 默认含后缀 .vue，直接设置命名即可
      rootFileName: 'KuRoot',
    }),
    // ...other plugins
  ]
})

设置虚拟根组件为 .vue 文件格式，能够达成个性化定制，其他各项功能维持原状

将名为 App.ku.vue 的文件更改为 KuRoot.vue 的文件名

展开功能二，涉及运用一个虚构的根组件范例，该范例为App.ku.vue

有两种启用方式，局部或全部启用

一、 局部启用

公开了名为 App.ku.vue 的组件里需要被调用的那些变量和方法

<script setup lang="ts">
import { ref } from 'vue'

const helloKuRoot = ref('Hello AppKuVue')

const exposeRef = ref('this is form app.Ku.vue')

defineExpose({
  exposeRef,
})
script>
<template>
  <div>
    <div>{{ helloKuRoot }}div>
    <KuRootView />
  div>
template>

在内部设置 root 的值为空，然后借助 const 变量，利用 ref 函数捕获模板的引用地址

仅是一个变量，你可以根据你习惯重新命名

<script setup lang="ts">
import { ref } from 'vue'

const uniKuRoot = ref()
script>
<template root="uniKuRoot">
  <view>
    Hello UniKuRoot
  view>
template>

二、全局启用

1. 通过配置 开启全局自动注入 App.ku 实例

// vite.config.(js|ts)
import Uni from '@dcloudio/vite-plugin-uni'
import UniKuRoot from '@uni-ku/root'
import { defineConfig } from 'vite'
export default defineConfig({
  plugins: [
    UniKuRoot({
      enabledGlobalRef: true
    }),
    Uni()
  ]
})

2. 暴露出 App.ku 里所要被使用的变量或方法

<script setup lang="ts">
import { ref } from 'vue'

const helloKuRoot = ref('Hello UniKuRoot')

const exposeRef = ref('this is from App.ku.vue')

defineExpose({
  exposeRef,
})
script>
<template>
  <div>
    <div>{{ helloKuRoot }}div>
    <KuRootView />
  div>
template>

3. 通过特有内置方法 () 获取暴露的数据

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const pagesStack = getCurrentPages()
const uniKuRoot = ref()

onMounted(() => {
  uniKuRoot.value = pagesStack[pagesStack.length - 1].$vm.$refs.uniKuRoot
})
script>
<template>
  <view>
    Hello UniKuRoot
  view>
template>

以 CLI 建立工程为例, 工程配置与之相似, 只需留意是否要纳入 src 文件夹即可

(点击展开) 示例一：全局共享组件例子：Toast

不仅是 Toast 组件，还可以是 、 等等

编写 Toast 组件

<script setup lang="ts">
import { useToast } from '@/composables/useToast'

const当前全局提示状态, 需要执行隐藏提示的操作= useToast()
script>
<template>
  <div v-if="globalToastState" class="toast-wrapper" @click="hideToast">
    <div class="toast-box">
      welcome to use @uni-ku/root
    div>
  div>
template>
<style scoped>
.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;
}
style>

实现 Toast 组合式API

// 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,
  }
}

挂载至 App.ku.vue

<script setup lang="ts">
import GlobalToast from '@/components/GlobalToast.vue'
script>
<template>
  <KuRootView />
  <GlobalToast />
template>

视图内部触发全局 Toast 组件

<script setup lang="ts">
import { useToast } from '@/composables/useToast'

const { showToast } = useToast()
script>
<template>
  <view>
    Hello UniKuRoot
  view>
  <button @click="showToast">
    视图内触发展示Toast
  button>
template>

(点击展开) 示例二：全局共享布局例子：

不仅仅只有，还能是、、等等！

如若您正在运用wot模块，可从此处取得对应的操作指南，里面包含了详细说明

以 Wot 组件库中 为例子

<script setup lang="ts">
import { useTheme } from './composables/useTheme'

const { theme, themeVars } = useTheme({
  buttonPrimaryBgColor: '#07c160',
  buttonPrimaryColor: '#07c160'
})
script>
<template>
  <div>Hello AppKuVuediv>
  
  <WdConfigProvider :theme="theme" :theme-vars="themeVars">
    <KuRootView />
  WdConfigProvider>
template>

编写主题相关组合式API

这个文件位于源代码的 composables 文件夹中，具体路径是 composable，主题相关的功能定义在这里实现，包含了与界面主题切换有关的逻辑，代码组织得比较清晰，方便维护和扩展
import type { ConfigProviderThemeVars } from 'wot-design-uni'
import { ref } from 'vue'
const theme = ref<'light' | 'dark'>(false)
const themeVars = ref<ConfigProviderThemeVars>()
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,
  }
}

切换主题模式

<script setup lang="ts">
import { useTheme } from '@/composables/useTheme'

const { theme, toggleTheme } = useTheme()
script>
<template>
  <button @click="toggleTheme">
    切换主题，当前模式：{{ theme }}
  button>
template>

展开后内容：Wot的Toast功能，组件的调用方法

以下示例以 Toast 为例子

挂载组件

<template>
  <KuRootView />
  
  <WdToast />
template>

调用组件

<script setup lang="ts">
import { useToast } from '@/uni_modules/wot-design-uni'

const toast = useToast()

function showToast() {
  toast.show('你好，我是uni-ku/root')
}
script>
<template>
  <view>这是在任意页面才可见view>
  <WdButton @click="showToast">
    展示Toast信息
  WdButton>
template>

与uni--的区别

!

root的基本思想是尽可能的模仿Vue里的App.vue， 也就是类似nuxt的页面构造方式

: uni--

项目描述

Wot Uni

这是一套采用Vue3与TS构建的uni-app组件集合，包含七十余种优质模块

Uni

一个用于快速创建 uni-app 项目的轻量脚手架工具

Uni Best

最好用的 开发框架

如果我的工作帮助到了您，可以请我吃辣条，使我能量满满

请留下您的用户名，感谢