uniapp 使用 elements

### 如何在 UniApp 中集成和使用 Elements 组件

#### 安装依赖包
为了能够在 UniApp 项目中使用特定的 UI 库，通常需要先安装对应的 NPM 包。对于 shadcn/ui 这样的组件库来说，可以通过如下命令来完成安装：

npm install @shadcn/universal

此操作会将所需的资源下载至项目的 `node_modules` 文件夹内[^2]。

#### 配置 Vue 使用自定义组件
为了让 Vue 能识别新加入的 Components，在 main.js 或者 app.vue 的入口文件里需做适当配置。下面是一段简单的例子展示怎样注册全局组件以便在整个应用程序范围内访问它们：

import { createApp } from 'vue';
import App from './App.vue';

// 导入整个 ShadCN/UI 库作为插件形式
import '@shadcn/universal/register'; 

const app = createApp(App);

app.mount('#app');

这段代码确保了所有由 shadcn/ui 提供的基础样式以及 JavaScript 功能都能被正确加载并应用于页面上。

#### 创建单文件组件 (SFCs)
当涉及到具体的 Element 组件时，建议创建独立的 .vue 文件用于封装逻辑与模板。例如要实现按钮(Button)，则可在 src/components/ButtonElement.vue 内编写如下内容：

<template>
    <button class="btn btn-primary">
        {{ label }}
    </button>
</template>

<script setup lang="ts">
defineProps<{
    label: string;
}>();
</script>

<style scoped>
@import "@shadcn/universal/styles/button.css";
</style>

这里不仅包含了 HTML 结构还引入了必要的 CSS 类名以匹配设计风格指南的要求[^1]。

#### 在页面中调用本地或全局组件
最后一步就是在实际使用的视图文件（如 HomeView.vue）里面声明并渲染之前准备好的 ButtonElement 组件:

<template>
<div id="home-view">
    <!-- ...其他元素... -->
    
    <!-- 局部注册方式 -->
    <ButtonElement :label="'点击我'" />
    
    <!-- 如果已经通过main.js做了全局注册，则可以直接这样写 -->
    <MyComponent></MyComponent> 
    <MyLocalComponent></MyLocalComponent>
</div>
</template>

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

以上就是关于如何把 Elements 组件融入到基于 UniApp 构建的应用程序中的基本流程介绍。