组件使用方式

在业务项目中安装本组件库后，可按全量或按需方式引入。

---

一、前置准备

1. 安装：在业务项目中执行 pnpm add @ivui/vue-component-scaffold（或 npm install）
2. 依赖：业务项目需已安装 vue（本库的 peerDependency）

---

二、全量导入

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import Vui3 from "@ivui/vue-component-scaffold";
import "@ivui/vue-component-scaffold/index.css";

const app = createApp(App);
app.use(Vui3);
app.mount("#app");

全量导入后，模板中可用 <vui3-tag>、<Vui3Tag>。

---

三、按需导入

自动按需导入

基于 Vite 的项目，在 vite.config.js 中配置插件：

pnpm add unplugin-vue-components -D

// vite.config.js
import Components from "unplugin-vue-components/vite";
import { Vui3Resolver } from "@ivui/vue-component-scaffold/resolver";

export default {
  plugins: [
    Components({
      resolvers: [Vui3Resolver()],
    }),
  ],
};

配置后可直接在模板使用，无需手动 import：

<template>
  <vui3-tag text="测试" type="primary" />
</template>

手动按需导入（需导入样式）

<script setup>
import { Tag as Vui3Tag } from "@ivui/vue-component-scaffold";
import "@ivui/vue-component-scaffold/es/tag/style.css";
</script>

<template>
  <vui3-tag text="测试" type="primary" />
</template>

样式路径：@ivui/vue-component-scaffold/es/[组件名]/style.css

---

四、常见问题

样式未生效？

确认已导入样式。全量：import '@ivui/vue-component-scaffold/index.css'；按需：import '@ivui/vue-component-scaffold/es/[组件名]/style.css'。

---

五、注意事项

1. peerDependencies：业务项目需安装 vue