uview-plus在vue3全局配置

uView-plus 是一款基于 Vue.js 开发的高质量 UI 组件库，它提供了丰富的组件，使得开发者能够快速搭建出美观、易用的应用界面。在 Vue 3 中进行全局配置，主要的目的是为了让 uView-plus 组件能够全局可用，简化引入组件的代码，并可以自定义一些全局的配置项。

在 Vue 3 中进行 uView-plus 的全局配置通常包括以下几个步骤：

1. 安装 uView-plus：
使用 npm 或 yarn 来安装 uView-plus 到项目中。

   npm i uview-ui-plus
   # 或者
   yarn add uview-ui-plus

2. 在 main.js 中引入并使用 uView-plus：
在 Vue 3 的 main.js 文件中，首先导入 createApp 函数，然后创建 Vue 应用实例，并引入 uView-plus，最后使用应用实例挂载到根 DOM 元素上。

   import { createApp } from 'vue';
   import App from './App.vue';
   import uView from 'uview-ui-plus';
   import 'uview-ui-plus/dist/styles/index.css';

   const app = createApp(App);
   app.use(uView);
   app.mount('#app');

3. 配置全局变量（如果需要）：
如果需要对 uView-plus 进行一些全局配置，可以在使用 uView-plus 之前设置全局变量，然后将它们传递给 uView-plus。例如，设置全局主题颜色：

   import { createApp } from 'vue';
   import App from './App.vue';
   import uView from 'uview-ui-plus';
   import 'uview-ui-plus/dist/styles/index.css';

   // 设置全局变量
   const globalConfig = {
     dark: false, // 是否启用暗黑模式
     theme: {
       primary: '#007aff', // 主题色
       // 更多自定义主题选项...
     }
   };

   const app = createApp(App);
   app.config.globalProperties.$u = globalConfig; // 挂载全局变量
   app.use(uView);
   app.mount('#app');

4. 在组件中使用全局变量：
在 Vue 组件中，可以使用挂载的全局变量 `$u` 来访问之前设置的配置项。

   <template>
     <div>
       <!-- 使用 uView-plus 组件 -->
       <u-button type="primary">按钮</u-button>
     </div>
   </template>

   <script>
   export default {
     // 使用全局变量中的主题色
     computed: {
       primaryColor() {
         return this.$u.theme.primary;
       }
     }
   };
   </script>